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",
});
// $("#products_top_sidebar").offcanvas({
// effect: "slide-in-over",
// overlay: true,
// classes: {
// element: "absolute top-0 z-50",
// },
// });
//
// $("#show_filters").on("click", function () {
// $("#products_top_sidebar").offcanvas("toggle");
// });
$("#product-list-top-filters").offcanvas({
effect: "slide-in-over",
overlay: true,
classes: {
element: "absolute top-0 z-50",
},
});
$("#show-filters").on("click.offcanvas", function () {
$("#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() {}

File diff suppressed because one or more lines are too long

View File

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

View File

@ -34,10 +34,15 @@
<span> Filter </span>
</button>
</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 -->
<div class="relative z-40" 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 w-screen md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true">
<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="flex items-center justify-between px-4">
<h2 class="text-lg font-medium text-gray-900">Filters</h2>
</div>
@ -50,12 +55,6 @@
</form>
</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>