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

Redesign now-serving card with split ticket and counter panels.
Deploy Ladill Queue / deploy (push) Successful in 29s
Details

Browse Source 
Replace the small pill with a two-column layout, accent bar, and prominent counter name for waiting-area displays.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 23:11:06 +00:00
co-authored by Cursor
parent ad615325b6
commit 7e3e9fba6b
2 changed files with 95 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/qms/display/public.blade.php
+20 -12
View File
@@ -71,28 +71,36 @@
</div>
</header>
<main class="qms-display__main mx-auto w-full max-w-6xl px-5 py-4 lg:px-8 lg:py-6">
<main class="qms-display__main mx-auto w-full max-w-6xl px-5 py-4 lg:px-8 lg:py-5">
<section class="flex min-h-0 flex-1 flex-col">
<div class="mb-3 shrink-0 text-center">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600">Now serving</p>
<p class="mt-1 text-sm text-slate-500">Please proceed to your counter when your number appears</p>
</div>
<p class="mb-3 shrink-0 text-center text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600">Now serving</p>
<div class="qms-display__tickets" x-show="(payload?.now_serving ?? []).length">
<template x-for="item in (payload?.now_serving ?? []).slice(0, 3)" :key="item.ticket_number + (item.counter ?? '')">
<article class="qms-display__ticket rounded-2xl px-6 py-4 text-center lg:rounded-3xl lg:px-8">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Ticket number</p>
<p class="qms-display__ticket-number mt-2 font-bold" x-text="item.ticket_number"></p>
<div class="mt-4 inline-flex max-w-full items-center gap-2 rounded-full border border-indigo-100 bg-indigo-50 px-4 py-2">
<span class="text-xs font-semibold uppercase tracking-widest text-indigo-600">Proceed to</span>
<span class="truncate text-lg font-semibold text-indigo-900 lg:text-xl" x-text="item.counter ?? '—'"></span>
<article class="qms-display__ticket rounded-2xl lg:rounded-3xl">
<div class="qms-display__ticket-accent" aria-hidden="true"></div>
<div class="qms-display__ticket-split">
<div class="qms-display__ticket-panel qms-display__ticket-panel--number">
<span class="qms-display__label">Ticket</span>
<p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
</div>
<div class="qms-display__ticket-panel qms-display__ticket-panel--counter">
<span class="qms-display__label">Please proceed to</span>
<p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
<div class="qms-display__counter-arrow">
<svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
</svg>
<span>Your counter is ready</span>
</div>
</div>
</div>
</article>
</template>
</div>
<div
class="qms-display__ticket flex min-h-0 flex-1 flex-col items-center justify-center rounded-2xl px-6 py-8 text-center lg:rounded-3xl"
class="qms-display__ticket qms-display__ticket--empty flex min-h-0 flex-1 flex-col rounded-2xl px-6 py-8 lg:rounded-3xl"
x-show="!(payload?.now_serving ?? []).length"
>
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 ring-1 ring-slate-200 lg:h-14 lg:w-14">