theme sync

This commit is contained in:
2024-04-08 06:32:26 -04:00
parent 74d73feffa
commit 67e0407058
13 changed files with 844 additions and 419 deletions

View File

@@ -173,8 +173,8 @@ $image_title = !empty($vehicle_images[0]['title']) ? $vehicle_images[0]['title']
$image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images[0]['description'] : '';
?>
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2">
<div class="max-w-7xl mx-auto grid">
<div class="grid grid-cols-2 hidden lg:grid">
<div class="relative group cursor-pointer">
<img src="<?php echo $vehicle_images[0]['url']; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">
@@ -211,12 +211,12 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
</div>
<div class="bg-gray-100 dark:bg-gray-800 py-4">
<div class="bg-gray-100 dark:bg-gray-800 py-4 grid">
<!-- Single Car Information -->
<div class="lg:grid grid-cols-3 relative">
<div class="lg:grid lg:grid-cols-3 grid grid-cols-1 relative">
<!-- Vehicle Details -->
<div class="mx-auto col-span-2">
<div class="lg:mx-auto md:mx-auto col-span-2">
<!-- Single Car -->
<div class="m-4">
@@ -319,18 +319,31 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
<p class="mb-4 font-bold text-gray-700 dark:text-gray-300">Options</p>
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white mt-4 transition-all duration-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
<div class="md:grid grid-cols-3">
<ul class="col-span-1 flex-column space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<button class="inline-flex items-center text-left px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
<?= $category ?>
</button>
<?php endforeach; ?>
</ul>
<div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56" id="tabs-viewer">
<div class="lg:col-span-1 sm:flex-rows flex-row md:block flex md:col-span-1 lg:flex-column md:flex-column text-sm font-medium text-gray-500 dark:text-gray-400 w-full gap-4">
<button id="tabs-left" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 rounded-lg md:me-4 mb-4">
<i class="fas fa-angle-left"></i>
</button>
<ul id="tabs-container" class="lg:col-span-1 sm:flex-rows flex-row md:block flex overflow-scroll md:col-span-1 lg:flex-column md:flex-column lg:space-y-4 md:space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0 w-full overflow-scroll md:me-4 mb-4 gap-4">
<?php foreach ($groupedFeatures as $category => $features) : ?>
<?php
// Remove special characters and spaces from category for use in HTML IDs
$categorySlug = strtolower(preg_replace('/[^a-z0-9]/', '', $category));
?>
<button class="inline-flex items-center text-left lg:text-left md:text-left sm:text-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-300 w-full dark:hover:bg-gray-700 dark:hover:text-white text-gray-900 border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 md:ripple-effect lg:ripple-effect" data-tab-target="#tab-<?= $categorySlug ?>-body-1" data-te-ripple-init>
<?= $category ?>
</button>
<?php endforeach; ?>
</ul>
<button id="tabs-right" class="md:hidden lg:hidden inline-flex items-center justify-center px-2 py-2 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 rounded-lg md:me-4 mb-4">
<i class="fas fa-angle-right"></i>
</button>
</div>
<div class="sticky-container col-span-2 p-6 bg-gray-50 text-medium text-gray-900 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-300 top-32 lg:top-56 lg:ml-4 md:ml-4" id="tabs-viewer">
</div>
@@ -357,8 +370,8 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
</div>
<!-- Vehicle Financing and Booking Widget -->
<div class="px-4 col-span-1 relative">
<div class="sticky-container grid gap-3 top-56">
<div class="px-4 col-span-1 relative order-first md:order-last">
<div class="sticky-container grid gap-3 top-56">
<button role="button" class="prev px-2 py-2 rounded-full bg-neutral-100 text-neutral-900 group absolute top-1/4 left-4 transform -translate-y-1/2 z-10" aria-label="prev" onclick="navigateSlider(-1)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 group-active:-translate-x-2 transition-all duration-200 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
@@ -568,7 +581,7 @@ const mergedDetails = {
selector: 'glightbox',
touchNavigation: true,
loop: true,
startAt: selectedSlide, // Set the starting slide
startAt: selectedSlide,
onClose: function() {
const slideElements = document.querySelectorAll('#thumbnailContainer .thumbnail');
if (slideElements.length >= lightbox.index) {
@@ -609,6 +622,18 @@ const mergedDetails = {
}
jQuery(document).ready(function() {
const tabsLeftButton = document.getElementById('tabs-left');
const tabsRightButton = document.getElementById('tabs-right');
tabsLeftButton.addEventListener('click', function () {
scrollTabs(-1);
});
tabsRightButton.addEventListener('click', function () {
scrollTabs(1);
});
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
@@ -663,7 +688,6 @@ const mergedDetails = {
function rippleEffect(event) {
const btn = event.currentTarget;
// Add classes to the selected element
btn.classList.add("overflow-hidden", "shadow", "relative");
const circle = document.createElement("span");
@@ -703,9 +727,8 @@ const mergedDetails = {
function scrollCarouselRight() {
const carousel = document.querySelector('.overflow-x-scroll');
const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth; // Calculate max scrollable distance
const maxScrollRight = carousel.scrollWidth - carousel.offsetWidth;
// Prevent scrolling beyond the end
if (carousel.scrollLeft >= maxScrollRight) {
return;
}
@@ -715,4 +738,38 @@ const mergedDetails = {
behavior: 'smooth'
});
}
function scrollTabs(direction) {
const tabsContainer = document.getElementById('tabs-container');
const tabs = tabsContainer.querySelectorAll('button');
let totalWidth = 0;
tabs.forEach(tab => {
console.log(tab.offsetWidth);
if (isElementVisible(tab)) {
totalWidth += tab.offsetWidth;
}
});
const scrollAmount = direction * totalWidth;
tabsContainer.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}
function isElementVisible(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
</script>