dispatch fix
This commit is contained in:
255
src/features/store-admin/pages/dispatch.css
Normal file
255
src/features/store-admin/pages/dispatch.css
Normal file
@@ -0,0 +1,255 @@
|
||||
/* ══ Dispatch ══════════════════════════════════════════════════════════════
|
||||
A rail of groups beside the stops of whichever one is open. Built on the
|
||||
console's own tokens — no inherited stylesheet — so the page reads as part of
|
||||
this product rather than a port of another one. */
|
||||
|
||||
/* ── Layout ─────────────────────────────────────────────────────────────── */
|
||||
/* The rail is fixed-width and the stops take the rest: the rail holds short
|
||||
names and counts, and giving it a share of the width would leave it padded
|
||||
while the stop addresses truncate. Stacks below 1000px, rail first — on a
|
||||
phone the question is still "which round", and the answer has to come before
|
||||
the detail. */
|
||||
.dispatch-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.dispatch-body { grid-template-columns: 288px minmax(0, 1fr); }
|
||||
}
|
||||
.dispatch-rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
||||
.dispatch-main { min-width: 0; }
|
||||
|
||||
/* ── The day stepper ────────────────────────────────────────────────────── */
|
||||
/* Arrows rather than a calendar: checking yesterday is one click, and a round
|
||||
belongs to a date rather than to a range. */
|
||||
.day-stepper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.day-stepper button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
padding: 0 6px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: none;
|
||||
color: var(--color-ink-3);
|
||||
cursor: pointer;
|
||||
}
|
||||
.day-stepper button:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-brand); }
|
||||
.day-stepper button:disabled { opacity: .3; cursor: not-allowed; }
|
||||
.day-stepper button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
|
||||
/* The label IS the picker: a transparent date input laid over it, so the day
|
||||
reads as "Sat, Sep 5" and still opens the browser's own calendar on click.
|
||||
`position: relative` here is what the input is positioned against — remove it
|
||||
and the input escapes to the page corner. */
|
||||
.day-label {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
font: 600 13px/1 var(--font-sans);
|
||||
color: var(--color-ink-1);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day-label input {
|
||||
position: absolute;
|
||||
inset: -4px 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
/* Not `display: none` or `visibility: hidden` — either would take the input
|
||||
out of the accessibility tree and off the tab order along with it. */
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Focus is drawn on the label, since the input itself is invisible. */
|
||||
.day-label:focus-within {
|
||||
border-radius: 8px;
|
||||
outline: 2px solid var(--color-brand);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.day-label em {
|
||||
font: 500 10px/1 var(--font-sans);
|
||||
font-style: normal;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.day-today {
|
||||
font: 500 12px/1 var(--font-sans) !important;
|
||||
color: var(--color-brand) !important;
|
||||
}
|
||||
|
||||
/* ── Mode tabs ──────────────────────────────────────────────────────────── */
|
||||
.mode-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
color: var(--color-ink-3);
|
||||
font: 500 13px/1 var(--font-sans);
|
||||
cursor: pointer;
|
||||
transition: background .2s, color .2s;
|
||||
}
|
||||
.mode-tab:hover { background: var(--color-surface-sunken); }
|
||||
.mode-tab[data-active='true'] { background: var(--color-brand-tint); color: var(--color-brand); font-weight: 600; }
|
||||
.mode-tab span {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-surface-sunken);
|
||||
font: 700 11px/18px var(--font-sans);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.mode-tab[data-active='true'] span { background: var(--color-brand); color: #fff; }
|
||||
.mode-tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
|
||||
|
||||
/* ── Group cards ────────────────────────────────────────────────────────── */
|
||||
.group-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.group-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 4px 10px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.group-card:hover { border-color: var(--color-ink-4); }
|
||||
.group-card[data-active='true'] { border-color: var(--color-brand); background: var(--color-brand-tint); }
|
||||
/* Unassigned work is the one group somebody must act on, so it is marked even
|
||||
when it is not the biggest. */
|
||||
.group-card[data-urgent='true'] { border-color: #f0cfcd; }
|
||||
.group-card[data-urgent='true'][data-active='true'] { border-color: var(--color-brand); }
|
||||
.group-card:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
|
||||
|
||||
.group-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||||
.group-name {
|
||||
font: 600 13px/1.3 var(--font-sans);
|
||||
color: var(--color-ink-1);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.group-name em {
|
||||
font: 400 11px/1.3 var(--font-sans);
|
||||
font-style: normal;
|
||||
color: var(--color-ink-3);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.group-count {
|
||||
font: 400 12px/1.3 var(--font-sans);
|
||||
color: var(--color-ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.group-count strong { color: var(--color-ink-1); font-weight: 600; }
|
||||
.group-quiet { font-size: 11.5px; color: var(--color-ink-4); }
|
||||
|
||||
/* Progress as proportion, not as a number to read: one segment per status,
|
||||
width by share. "How far through is this round" at a glance. */
|
||||
.group-bar {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-sunken);
|
||||
}
|
||||
.group-bar i { display: block; height: 100%; }
|
||||
|
||||
/* ── Last-known position ────────────────────────────────────────────────── */
|
||||
/* Deliberately NOT a map pin. A rider's location arrives only when they move a
|
||||
job along — a handful of points per delivery — so it is shown as a
|
||||
coordinate with its age and the status that produced it. A dot on a map would
|
||||
claim a live feed that does not exist. */
|
||||
.last-seen {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 10px;
|
||||
background: var(--color-surface-subtle);
|
||||
}
|
||||
.last-seen svg { color: var(--color-brand); }
|
||||
.last-seen[data-empty='true'] svg { color: var(--color-ink-4); }
|
||||
.last-seen div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||||
.last-seen strong {
|
||||
font: 600 12.5px/1.3 var(--font-sans);
|
||||
color: var(--color-ink-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.last-seen span { font: 400 11.5px/1.35 var(--font-sans); color: var(--color-ink-3); }
|
||||
.last-seen a {
|
||||
font: 500 12px/1 var(--font-sans);
|
||||
color: var(--color-brand);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.last-seen a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── The stops ──────────────────────────────────────────────────────────── */
|
||||
.stops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.stops-table th {
|
||||
text-align: left;
|
||||
padding: 9px 12px;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
font: 600 11.5px/1 var(--font-sans);
|
||||
color: var(--color-ink-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.stops-table td {
|
||||
padding: 9px 12px;
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--color-line) 55%, transparent);
|
||||
vertical-align: top;
|
||||
}
|
||||
.stops-table tbody tr { cursor: pointer; }
|
||||
.stops-table tbody tr:hover { background: var(--color-surface-subtle); }
|
||||
.stops-table tbody tr:last-child td { border-bottom: none; }
|
||||
.stops-table td strong { display: block; font: 600 12.5px/1.3 var(--font-sans); color: var(--color-ink-1); }
|
||||
.stops-table td span {
|
||||
display: block;
|
||||
font: 400 11px/1.3 var(--font-sans);
|
||||
color: var(--color-ink-4);
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.stops-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink-2); }
|
||||
.stops-table .muted { color: var(--color-ink-4); font-style: normal; }
|
||||
|
||||
.stop-status {
|
||||
display: inline-flex;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font: 600 11px/1.5 var(--font-sans);
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in New Issue
Block a user