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

Fill customer display promo card with cover image, no shadow.
Deploy Ladill POS / deploy (push) Successful in 43s
Details

Browse Source 
Drop the soft shadow and letterboxing so the promo photo edge-to-edge
covers the hero card via object-cover.
This commit is contained in:
isaacclad
2026-07-15 21:31:13 +00:00
parent 72aabf5429
commit 46c60259c9
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pos/customer-display.blade.php
+3 -4
View File
@@ -57,12 +57,11 @@
{{-- Promo with image: large hero + copy (side-by-side on landscape kiosks) --}} {{-- Promo with image: large hero + copy (side-by-side on landscape kiosks) --}}
<div x-show="!!state.promo?.image_url" <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"> 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">
{{-- Flex-sized card; image absolutely centered and scaled to fit (object-contain) --}} {{-- Image fills the card (object-cover), no shadow --}}
<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="relative min-h-0 max-h-[52vh] flex-[1.35] overflow-hidden rounded-[1.75rem] bg-slate-100 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" <img :src="state.promo?.image_url"
:alt="state.promo?.headline || state.location_name || 'Promo'" :alt="state.promo?.headline || state.location_name || 'Promo'"
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)]"> class="absolute inset-0 z-[1] h-full w-full object-cover object-center">
</div> </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 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> <div>