finance form template displayed
This commit is contained in:
@@ -34,6 +34,8 @@ $response = get_transient("autocart_response");
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow flex max-w-7xl mx-auto">
|
||||
<!-- Left Drawer for Filters -->
|
||||
<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-50 hidden"></div>
|
||||
|
||||
<aside id="slide-out-filters" class="lg:w-1/4 md:w-1/4 w-10/12 lg:static md:static fixed p-4 shadow-lg bg-white lg:block md:block rounded overflow-y-auto transition duration-300 ease-in-out transform sm:transform-none sm:right-0 top-0 left-0 z-50 h-screen md:h-auto lg:h-auto">
|
||||
<div class="mdc-select mdc-select--outlined col-xl-3 rounded pb-2 w-full" id="order-by">
|
||||
<div class="mdc-select__anchor">
|
||||
@@ -237,7 +239,7 @@ $response = get_transient("autocart_response");
|
||||
<div class="flex items-center space-x-4">
|
||||
<i id="grid-view" class="fas fa-th text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple selected"></i>
|
||||
<i id="list-view" class="fas fa-list text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple"></i>
|
||||
<label for="open-menu" tabindex="0" aria-haspopup="true" role="button" aria-controls="menu" class="fixed bottom-4 right-4 cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
|
||||
<label for="open-menu" tabindex="0" aria-haspopup="true" role="button" aria-controls="menu" class="cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
|
||||
<i id="filter-toggle" class="fas fa-sliders-h text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110"></i>
|
||||
</label>
|
||||
<input type="checkbox" data-menu id="open-menu" class="peer hidden">
|
||||
@@ -263,6 +265,8 @@ if ($make) {
|
||||
const filtersDrawerCheckbox = document.getElementById('open-menu');
|
||||
const filtersDrawer = document.querySelector('#slide-out-filters');
|
||||
const filterToggle = document.querySelector('#filter-toggle');
|
||||
const overlay = document.getElementById('overlay');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
|
||||
@@ -294,22 +298,45 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
// content.style.display = content.style.display === "none" ? "block" : "none";
|
||||
});
|
||||
});
|
||||
// filtersDrawer.style.translate = "-100%";
|
||||
|
||||
const mobileMediaQuery = window.matchMedia('(max-width: 767px)');
|
||||
|
||||
const applyTranslation = () => {
|
||||
if (mobileMediaQuery.matches) {
|
||||
filtersDrawer.style.translate = '-100%';
|
||||
} else {
|
||||
filtersDrawerCheckbox.checked = false;
|
||||
filtersDrawerCheckbox.dispatchEvent(new Event('change'));
|
||||
filtersDrawer.style.translate = '0';
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
applyTranslation();
|
||||
mobileMediaQuery.addListener(applyTranslation);
|
||||
// window.addEventListener('resize', applyTranslation);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
filtersDrawerCheckbox.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
filtersDrawer.style.translate = 0;
|
||||
filterToggle.classList.add('selected')
|
||||
if (this.checked) {
|
||||
overlay.classList.remove('hidden');
|
||||
filtersDrawer.style.translate = 0;
|
||||
filterToggle.classList.add('selected');
|
||||
} else {
|
||||
overlay.classList.add('hidden');
|
||||
filterToggle.classList.remove('selected')
|
||||
filtersDrawer.style.translate = "-100%";
|
||||
|
||||
}
|
||||
});
|
||||
overlay.addEventListener('click', function() {
|
||||
|
||||
} else {
|
||||
// filtersDrawer.classList.add('hidden'); // Close the drawer
|
||||
filterToggle.classList.remove('selected')
|
||||
filtersDrawer.style.translate = "-100%";
|
||||
|
||||
|
||||
}
|
||||
filtersDrawerCheckbox.checked = false;
|
||||
filtersDrawerCheckbox.dispatchEvent(new Event('change'));
|
||||
});
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user