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

Kiosk: tile per zone/room, not per device

Browse source 
Correction to the kiosk grid design (user, 2026-08-26): tiles now match the
Dashboard's ZoneCard -- one tile per room showing its TRV and AC together
(reusing ZoneCard's own rad-row/ac-block/fan-bar CSS), not a separate tile
per device. Selection/bulk-edit now operates on selected zones, gathering
every live device across them for KioskBulkPanel's type-aware sections.
Single-zone tap opens a modal listing that zone's device panels, mirroring
ZoneDetailModal's device loop minus the staff-only schedule/override UI.

- KioskZoneBlock.tsx replaces KioskDeviceBlock.tsx
- KioskZonePanel.tsx: new, one control panel per live device in a zone

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-26 10:43:28 +00:00
parent 2bae718b50
commit 930f3d867f
5 changed files with 155 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/index.css
View file

@ -456,13 +456,15 @@ 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. */
.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: 6px; user-select: none;
display: flex; flex-direction: column; gap: 8px; user-select: none;
}
.kiosk-block.on { border-color: var(--app-primary); }
.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;
@ -470,12 +472,8 @@ 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: 12px; font-weight: 700; color: var(--text-dark); padding-right: 22px; }
.kiosk-block-location { font-weight: 500; color: var(--text-mid); }
.kiosk-block-main { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--text-dark); }
.kiosk-block.on .kiosk-block-main { color: var(--app-primary); }
.kiosk-block-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-mid); }
.kiosk-block-fan { margin-left: auto; text-transform: capitalize; }
.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-bulk-bar {
position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;