Make the weather strip and stat tiles shorter
All checks were successful
Build and push image / build (push) Successful in 13s
All checks were successful
Build and push image / build (push) Successful in 13s
The wallboard is already scaled, so both were taking height from the technician table. The weather strip puts the temperature and conditions on one line, the details in two columns, and each forecast day's icon beside its temperatures. Stat tiles show the number with its note on one line, with tighter padding, and "Unassigned requests" becomes "Unassigned" so every label fits on one line. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
7141a689b4
commit
b1171aa398
@ -238,36 +238,44 @@ button.quiet:disabled { opacity: 0.5; cursor: default; }
|
||||
/* tiles share rows, so a label that wraps beside the table keeps every number on one line */
|
||||
.stats .stat {
|
||||
display: grid;
|
||||
grid-row: span 3;
|
||||
grid-row: span 2;
|
||||
grid-template-rows: subgrid;
|
||||
row-gap: 0;
|
||||
align-content: start;
|
||||
}
|
||||
.stats .stat .label { align-self: end; }
|
||||
|
||||
/* kept short so the table below gets the height: label, then the number with its note beside it */
|
||||
.stat {
|
||||
padding: 16px 18px;
|
||||
padding: 10px 14px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
.stat .label {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.stat .reading {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.stat .value {
|
||||
margin-top: 4px;
|
||||
flex: none;
|
||||
font-family: var(--mono);
|
||||
font-size: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
line-height: 1.15;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat.accent .value { color: var(--signal); }
|
||||
.stat .sub {
|
||||
margin-top: 4px;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
@ -507,16 +515,17 @@ body > footer .meta:empty { display: none; }
|
||||
}
|
||||
.weather-empty { grid-column: 1 / -1; padding: 18px; color: var(--muted); }
|
||||
|
||||
/* kept short so the board below gets the height */
|
||||
.weather-now {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 22px 10px 8px;
|
||||
gap: 6px;
|
||||
padding: 6px 20px 6px 8px;
|
||||
}
|
||||
.weather-now img { width: 84px; height: 84px; margin: -6px 0; }
|
||||
.weather-now img { width: 56px; height: 56px; margin: -4px 0; }
|
||||
.weather-place {
|
||||
margin: 0 0 4px;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.weather-place .note {
|
||||
@ -526,19 +535,22 @@ body > footer .meta:empty { display: none; }
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
}
|
||||
.weather-reading { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
|
||||
.weather-temp {
|
||||
font-family: var(--mono);
|
||||
font-size: 38px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.weather-desc { margin-top: 4px; font-size: 14px; text-transform: capitalize; }
|
||||
.weather-desc { font-size: 14px; text-transform: capitalize; }
|
||||
/* two by two, so the details take two lines instead of four */
|
||||
.weather-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 10px 22px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-content: center;
|
||||
justify-content: start;
|
||||
gap: 2px 18px;
|
||||
padding: 6px 20px;
|
||||
border-left: 1px solid var(--rule);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
@ -553,16 +565,21 @@ body > footer .meta:empty { display: none; }
|
||||
border-left: 1px solid var(--rule);
|
||||
}
|
||||
.forecast-day {
|
||||
padding: 10px 4px 12px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6px 4px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.forecast-day + .forecast-day { border-left: 1px solid color-mix(in oklab, var(--rule), transparent 50%); }
|
||||
.forecast-day .name { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.forecast-day img { display: block; width: 44px; height: 44px; margin: 0 auto; }
|
||||
/* icon beside the temperatures rather than above them */
|
||||
.forecast-day .day-line { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
|
||||
.forecast-day img { width: 32px; height: 32px; margin: -4px 0; }
|
||||
.forecast-day .lo { color: var(--muted); }
|
||||
.forecast-day .pop { margin-top: 2px; font-size: 12px; color: var(--rain); }
|
||||
.forecast-day .pop { color: var(--rain); }
|
||||
|
||||
/* ---- temporary: unassigned verification list (not for prod) ---- */
|
||||
|
||||
@ -713,7 +730,7 @@ button:disabled { opacity: 0.5; cursor: default; }
|
||||
.wrap { padding: 20px 16px 40px; }
|
||||
body > footer { padding: 0 16px 24px; }
|
||||
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.stat .value { font-size: 24px; }
|
||||
.stat .value { font-size: 22px; }
|
||||
.actions { margin-left: 0; width: 100%; }
|
||||
th, td { padding: 8px 10px; }
|
||||
}
|
||||
@ -1018,15 +1035,14 @@ function renderStats(wl) {
|
||||
|
||||
const tile = (label, value, sub, accent) => `<div class="stat${accent ? ' accent' : ''}">
|
||||
<div class="label">${esc(label)}</div>
|
||||
<div class="value">${esc(value)}</div>
|
||||
<div class="sub">${esc(sub || ' ')}</div>
|
||||
<div class="reading"><span class="value">${esc(value)}</span><span class="sub">${esc(sub || ' ')}</span></div>
|
||||
</div>`;
|
||||
|
||||
const un = data.unassigned || {};
|
||||
const unLoaded = !!un.updatedAt && !un.error;
|
||||
|
||||
return '<div class="stats">'
|
||||
+ tile('Unassigned requests', unLoaded ? un.count : '–', unLoaded ? 'checked ' + clockTime(un.updatedAt) + (un.truncated ? ', partial' : '') : '')
|
||||
+ tile('Unassigned', unLoaded ? un.count : '–', unLoaded ? 'checked ' + clockTime(un.updatedAt) + (un.truncated ? ', partial' : '') : '')
|
||||
+ tile('Open requests', loaded ? open : '–', top ? top.total + ' ' + top.name : '')
|
||||
+ tile('Closed today', loaded ? closedToday : '–', 'since midnight', true)
|
||||
+ tile('Closed last hour', lastHour, data.tickets[0] ? 'latest #' + data.tickets[0].id : 'none yet', true)
|
||||
@ -1139,9 +1155,10 @@ function renderWeather() {
|
||||
const today = new Date().toLocaleDateString('en-CA'); // YYYY-MM-DD in local time
|
||||
const days = (weather.forecast || []).map(d => `<div class="forecast-day">
|
||||
<div class="name">${d.date === today ? 'Today' : new Date(d.date + 'T12:00').toLocaleDateString([], { weekday: 'short' })}</div>
|
||||
${d.icon ? `<img src="${iconUrl(d.icon, 2)}" alt="${esc(d.condition || '')}">` : ''}
|
||||
<div>${d.high}° <span class="lo">${d.low}°</span></div>
|
||||
<div class="pop">${d.pop >= 20 ? d.pop + '%' : ' '}</div>
|
||||
<div class="day-line">
|
||||
${d.icon ? `<img src="${iconUrl(d.icon, 2)}" alt="${esc(d.condition || '')}">` : ''}
|
||||
<span>${d.high}° <span class="lo">${d.low}°</span>${d.pop >= 20 ? ` <span class="pop">${d.pop}%</span>` : ''}</span>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
|
||||
const note = (weather.error ? 'stale · ' : '') + 'as of ' + clockTime(weather.updatedAt);
|
||||
@ -1151,8 +1168,10 @@ function renderWeather() {
|
||||
${weather.icon ? `<img src="${iconUrl(weather.icon, 4)}" alt="">` : '<span></span>'}
|
||||
<div>
|
||||
<h2 class="weather-place">${esc(weather.place || 'Weather')} <span class="note">${esc(note)}</span></h2>
|
||||
<div class="weather-temp">${weather.temp}°F</div>
|
||||
<div class="weather-desc">${esc(weather.description || weather.condition || '')}</div>
|
||||
<div class="weather-reading">
|
||||
<span class="weather-temp">${weather.temp}°F</span>
|
||||
<span class="weather-desc">${esc(weather.description || weather.condition || '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user