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

Redesign public display for busy queues
Deploy Ladill Queue / deploy (push) Successful in 1m19s
Details

Browse Source 
Use count-aware ticket grids and complete service destinations so active calls stay legible without clipping across TV and mobile layouts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-17 15:06:44 +00:00
co-authored by Cursor
parent 8ff100a55b
commit 9e52ddd1e7
4 changed files with 304 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/qms/display/public.blade.php
+27 -9
View File
@@ -67,20 +67,38 @@
</div>
</header>
<main class="qms-display__main mx-auto w-full max-w-6xl px-5 py-4 lg:px-8 lg:py-5">
<main class="qms-display__main mx-auto w-full px-5 py-4 lg:px-8 lg:py-5">
<section class="flex min-h-0 flex-1 flex-col">
<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__serving-heading">
<div class="flex items-center gap-3">
<span class="qms-display__live-dot h-3 w-3 rounded-full bg-indigo-500" aria-hidden="true"></span>
<h1>Now serving</h1>
</div>
<p x-show="payload?.screen?.branch_name" x-text="payload?.screen?.branch_name"></p>
</div>
<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 lg:rounded-3xl">
<div
class="qms-display__tickets"
x-show="(payload?.now_serving ?? []).length"
:data-ticket-count="Math.min((payload?.now_serving ?? []).length, 12)"
>
<template x-for="(item, index) in (payload?.now_serving ?? [])" :key="item.ticket_number + (item.counter ?? '')">
<article
class="qms-display__ticket rounded-2xl lg:rounded-3xl"
:class="{ 'qms-display__ticket--newest': index === 0 }"
>
<div class="qms-display__ticket-accent" aria-hidden="true"></div>
<div class="qms-display__ticket-body">
<span class="qms-display__label">Ticket</span>
<div class="qms-display__ticket-meta">
<span class="qms-display__badge" x-show="index === 0">Now serving</span>
<span class="qms-display__active-label" x-show="index !== 0">Currently serving</span>
<span class="qms-display__queue-name" x-text="item.queue_name ?? 'Service queue'"></span>
</div>
<p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
<div class="qms-display__ticket-divider" aria-hidden="true"></div>
<span class="qms-display__label">Please proceed to</span>
<p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
<div class="qms-display__destination">
<span>Please proceed to</span>
<p class="qms-display__counter-name" x-text="item.counter ?? 'Await staff direction'"></p>
</div>
</div>
</article>
</template>