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:
@@ -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() {
|
||||||
|
|||||||
@@ -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{
|
||||||
|
|||||||
Reference in New Issue
Block a user