hotel-manage-stack/hvac
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Kiosk: dashboard-matching state-colour borders, AC top-right + TRV row layout

Browse source 
- kiosk-block border-left now uses the same st-vacant/booked/heating_up/
  occupied/cooling_down colour scheme as the Dashboard's ZoneCard
- Layout tweak (user, 2026-08-26): a room only ever has one AC unit, so
  it's pinned top-right; lower half is a row of up to 3 TRVs with setpoint
  stacked below the icon rather than beside it (more legible at kiosk touch
  size than the dashboard's compact rad-row)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-26 10:57:31 +00:00
parent b6352cf5f7
commit 65d53d1d41
2 changed files with 44 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/index.css
View file

@ -456,15 +456,23 @@ table.data tr:last-child td { border-bottom: none; }
.kiosk-grid-wrap { flex: 1; overflow-y: auto; padding: 16px; }
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
/* One tile per zone, reusing ZoneCard's own rad-row/ac-block/fan-bar classes
(defined above under "Zone grid / cards") so a room's TRV + AC read
identically here and on the Dashboard — just the outer tile is kiosk-sized. */
/* One tile per zone. Border colour = the room's live state, same st-* vars
ZoneCard uses (see "Zone grid / cards" above) — a tile reads the same way
here as on the Dashboard. Top area: zone name + the (at most one) AC block,
pinned top-right via space-between. Bottom half: a row of up to 3 TRVs,
pushed down by the outer flex's space-between — the "lower half" layout
the dashboard's cards don't need since staff view is denser/smaller text. */
.kiosk-block {
position: relative; cursor: pointer; background: var(--card-bg);
border: 1px solid var(--card-border); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 12px; min-height: 96px;
display: flex; flex-direction: column; gap: 8px; user-select: none;
border: 1px solid var(--card-border); border-left: 4px solid var(--st-vacant); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 12px; min-height: 112px;
display: flex; flex-direction: column; justify-content: space-between; gap: 10px; user-select: none;
}
.kiosk-block.st-vacant { border-left-color: var(--st-vacant); }
.kiosk-block.st-booked { border-left-color: var(--st-booked); }
.kiosk-block.st-heating_up { border-left-color: var(--st-heating-up); }
.kiosk-block.st-occupied { border-left-color: var(--st-occupied); }
.kiosk-block.st-cooling_down { border-left-color: var(--st-cooling-down); }
.kiosk-block.selected { outline: 2px solid var(--gold); outline-offset: -2px; }
.kiosk-block-check {
position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 5px;
@ -472,8 +480,12 @@ table.data tr:last-child td { border-bottom: none; }
color: var(--navy); background: var(--card-bg);
}
.kiosk-block.selected .kiosk-block-check { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.kiosk-block-zone { font-size: 13px; font-weight: 700; color: var(--text-dark); padding-right: 22px; }
.kiosk-block-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.kiosk-block-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-right: 24px; }
.kiosk-block-zone { font-size: 13px; font-weight: 700; color: var(--text-dark); }
.kiosk-trv-row { display: flex; gap: 16px; }
.kiosk-trv { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-mid); }
.kiosk-trv.heating { color: var(--danger); }
.kiosk-bulk-bar {
position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;