overhaul rental modal element

content/about/index.md

@@ -16,7 +16,7 @@ gallery:
   description: Ian graduated from Lively Tech's Advanced Welding Program with a multitude
     of certifications. Then, he got accepted into Atlanta's UA Local Union 72 as a
     pipe welder. While pursuing a career as a high strength pressurized pipeline welder,
-    Ian discovered a newfound passion for metal art. Ian's and Caitlin's impressive
+    Ian discovered a newfound passion for metal art. Ian and Caitlin's impressive
     large-scale metal art installations were featured multiple times at Okeechobee
     Festival and Hulaween, fueling their passion for art and inspiring them to incorporate
     it into various aspects of their life.

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">
-      {{ if ne .purchaseCost "" }}
-      <div
-        class="flex flex-row justify-between border-[1px] rounded-lg px-4 h-10 py-[0.275rem] w-full"
+    <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"
       >
-        <strong>Purchase Cost:</strong>
-        <span>{{ .purchaseCost }}</span>
-      </div>
-      {{ 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>
+        Expand
+      </button>
+    </a>
     <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">
-                <h3 class="text-xl mb-2" id="modal-title">
-                  <strong>{{ .item }}</strong>
-                </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 class="z-20 w-full mt-3 text-center sm:mt-0 sm:text-left">
+                <div class="relative text-xl mb-2 font-semibold" id="modal-title">
+                  {{ .item }}
                 </div>
-                {{ end }}
-                <div class="px-4 pt-6 w-full">
-                  <div class="text-sm text-gray-800 text-base mb-4">
-                    {{ if ne .quant "" }}
-                    <div class="flex flex-row justify-between">
-                      <strong>Quantity:</strong>
-                      <span>{{ .quant }}</span>
+                <div class="flex flex-col sm:flex-row">
+                  {{ if .gallery }} {{ partial "carousel.html" . }} {{ end }}
+                  <div class="z-20 pt-4 sm:pl-4 w-full md:w-1/3 sm:w-1/2">
+                    <div class="text-md text-gray-800 text-base">
+                      <div>
+                        {{ if ne .deliveryPickup "" }}
+                        <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;
+  }
 }