isaacclad/ladill-pos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fit promo image fully inside the customer display card.
Deploy Ladill POS / deploy (push) Successful in 36s
Details

Browse Source 
Center and clamp the image with object-contain so it scales within the
card bounds without cropping or overflowing.
This commit is contained in:
isaacclad
2026-07-15 21:23:24 +00:00
parent 7d1e4a65d7
commit 72aabf5429
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pos/customer-display.blade.php
+3 -2
View File
@@ -57,11 +57,12 @@
{{-- Promo with image: large hero + copy (side-by-side on landscape kiosks) --}}
<div x-show="!!state.promo?.image_url"
class="flex min-h-0 flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-6 lg:flex-row lg:items-stretch lg:gap-8 lg:p-8">
<div class="relative flex min-h-0 max-h-[52vh] flex-[1.35] items-center justify-center overflow-hidden rounded-[1.75rem] bg-white shadow-[0_20px_50px_-24px_rgba(15,23,42,0.28)] ring-1 ring-slate-200/90 sm:max-h-[56vh] sm:rounded-[2rem] lg:max-h-none lg:flex-1">
{{-- Flex-sized card; image absolutely centered and scaled to fit (object-contain) --}}
<div class="relative min-h-0 max-h-[52vh] flex-[1.35] overflow-hidden rounded-[1.75rem] bg-white shadow-[0_20px_50px_-24px_rgba(15,23,42,0.28)] ring-1 ring-slate-200/90 sm:max-h-[56vh] sm:rounded-[2rem] lg:max-h-none lg:flex-1">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-indigo-50/30"></div>
<img :src="state.promo?.image_url"
:alt="state.promo?.headline || state.location_name || 'Promo'"
class="relative z-[1] h-full w-full object-contain object-center p-3 sm:p-5 lg:p-6">
class="absolute left-1/2 top-1/2 z-[1] max-h-[calc(100%-1.5rem)] max-w-[calc(100%-1.5rem)] -translate-x-1/2 -translate-y-1/2 object-contain object-center sm:max-h-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] lg:max-h-[calc(100%-2.5rem)] lg:max-w-[calc(100%-2.5rem)]">
</div>
<div class="flex shrink-0 flex-col justify-center gap-3.5 px-1 pb-1 text-center sm:gap-4 sm:px-2 lg:w-[min(36%,24rem)] lg:px-1 lg:pb-0 lg:text-left xl:w-[min(34%,26rem)]">
<div>