update styles on rental catalog

This commit is contained in:
brooke 2024-07-12 22:34:17 -04:00
parent 2dd3ee25b9
commit 37001e97ab

View file

@ -34,12 +34,12 @@
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" 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 "" }} {{ range .Params.catalog }} {{ if ne .item "" }}
<div class="flex flex-col bg-white rounded-lg border p-4 relative"> <div class="flex flex-col justify-between bg-white rounded-lg border p-4 relative ">
<img <img
loading="lazy" loading="lazy"
src="https://placehold.co/300x200/" src="{{ .thumbnail }}"
alt="Placeholder Image" alt="Thumbnail"
class="w-full h-48 rounded-md object-cover" class="w-full h-52 rounded-md object-cover"
/> />
<div class="px-1 pt-4"> <div class="px-1 pt-4">
<div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2"> <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
@ -52,7 +52,7 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="text-gray-800 text-base"> <div class="text-sm text-gray-800 text-base mb-4">
{{ if ne .quant "" }} {{ if ne .quant "" }}
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<strong>Quantity:</strong> <strong>Quantity:</strong>
@ -65,7 +65,7 @@
</div> </div>
{{ end }} {{ if ne .baseCost "" }} {{ end }} {{ if ne .baseCost "" }}
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<strong>Base Cost:</strong> <strong>Rental Cost:</strong>
<span>{{ .baseCost }}</span> <span>{{ .baseCost }}</span>
</div> </div>
{{ end }} {{ if ne .deliveryPickup "" }} {{ end }} {{ if ne .deliveryPickup "" }}
@ -78,16 +78,21 @@
<strong>+ Setup & Breakdown:</strong> <strong>+ Setup & Breakdown:</strong>
<span>{{ .installBreakdown }}</span> <span>{{ .installBreakdown }}</span>
</div> </div>
{{ end }} {{ if ne .purchaseCost "" }}
<div class="flex flex-row justify-between">
<strong>Purchase Cost:</strong>
<span>{{ .purchaseCost }}</span>
</div>
{{ end }} {{ end }}
</div> </div>
</div> </div>
<div class="h-full grid grid-cols-1 place-items-end pt-5"> <div class="flex flex-col gap-4">
<a class="w-full" href="#modal-{{ .item | urlize }}"> {{ if ne .purchaseCost "" }}
<div class="flex flex-row justify-between border-[3px] rounded-lg px-4 h-10 py-[0.275rem] w-full">
<strong>Purchase Cost:</strong>
<span>{{ .purchaseCost }}</span>
</div>
{{ else }}
<div class="flex justify-center border-[3px] 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 <button
type="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" 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"