overhaul rental modal element

themes/gallo/layouts/partials/carousel.html

@@ -0,0 +1,68 @@
+<div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
+  <div class="rounded-md relative overflow-hidden pt-[100%]">
+    <div
+      class="carousel-wrapper flex transition-transform duration-300 ease-in-out absolute inset-0"
+    >
+      {{ range .gallery }}
+      <div
+        class="carousel-item flex-shrink-0 w-full h-full flex items-center justify-center"
+      >
+        <img
+          loading="lazy"
+          class="rounded-lg w-full h-auto object-contain"
+          src="{{ .image }}"
+        />
+      </div>
+      {{ end }}
+    </div>
+
+    <button
+      class="absolute top-1/2 left-4 transform -translate-y-1/2 text-white p-1 px-3 rounded-xl font-extrabold carousel-prev z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
+    >
+      &lt;
+    </button>
+    <button
+      class="absolute top-1/2 right-4 transform -translate-y-1/2 text-white p-1 px-3 rounded-xl font-extrabold carousel-next z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
+    >
+      &gt;
+    </button>
+
+    <div
+      class="absolute text-xs right-2 bottom-2 transform text-black bg-white p-1 px-2 rounded-md carousel-indicator z-10"
+    >
+      1 / {{ len .gallery }}
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const carousels = document.querySelectorAll(".carousel");
+
+    carousels.forEach((carousel) => {
+      const wrapper = carousel.querySelector(".carousel-wrapper");
+      const items = wrapper.querySelectorAll(".carousel-item");
+      const totalItems = items.length;
+      let currentIndex = 0;
+
+      const updateIndicator = () => {
+        const indicator = carousel.querySelector(".carousel-indicator");
+        indicator.textContent = `${currentIndex + 1} / ${totalItems}`;
+      };
+
+      const showSlide = (index) => {
+        currentIndex = (index + totalItems) % totalItems;
+        wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
+        updateIndicator();
+      };
+
+      const prevButton = carousel.querySelector(".carousel-prev");
+      const nextButton = carousel.querySelector(".carousel-next");
+
+      prevButton.addEventListener("click", () => showSlide(currentIndex - 1));
+      nextButton.addEventListener("click", () => showSlide(currentIndex + 1));
+
+      updateIndicator();
+    });
+  });
+</script>

themes/gallo/layouts/partials/rental_catalog.html

@@ -74,6 +74,11 @@
           <span>{{ .dimensions }}</span>
         </div>
         {{ end }} {{ if ne .baseCost "" }}
+        <div class="flex flex-row justify-between">
+          <strong>Purchase Cost:</strong>
+          <span>{{ .purchaseCost }}</span>
+        </div>
+        {{ end }}{{ if ne .baseCost "" }}
         <div class="flex flex-row justify-between">
           <strong>Rental Cost:</strong>
           <span>{{ .baseCost }}</span>
@@ -91,30 +96,14 @@
         {{ end }}
       </div>
     </div>
-    <div class="flex flex-col gap-4">
+    <a class="w-full h-8" href="#modal-{{ .item | urlize }}">
-      {{ if ne .purchaseCost "" }}
+      <button
-      <div
+        type="button"
-        class="flex flex-row justify-between border-[1px] rounded-lg px-4 h-10 py-[0.275rem] w-full"
+        class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
       >
-        <strong>Purchase Cost:</strong>
+        Expand
-        <span>{{ .purchaseCost }}</span>
+      </button>
-      </div>
+    </a>
-      {{ else }}
-      <div
-        class="flex justify-center border-[1px] rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
-      >
-        <strong>Purchase Unavailable</strong>
-      </div>
-      {{ end }}
-      <a class="w-full h-8" href="#modal-{{ .item | urlize }}">
-        <button
-          type="button"
-          class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
-        >
-          Expand
-        </button>
-      </a>
-    </div>
     <div
       id="modal-{{ .item | urlize }}"
       class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
@@ -132,98 +121,74 @@
           >&#8203;</span
         >
         <div
-          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full"
+          id="modal-overlay"
+          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-xl w-full md:max-w-[800px]"
         >
-          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div
+            id="modal-overlay"
+            class="bg-white px-4 pt-5 pb-4 sm:p-4 sm:pb-4 md:p-8"
+          >
             <div class="sm:flex sm:items-start">
-              <div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <div class="z-20 w-full mt-3 text-center sm:mt-0 sm:text-left">
-                <h3 class="text-xl mb-2" id="modal-title">
+                <div class="relative text-xl mb-2 font-semibold" id="modal-title">
-                  <strong>{{ .item }}</strong>
+                  {{ .item }}
-                </h3>
-                {{ if .gallery }}
-                <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">
-                    <img
-                      loading="lazy"
-                      class="rounded-lg w-full"
-                      src="{{ .image }}"
-                    />
-                  </div>
-                  {{ end }}
                 </div>
-                {{ end }}
+                <div class="flex flex-col sm:flex-row">
-                <div class="px-4 pt-6 w-full">
+                  {{ if .gallery }} {{ partial "carousel.html" . }} {{ end }}
-                  <div class="text-sm text-gray-800 text-base mb-4">
+                  <div class="z-20 pt-4 sm:pl-4 w-full md:w-1/3 sm:w-1/2">
-                    {{ if ne .quant "" }}
+                    <div class="text-md text-gray-800 text-base">
-                    <div class="flex flex-row justify-between">
+                      <div>
-                      <strong>Quantity:</strong>
+                        {{ if ne .deliveryPickup "" }}
-                      <span>{{ .quant }}</span>
+                        <div class="flex flex-row justify-between">
+                          <strong>Rental Cost:</strong>
+                          <span>{{ .baseCost }}</span>
+                        </div>
+                        {{ end }} {{ if ne .installBreakdown "" }}
+                        <div class="flex flex-row justify-between">
+                          <strong>Purchase Cost:</strong>
+                          <span>{{ .purchaseCost }}</span>
+                        </div>
+                        {{ end }} {{ if ne .deliveryPickup "" }}
+                        <div class="flex flex-row justify-between">
+                          <strong>+ Pickup & Delivery:</strong>
+                          <span>{{ .deliveryPickup }}</span>
+                        </div>
+                        {{ end }} {{ if ne .installBreakdown "" }}
+                        <div class="flex flex-row justify-between">
+                          <strong>+ Setup & Breakdown:</strong>
+                          <span>{{ .installBreakdown }}</span>
+                        </div>
+                        {{ end }}
+                      </div>
+                      <div class="border-b-2 my-2 mx-4 sm:my-8"></div>
+                      <div>
+                        {{ if ne .quant "" }}
+                        <div class="flex flex-row justify-between">
+                          <strong>Quantity:</strong>
+                          <span>{{ .quant }}</span>
+                        </div>
+                        {{ end }} {{ if ne .dimensions "" }}
+                        <div
+                          class="gap-1 text-right flex flex-row justify-between"
+                        >
+                          <strong>Dimensions:</strong>
+                          <span>{{ .dimensions }}</span>
+                        </div>
+                        {{ end }}
+                      </div>
+                      <button
+                        id="close-modal"
+                        class="z-20 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm p-1 mt-4 bg-black text-base font-sm text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
+                        @click="open = false"
+                      >
+                        Close
+                      </button>
                     </div>
-                    {{ end }} {{ if ne .dimensions "" }}
-                    <div class="gap-1 text-right flex flex-row justify-between">
-                      <strong>Dimensions:</strong>
-                      <span>{{ .dimensions }}</span>
-                    </div>
-                    {{ end }} {{ if ne .baseCost "" }}
-                    <div class="flex flex-row justify-between">
-                      <strong>Rental Cost:</strong>
-                      <span>{{ .baseCost }}</span>
-                    </div>
-                    {{ end }} {{ if ne .deliveryPickup "" }}
-                    <div class="flex flex-row justify-between">
-                      <strong>+ Pickup & Delivery:</strong>
-                      <span>{{ .deliveryPickup }}</span>
-                    </div>
-                    {{ end }} {{ if ne .installBreakdown "" }}
-                    <div class="flex flex-row justify-between">
-                      <strong>+ Setup & Breakdown:</strong>
-                      <span>{{ .installBreakdown }}</span>
-                    </div>
-                    {{ end }}
-                  </div>
-                  <div class="grid grid-cols-2">
-                    {{ if ne .baseCost "" }}
-                    <div class="border rounded-s-lg p-2 flex justify-between">
-                      <strong>Rental Cost:</strong>
-                      <span>{{ .baseCost }}</span>
-                    </div>
-                    {{ else }}
-                    <div
-                      class="border rounded-s-lg p-2 text-gray-600 text-center"
-                    >
-                      <strong>Rental Unavailable</strong>
-                    </div>
-                    {{ end }} {{ if ne .purchaseCost "" }}
-                    <div
-                      class="border border-s-0 rounded-e-lg p-2 flex justify-between"
-                    >
-                      <strong>Purchase Cost:</strong>
-                      <span>{{ .purchaseCost }}</span>
-                    </div>
-                    {{ else }}
-                    <div
-                      class="border border-s-0 rounded-e-lg p-2 text-gray-600 text-center"
-                    >
-                      <strong>Purchase Unavailable</strong>
-                    </div>
-                    {{ end }}
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button
-              id="close-modal"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm p-2 px-4 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
-              @click="open = false"
-            >
-              Close
-            </button>
-          </div>
         </div>
       </div>
     </div>

themes/gallo/src/input.css

@@ -34,4 +34,20 @@
   #sc::-webkit-scrollbar-thumb {
     background-color: #666b7a;
   }
+  #modal-overlay {
+    margin: 0;
+    background: #efefef;
+  }
+
+  #modal-overlay:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 60%;
+    background: rgb(255, 255, 255);
+    transform: skew(-30deg);
+    transform-origin: top;
+  }
 }