theme sync
This commit is contained in:
@@ -34,8 +34,8 @@ $response = get_transient("autocart_response");
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow flex max-w-7xl mx-auto">
|
||||
<!-- Left Drawer for Filters -->
|
||||
<aside class="w-1/4 p-4 shadow-lg bg-white hidden md:block rounded">
|
||||
<div class="mdc-select mdc-select--outlined .col-xl-3 rounded p-2 w-full" id="order-by">
|
||||
<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">
|
||||
<span class="mdc-notched-outline">
|
||||
<span class="mdc-notched-outline__leading"></span>
|
||||
@@ -62,16 +62,13 @@ $response = get_transient("autocart_response");
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<!-- Panel 1 -->
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Price </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<div class="flex justify-center items-center">
|
||||
<span id="priceRange" class="slider-readings"> <?php echo '$' . number_format($minPrice) . ' to $' . number_format($maxPrice) ?> </span></div>
|
||||
<div class="mdc-slider mdc-slider--range" id="autocart-price-range-field">
|
||||
@@ -94,16 +91,13 @@ $response = get_transient("autocart_response");
|
||||
</div>
|
||||
</div>
|
||||
<!-- Panel 2 -->
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Year </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<div class="flex justify-center items-center">
|
||||
<span id="yearRange" class="slider-readings"> <?php echo $minYear .' to '.$maxYear; ?> </span>
|
||||
</div>
|
||||
@@ -126,16 +120,13 @@ $response = get_transient("autocart_response");
|
||||
</div>
|
||||
</div>
|
||||
<!-- Panel 3 -->
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Kilometres </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<div class="flex justify-center items-center">
|
||||
<span id="KilometresRange" class="slider-readings">19000 to 222000 </span>
|
||||
</div>
|
||||
@@ -159,95 +150,77 @@ $response = get_transient("autocart_response");
|
||||
</div>
|
||||
|
||||
<!-- Panel 4 -->
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Make </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="make-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg w-full">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header" id="model-collapse-toggle ">
|
||||
<div class="w-full text-left focus:outline-none transition"> Model </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<ul class="model-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg w-full">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="model-container list-none text-gray-900 w-48 bg-white text-sm font-medium rounded-lg w-full ">
|
||||
<p>Please Select a Make.</p>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Trim </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="trim-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
||||
<p>Please Select a Model.</p>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Body Style </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="body-type-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Transmission </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="transmission-container list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded p-2">
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<div class="border rounded p-2" collapse-toggle>
|
||||
<div class="flex justify-between items-center p-4 ac-accordion-header">
|
||||
<div class="w-full text-left focus:outline-none transition"> Exterior Color </div>
|
||||
<svg class="w-4 h-4 hover:bg-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<i class="fas fa-chevron-down hover:bg-gray-200"></i>
|
||||
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="mt-2 ac-accordion-content">
|
||||
<ul class="exterior-color list-none text-gray-900 bg-white text-sm font-medium rounded-lg w-full">
|
||||
|
||||
</ul>
|
||||
@@ -259,11 +232,15 @@ $response = get_transient("autocart_response");
|
||||
<!-- Main Content -->
|
||||
<div class="w-3/4 ml-1/4 p-4 pb-0 flex-grow">
|
||||
<!-- Top App Bar with Menu Button -->
|
||||
<header class="shadow-lg bg-white p-4 flex justify-between items-center rounded">
|
||||
<header class="shadow-lg bg-white p-4 flex justify-between items-center rounded" >
|
||||
<div class="mt-2" id="applied-filters-block"></div>
|
||||
<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">
|
||||
<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">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -283,18 +260,57 @@ if ($make) {
|
||||
|
||||
<script>
|
||||
|
||||
const filtersDrawerCheckbox = document.getElementById('open-menu');
|
||||
const filtersDrawer = document.querySelector('#slide-out-filters');
|
||||
const filterToggle = document.querySelector('#filter-toggle');
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
|
||||
year = new mdc.slider.MDCSlider(document.querySelector('#autocart-year-range-field'));
|
||||
kilometres = new mdc.slider.MDCSlider(document.querySelector('#autocart-kilometres-range-field'));
|
||||
price.listen('MDCSlider:input', updatePrice);
|
||||
year.listen('MDCSlider:input', updateYear);
|
||||
kilometres.listen('MDCSlider:input', updateMileage);
|
||||
|
||||
new DisplayMode();
|
||||
dataStore = new DataStore([]);
|
||||
|
||||
new SortBy(dataStore);
|
||||
sendReq();
|
||||
|
||||
|
||||
const accordionItems = document.querySelectorAll("[collapse-toggle]");
|
||||
|
||||
accordionItems.forEach(item => {
|
||||
const header = item.querySelector(".ac-accordion-header");
|
||||
const content = item.querySelector(".ac-accordion-content");
|
||||
const icon = header.querySelector("i.fas");
|
||||
|
||||
header.addEventListener("click", function() {
|
||||
item.classList.toggle("collapsed");
|
||||
// content.classList.toggle('hidden');
|
||||
icon.classList.toggle('fa-chevron-down');
|
||||
icon.classList.toggle('fa-chevron-up');
|
||||
// content.style.display = content.style.display === "none" ? "block" : "none";
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
filtersDrawerCheckbox.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
filtersDrawer.style.translate = 0;
|
||||
filterToggle.classList.add('selected')
|
||||
|
||||
} else {
|
||||
// filtersDrawer.classList.add('hidden'); // Close the drawer
|
||||
filterToggle.classList.remove('selected')
|
||||
filtersDrawer.style.translate = "-100%";
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user