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

Redesign customer display idle promo as a hero layout.
Deploy Ladill POS / deploy (push) Successful in 1m5s
Details

Browse Source 
Make the promo image fill the kiosk instead of a small thumbnail, with
side-by-side copy on landscape screens and a calmer type hierarchy.
This commit is contained in:
isaacclad
2026-07-15 21:19:33 +00:00
parent e5b4f3d654
commit 7d1e4a65d7
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pos/customer-display.blade.php
+34 -14
View File
@@ -51,23 +51,43 @@
</header>
<main class="relative flex flex-1 flex-col overflow-hidden">
{{-- IDLE / PROMO --}}
{{-- IDLE / PROMO — hero image when set; otherwise centered welcome --}}
<section x-show="isPhase('idle') || isPhase('promo')" x-cloak
class="flex flex-1 flex-col items-center justify-center gap-6 px-8 text-center">
<template x-if="state.promo?.image_url">
<div class="flex items-center justify-center overflow-hidden rounded-3xl bg-white px-6 py-5 shadow-sm ring-1 ring-slate-200/80 sm:px-8 sm:py-6">
<img :src="state.promo.image_url"
alt=""
class="h-28 w-auto max-h-40 max-w-[min(90vw,360px)] object-contain sm:h-36 sm:max-h-44 sm:max-w-[420px]">
class="flex min-h-0 flex-1 flex-col overflow-hidden">
{{-- 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">
<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">
</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>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Welcome</p>
<h1 class="mt-2 text-balance text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-[2.25rem] lg:leading-[1.15]"
x-text="state.promo?.headline || state.location_name"></h1>
<p class="mx-auto mt-3 max-w-md text-pretty text-base leading-relaxed text-slate-500 lg:mx-0 lg:text-lg"
x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
</div>
<div class="mx-auto h-px w-12 bg-slate-200/90 lg:mx-0" aria-hidden="true"></div>
<p class="text-sm text-slate-400">Your order will appear here</p>
</div>
</template>
<div class="max-w-xl">
<p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Welcome</p>
<h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl"
x-text="state.promo?.headline || state.location_name"></h1>
<p class="mx-auto mt-4 text-lg text-slate-500" x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
</div>
<p class="text-sm text-slate-400">Your order will appear here</p>
{{-- No promo image: centered welcome --}}
<div x-show="!state.promo?.image_url"
class="flex flex-1 flex-col items-center justify-center gap-6 px-8 text-center">
<div class="max-w-xl">
<p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Welcome</p>
<h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl"
x-text="state.promo?.headline || state.location_name"></h1>
<p class="mx-auto mt-4 text-lg text-slate-500"
x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
</div>
<p class="text-sm text-slate-400">Your order will appear here</p>
</div>
</section>
{{-- CART + payment / tip / signature --}}