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
+216
-46
@@ -424,6 +424,7 @@ html:has(.qms-display) body {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
max-width: 120rem;
|
||||
}
|
||||
|
||||
.qms-display__footer {
|
||||
@@ -431,14 +432,47 @@ html:has(.qms-display) body {
|
||||
}
|
||||
|
||||
.qms-display__tickets {
|
||||
display: flex;
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
gap: clamp(0.75rem, 1.5vw, 1.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="1"] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="2"],
|
||||
.qms-display__tickets[data-ticket-count="4"] {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.qms-display__serving-heading {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: clamp(0.65rem, 1.6vh, 1.25rem);
|
||||
}
|
||||
|
||||
.qms-display__serving-heading h1 {
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
color: rgb(15 23 42);
|
||||
}
|
||||
|
||||
.qms-display__serving-heading > p {
|
||||
font-size: clamp(0.75rem, 1.2vw, 1rem);
|
||||
font-weight: 600;
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
|
||||
.qms-display__grid-bg {
|
||||
background-image:
|
||||
linear-gradient(rgb(148 163 184 / 0.08) 1px, transparent 1px),
|
||||
@@ -449,76 +483,212 @@ html:has(.qms-display) body {
|
||||
.qms-display__ticket {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
box-shadow:
|
||||
0 1px 2px rgb(15 23 42 / 0.04),
|
||||
0 24px 48px -20px rgb(79 70 229 / 0.18);
|
||||
border: 1px solid rgb(203 213 225);
|
||||
box-shadow: 0 16px 32px -20px rgb(15 23 42 / 0.2);
|
||||
}
|
||||
|
||||
.qms-display__ticket--newest {
|
||||
border-color: rgb(129 140 248);
|
||||
background: linear-gradient(145deg, rgb(238 242 255) 0%, #fff 46%);
|
||||
box-shadow: 0 24px 48px -24px rgb(79 70 229 / 0.45);
|
||||
}
|
||||
|
||||
.qms-display__ticket-accent {
|
||||
height: 4px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
|
||||
background: rgb(203 213 225);
|
||||
}
|
||||
|
||||
.qms-display__ticket--newest .qms-display__ticket-accent {
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, rgb(67 56 202), rgb(124 58 237), rgb(99 102 241));
|
||||
}
|
||||
|
||||
.qms-display__ticket-body {
|
||||
display: flex;
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
padding: clamp(0.9rem, 2.2vh, 1.75rem) clamp(1rem, 2.2vw, 2.25rem);
|
||||
}
|
||||
|
||||
.qms-display__ticket-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: clamp(1.25rem, 4vh, 3rem) clamp(1.5rem, 5vw, 3rem);
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.qms-display__badge,
|
||||
.qms-display__active-label {
|
||||
flex-shrink: 0;
|
||||
border-radius: 9999px;
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: clamp(0.62rem, 0.85vw, 0.78rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.qms-display__badge {
|
||||
background: rgb(67 56 202);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qms-display__active-label {
|
||||
background: rgb(241 245 249);
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
|
||||
.qms-display__queue-name {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
font-size: clamp(0.75rem, 1.2vw, 1.05rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.qms-display__ticket-number {
|
||||
align-self: center;
|
||||
padding: clamp(0.45rem, 1.5vh, 1.25rem) 0;
|
||||
text-align: center;
|
||||
font-size: clamp(3rem, 8vw, 8.5rem);
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.9;
|
||||
color: rgb(30 41 59);
|
||||
}
|
||||
|
||||
.qms-display__ticket--newest .qms-display__ticket-number {
|
||||
color: rgb(67 56 202);
|
||||
}
|
||||
|
||||
.qms-display__destination {
|
||||
min-width: 0;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
padding-top: clamp(0.6rem, 1.4vh, 1rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qms-display__ticket-divider {
|
||||
width: min(8rem, 40%);
|
||||
height: 1px;
|
||||
margin: clamp(1rem, 3vh, 2rem) 0;
|
||||
background: linear-gradient(90deg, transparent, rgb(199 210 254), transparent);
|
||||
}
|
||||
|
||||
.qms-display__label,
|
||||
.qms-display__ticket-number,
|
||||
.qms-display__counter-name {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.qms-display__label {
|
||||
font-size: clamp(0.65rem, 1.6vh, 0.8rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
.qms-display__destination > span {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: clamp(0.65rem, 0.9vw, 0.82rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.15;
|
||||
text-transform: uppercase;
|
||||
color: rgb(100 116 139);
|
||||
}
|
||||
|
||||
.qms-display__ticket-number {
|
||||
margin-top: clamp(0.5rem, 1.5vh, 1rem);
|
||||
font-size: clamp(3rem, 14vh, 7rem);
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
color: rgb(67 56 202);
|
||||
}
|
||||
|
||||
.qms-display__counter-name {
|
||||
margin-top: clamp(0.5rem, 1.5vh, 1rem);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: clamp(1.75rem, 8vh, 4.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: clamp(1.25rem, 2.5vw, 2.75rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
color: rgb(15 23 42);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="1"] .qms-display__ticket-body {
|
||||
padding-inline: clamp(2rem, 8vw, 10rem);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="1"] .qms-display__ticket-number {
|
||||
font-size: clamp(5rem, 18vw, 15rem);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="1"] .qms-display__counter-name {
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="2"] .qms-display__ticket-number {
|
||||
font-size: clamp(4rem, 12vw, 11rem);
|
||||
}
|
||||
|
||||
.qms-display__tickets[data-ticket-count="2"] .qms-display__counter-name {
|
||||
font-size: clamp(1.5rem, 3.5vw, 3.75rem);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html:has(.qms-display),
|
||||
html:has(.qms-display) body {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.qms-display {
|
||||
height: auto;
|
||||
min-height: 100dvh;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.qms-display__tickets,
|
||||
.qms-display__tickets[data-ticket-count] {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-auto-rows: minmax(14rem, auto);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.qms-display__ticket-number,
|
||||
.qms-display__tickets[data-ticket-count="1"] .qms-display__ticket-number,
|
||||
.qms-display__tickets[data-ticket-count="2"] .qms-display__ticket-number {
|
||||
font-size: clamp(4.5rem, 26vw, 8rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-aspect-ratio: 4 / 3) {
|
||||
.qms-display__tickets[data-ticket-count="3"],
|
||||
.qms-display__tickets[data-ticket-count="5"],
|
||||
.qms-display__tickets[data-ticket-count="6"],
|
||||
.qms-display__tickets[data-ticket-count="7"],
|
||||
.qms-display__tickets[data-ticket-count="8"],
|
||||
.qms-display__tickets[data-ticket-count="9"],
|
||||
.qms-display__tickets[data-ticket-count="10"],
|
||||
.qms-display__tickets[data-ticket-count="11"],
|
||||
.qms-display__tickets[data-ticket-count="12"] {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 620px) and (min-width: 768px) {
|
||||
.qms-display__header > div {
|
||||
padding-block: 0.55rem;
|
||||
}
|
||||
|
||||
.qms-display__main {
|
||||
padding-block: 0.6rem;
|
||||
}
|
||||
|
||||
.qms-display__footer {
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
|
||||
.qms-display__ticket-body {
|
||||
padding-block: 0.65rem;
|
||||
}
|
||||
|
||||
.qms-display__ticket-number {
|
||||
font-size: clamp(2.75rem, 12vh, 5rem);
|
||||
}
|
||||
|
||||
.qms-display__counter-name {
|
||||
font-size: clamp(1.1rem, 4vh, 1.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.qms-display__ticket--empty {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user