fix: offcanvas menu show/hide and overlay issue

staging
Tejas Chari 2023-11-22 13:02:51 +05:30
parent ac4e31fdf4
commit 42224b883b
4 changed files with 6041 additions and 454 deletions

View File

@ -85,17 +85,25 @@ $(function () {
allowPageScroll: "vertical", allowPageScroll: "vertical",
}); });
// $("#products_top_sidebar").offcanvas({ $("#product-list-top-filters").offcanvas({
// effect: "slide-in-over", effect: "slide-in-over",
// overlay: true, overlay: true,
// classes: { classes: {
// element: "absolute top-0 z-50", element: "absolute top-0 z-50",
// }, },
// }); });
//
// $("#show_filters").on("click", function () { $("#show-filters").on("click.offcanvas", function () {
// $("#products_top_sidebar").offcanvas("toggle"); $("#product-list-top-filters").offcanvas("toggle");
// }); });
$("#product-list-top-filters").on("shown.offcanvas", function () {
$("#product-list-top-filters").show();
});
$("#product-list-top-filters").on("hide.offcanvas", function () {
$("#product-list-top-filters").hide();
});
function ThAccordion() {} function ThAccordion() {}

File diff suppressed because one or more lines are too long

View File

@ -24,6 +24,7 @@
*} *}
{if $facets|count} {if $facets|count}
<div id="search_filters"> <div id="search_filters">
{*
<div id="search_filter_buttons" class="flex hidden"> <div id="search_filter_buttons" class="flex hidden">
{block name='facets_clearall_button'} {block name='facets_clearall_button'}
{if $activeFilters|count} {if $activeFilters|count}
@ -44,6 +45,7 @@
{/if} {/if}
{/block} {/block}
</div> </div>
*}
<div class="th-accordion"> <div class="th-accordion">
{foreach from=$facets item="facet"} {foreach from=$facets item="facet"}
{if !$facet.displayed} {if !$facet.displayed}

View File

@ -34,10 +34,15 @@
<span> Filter </span> <span> Filter </span>
</button> </button>
</div> </div>
<!-- Sort By Dropdown -->
<div class="flex flex-row-reverse gap-2">
{block name='sort_by'}
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
{/block}
</div>
<!-- Off Screen Canvas Menu For Filters --> <!-- Off Screen Canvas Menu For Filters -->
<div class="relative z-40" role="dialog" aria-modal="true"> <div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true">
<div id="product-list-top-filters" class="fixed inset-0 z-50 flex hidden"> <div class="relative mr-auto flex h-full md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div class="relative mr-auto flex h-full w-screen md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div class="flex items-center justify-between px-4"> <div class="flex items-center justify-between px-4">
<h2 class="text-lg font-medium text-gray-900">Filters</h2> <h2 class="text-lg font-medium text-gray-900">Filters</h2>
</div> </div>
@ -50,12 +55,6 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="flex flex-row-reverse">
{block name='sort_by'}
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
{/block}
</div>
</div> </div>