Simplify now-serving card to a single centered column.
Deploy Ladill Queue / deploy (push) Successful in 33s
Deploy Ladill Queue / deploy (push) Successful in 33s
Remove counter arrow line and stack ticket number above desk name with clean alignment. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+9
-28
@@ -345,31 +345,22 @@ html:has(.qms-display) body {
|
|||||||
background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
|
background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
|
||||||
}
|
}
|
||||||
|
|
||||||
.qms-display__ticket-split {
|
.qms-display__ticket-body {
|
||||||
display: grid;
|
|
||||||
min-height: 0;
|
|
||||||
flex: 1;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qms-display__ticket-panel {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
|
||||||
padding: clamp(1rem, 3vh, 2.5rem) clamp(1.25rem, 4vw, 3rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.qms-display__ticket-panel--number {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: clamp(1.25rem, 4vh, 3rem) clamp(1.5rem, 5vw, 3rem);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-right: 1px solid rgb(241 245 249);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.qms-display__ticket-panel--counter {
|
.qms-display__ticket-divider {
|
||||||
align-items: flex-start;
|
width: min(8rem, 40%);
|
||||||
justify-content: center;
|
height: 1px;
|
||||||
background: linear-gradient(135deg, rgb(238 242 255) 0%, rgb(224 231 255 / 0.5) 100%);
|
margin: clamp(1rem, 3vh, 2rem) 0;
|
||||||
|
background: linear-gradient(90deg, transparent, rgb(199 210 254), transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.qms-display__label {
|
.qms-display__label {
|
||||||
@@ -402,16 +393,6 @@ html:has(.qms-display) body {
|
|||||||
color: rgb(15 23 42);
|
color: rgb(15 23 42);
|
||||||
}
|
}
|
||||||
|
|
||||||
.qms-display__counter-arrow {
|
|
||||||
display: flex;
|
|
||||||
margin-top: clamp(0.75rem, 2vh, 1.25rem);
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: clamp(0.7rem, 1.5vh, 0.875rem);
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(79 70 229);
|
|
||||||
}
|
|
||||||
|
|
||||||
.qms-display__ticket--empty {
|
.qms-display__ticket--empty {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -75,21 +75,12 @@
|
|||||||
<template x-for="item in (payload?.now_serving ?? []).slice(0, 3)" :key="item.ticket_number + (item.counter ?? '')">
|
<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">
|
<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-accent" aria-hidden="true"></div>
|
||||||
<div class="qms-display__ticket-split">
|
<div class="qms-display__ticket-body">
|
||||||
<div class="qms-display__ticket-panel qms-display__ticket-panel--number">
|
<span class="qms-display__label">Ticket</span>
|
||||||
<span class="qms-display__label">Ticket</span>
|
<p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
|
||||||
<p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
|
<div class="qms-display__ticket-divider" aria-hidden="true"></div>
|
||||||
</div>
|
<span class="qms-display__label">Please proceed to</span>
|
||||||
<div class="qms-display__ticket-panel qms-display__ticket-panel--counter">
|
<p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
|
||||||
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user