themes/gallo/layouts/partials/rental_catalog.html

@@ -31,7 +31,7 @@
 </div>
 
 <div
-  class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
+  class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
 >
   {{ range .Params.catalog }} {{ if ne .item "" }}
   <div
@@ -49,6 +49,7 @@
     <div
       class="w-full h-52 rounded-md object-cover border-2 border-gray-200 bg-gray-100"
     ></div>
+
     {{ end }}
     <div class="px-1 pt-4">
       <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
@@ -139,34 +140,7 @@
                 <h3 class="text-xl mb-2" id="modal-title">
                   <strong>{{ .item }}</strong>
                 </h3>
-                {{ if .gallery }}
+                {{ partial "catalog-gallery.html" . }}
-                <div
-                  class="w-full mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
-                >
-                  {{ range .gallery }}
-                  <div
-                    class="relative hover:scale-105 ease-in-out duration-200 transition-all hover:shadow-2xl"
-                  >
-                    <img
-                      loading="lazy"
-                      class="rounded-lg w-full"
-                      src="{{ .image }}"
-                    />
-                    <button class="absolute right-2 top-2">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 448 512"
-                        class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
-                      >
-                        <path
-                          d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  {{ end }}
-                </div>
-                {{ end }}
                 <div class="px-4 pt-6 w-full">
                   <div class="text-sm text-gray-800 text-base mb-4">
                     {{ if ne .quant "" }}
@@ -209,9 +183,7 @@
                       <strong>Rental Unavailable</strong>
                     </div>
                     {{ end }} {{ if ne .purchaseCost "" }}
-                    <div
+                    <div class="border border-s-0 rounded-e-lg p-2 flex justify-between">
-                      class="border border-s-0 rounded-e-lg p-2 flex justify-between"
-                    >
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
@@ -244,7 +216,7 @@
 </div>
 <script>
   document.addEventListener("DOMContentLoaded", function () {
-    const modalButtons = document.querySelectorAll(".grid.grid-cols-1 a");
+    const modalButtons = document.querySelectorAll(".grid-cols-1 a");
     const closeButtons = document.querySelectorAll("#close-modal");
     const modals = document.querySelectorAll(".fixed");
     const radioButtons = document.querySelectorAll(
@@ -253,13 +225,14 @@
 
     function filterItems(category) {
       console.log("Filtering items for category:", category);
-      const items = document.querySelectorAll(".grid.grid-cols-1 > div");
+      const items = document.querySelectorAll(".grid > div");
 
       items.forEach((item) => {
         const itemCategory = item.querySelector(".bg-blue-100");
-        // Decode category to match actual category names in catalog
+        if (
-        const decodedCategory = decodeURIComponent(category);
+          !category ||
-        if (!category || itemCategory.textContent.trim() === decodedCategory) {
+          decodeURIComponent(itemCategory.textContent.trim()) === category
+        ) {
           item.classList.remove("hidden");
         } else {
           item.classList.add("hidden");
@@ -272,27 +245,31 @@
     }
 
     function updateUrl(category) {
-      const url = new URL(window.location.href);
+      const url = window.location.href.split("#")[0];
-      url.hash = encodeURIComponent(category); // Encode category for URL
+      const newUrl = category ? `${url}#${encodeURIComponent(category)}` : url;
-      window.history.replaceState({}, "", url.toString());
+      window.history.replaceState({}, "", newUrl);
     }
 
-    const category = window.location.hash.substring(1);
+    function handleCategoryChange(category) {
+      console.log("Selected category:", category);
+      updateUrl(category);
+      filterItems(category);
+    }
+
+    const category = decodeURIComponent(window.location.hash.substring(1));
     console.log("Initial category:", category);
-    filterItems(category);
+    handleCategoryChange(category);
 
     window.addEventListener("hashchange", function () {
-      const newCategory = window.location.hash.substring(1);
+      const newCategory = decodeURIComponent(window.location.hash.substring(1));
       console.log("New category:", newCategory);
-      filterItems(newCategory);
+      handleCategoryChange(newCategory);
     });
 
     radioButtons.forEach((radio) => {
       radio.addEventListener("change", function () {
         const category = this.value;
-        console.log("Selected category:", category);
+        handleCategoryChange(category);
-        updateUrl(category);
-        filterItems(category);
       });
     });