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"
>
{{ 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
loading="lazy"
src="https://placehold.co/300x200/"
alt="Placeholder Image"
class="w-full h-48 rounded-md object-cover"
src="{{ .thumbnail }}"
alt="Thumbnail"
class="w-full h-52 rounded-md object-cover"
/>
<div class="px-1 pt-4">
<div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
@ -52,7 +52,7 @@
</div>
{{ end }}
</div>
<div class="text-gray-800 text-base">
<div class="text-sm text-gray-800 text-base mb-4">
{{ if ne .quant "" }}
<div class="flex flex-row justify-between">
<strong>Quantity:</strong>
@ -61,11 +61,11 @@
{{ end }} {{ if ne .dimensions "" }}
<div class="gap-1 text-right flex flex-row justify-between">
<strong>Dimensions:</strong>
<span>{{ .dimensions }}</span>
<span >{{ .dimensions }}</span>
</div>
{{ end }} {{ if ne .baseCost "" }}
<div class="flex flex-row justify-between">
<strong>Base Cost:</strong>
<strong>Rental Cost:</strong>
<span>{{ .baseCost }}</span>
</div>
{{ end }} {{ if ne .deliveryPickup "" }}
@ -78,16 +78,21 @@
<strong>+ Setup & Breakdown:</strong>
<span>{{ .installBreakdown }}</span>
</div>
{{ end }} {{ if ne .purchaseCost "" }}
<div class="flex flex-row justify-between">
<strong>Purchase Cost:</strong>
<span>{{ .purchaseCost }}</span>
</div>
{{ end }}
</div>
</div>
<div class="h-full grid grid-cols-1 place-items-end pt-5">
<a class="w-full" href="#modal-{{ .item | urlize }}">
<div class="flex flex-col gap-4">
{{ 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
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"