finance form template displayed

This commit is contained in:
2024-04-09 12:35:05 -04:00
parent 67e0407058
commit 57facdd65c
9 changed files with 903 additions and 870 deletions

View File

@@ -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'));
});