Fix kiosk weekend visibility and landscape weekday layout

The kiosk deliberately ignored calendar.showWeekend when it was built,
treating the parent's toggle as print-only -- but that's not what parents
actually expect: hiding the weekend on the dashboard should hide it on
the tablet too. kiosk.js now toggles weekendWrap's hidden class the same
way the parent editor does.

Separately, weekdayBoard's auto-fit/minmax(240px) grid only fit 4 columns
on real tablet landscape widths (~1024-1180px), pushing Friday to a
second row. Since weekdayBoard always holds exactly 5 day-cards, forcing
repeat(5, 1fr) once there's clearly tablet-landscape width (960px+,
excludes large phones in landscape) fits all 5 comfortably instead of
relying on auto-fit's width heuristic.

Verified both at real tablet landscape sizes (1024x768, 1180x820) with
the Browser tool: 5 weekday columns fit in one row, and the weekend
section correctly appears/disappears with showWeekend.
This commit is contained in:
ort
2026-08-15 17:16:16 -04:00
parent 7faec49a42
commit 962d5bab7f
2 changed files with 14 additions and 0 deletions
+2
View File
@@ -38,6 +38,8 @@ function draw(calendar) {
handlers, handlers,
todayName: todayName(), todayName: todayName(),
}); });
weekendWrap.classList.toggle('hidden', !calendar.showWeekend);
} }
async function poll() { async function poll() {
+12
View File
@@ -19,6 +19,18 @@
.board{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .board{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.task-text{ font-size: 1.02rem; } .task-text{ font-size: 1.02rem; }
/* weekdayBoard always holds exactly 5 day-cards (Mon-Fri) — on a tablet
in landscape there's room for all 5 side by side, but the 240px
auto-fit minimum (sized for narrower/portrait views) was only letting
4 fit, pushing Friday to a second row. Force exactly 5 columns once
there's clearly tablet-landscape width to do it justice; narrower
views keep the auto-fit wrapping behavior above. 960px excludes large
phones in landscape (~926px max) while covering real tablets.
*/
@media (orientation: landscape) and (min-width: 960px) {
.board{ grid-template-columns: repeat(5, 1fr); }
}
/* Full-bleed standalone launch: respect notches/home-indicator, and stop /* Full-bleed standalone launch: respect notches/home-indicator, and stop
iOS's rubber-band overscroll from flashing white space at the edges. */ iOS's rubber-band overscroll from flashing white space at the edges. */
body{ body{