isaacclad/ladill-queue
0
0
Fork 0
Code Issues Pull Requests Actions 1 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/css/app.css
+75 -4
View File
@@ -330,23 +330,94 @@ html:has(.qms-display) body {
min-height: 0;
flex: 1;
flex-direction: column;
justify-content: center;
overflow: hidden;
background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
background: #fff;
border: 1px solid rgb(226 232 240);
box-shadow:
0 1px 2px rgb(15 23 42 / 0.04),
0 20px 40px -16px rgb(79 70 229 / 0.15);
0 24px 48px -20px rgb(79 70 229 / 0.18);
}
.qms-display__ticket-accent {
height: 4px;
flex-shrink: 0;
background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
}
.qms-display__ticket-split {
display: grid;
min-height: 0;
flex: 1;
grid-template-columns: 1fr 1fr;
}
.qms-display__ticket-panel {
display: flex;
min-height: 0;
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;
text-align: center;
border-right: 1px solid rgb(241 245 249);
}
.qms-display__ticket-panel--counter {
align-items: flex-start;
justify-content: center;
background: linear-gradient(135deg, rgb(238 242 255) 0%, rgb(224 231 255 / 0.5) 100%);
}
.qms-display__label {
font-size: clamp(0.65rem, 1.6vh, 0.8rem);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgb(100 116 139);
}
.qms-display__ticket-number {
font-size: clamp(2.75rem, 11vh, 6rem);
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;
letter-spacing: -0.02em;
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 {
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
}
.qms-display__live-dot {
animation: qms-display-pulse 2s ease-in-out infinite;
}