Replace the date picker with a month grid of our own
The day bar had run out of room: two timers and four day controls came to more than the bar's width on every phone, so it wrapped onto two rows whenever a walk was running. Shaving pixels off both groups was not enough — even the most compact form of it only fitted a 428px iPhone Plus. The way out was structural. The browser's date picker is a sheet that covers the screen, which is backwards here: the reason to change day is to see what the figures did on it, and a modal hides exactly the thing you opened it for. So the date button now opens a small panel under the bar instead — month name with arrows, locale-ordered weekday initials, six rows of days — with the overview still on screen and updating as you move through it. That also solved the width, because Today belongs inside the grid rather than beside it. The day controls drop from about 204px to 111px, which is enough for both timers on one row from 320px up; only a 280px foldable cover still wraps. The bar keeps its wrapping for that case and for large system font sizes. The hidden input stays as the value everything reads — selectedDay() and every caller are untouched, and only the input's own picker is no longer opened. Six rows always, so the panel does not change height from month to month. Future days are disabled, matching the bar's → being disabled on today. The week starts where Intl says it does for the reader's locale, falling back to Monday. Arrow keys walk the grid and pull the neighbouring month into view at the edges. The grid arithmetic is checked rather than eyeballed, both week starts across every month of a year, leap years and year boundaries — including February 2026, which begins on a Sunday and so needs six leading days from January under Monday weeks. That is the case a naive `1 - getDay()` gets wrong, and it would have been invisible until somebody happened to open that month.
This commit is contained in:
@@ -53,14 +53,20 @@ of them, because logging has to be one tap from wherever you are.
|
||||
|
||||
- The day bar carries up to two timers, each of which logs the boundary that
|
||||
ends what it is counting when tapped: the asleep/awake one, and — only while
|
||||
a walk is running — the walk. Two of them no longer fit beside the day
|
||||
controls on a narrow phone, so the bar wraps; the timers and the controls are
|
||||
each a group, so it wraps between them rather than stranding "Today" on a
|
||||
line of its own. The bar's height changes when it does and the tab bar sticks
|
||||
to that height, which is why `--day-bar-h` is kept current by a
|
||||
`ResizeObserver` rather than measured once. The big card on Today shows
|
||||
whichever of the two is the more immediate — the walk, when there is one,
|
||||
since you are necessarily awake on a walk.
|
||||
a walk is running — the walk. They count in minutes; the big card on Today
|
||||
keeps the seconds, and shows whichever of the two is the more immediate — the
|
||||
walk, when there is one, since you are necessarily awake on a walk.
|
||||
- **The day picker is a month grid of the app's own**, not the browser's. The
|
||||
native one is a sheet covering the screen, and the reason to change day is to
|
||||
see what the figures did on it — so this is a small panel under the bar, with
|
||||
the overview still visible and updating as you move. `←` and `→` stay in the
|
||||
bar for the common ±1 day; the grid handles jumps and carries *Today*, which
|
||||
is what freed the width to fit two timers on one row. The hidden
|
||||
`<input type="date">` remains the value everything reads; only its own picker
|
||||
is no longer opened.
|
||||
- The bar can still wrap, and does below about 300px. Its height changes when
|
||||
it does and the tab bar sticks to that height, which is why `--day-bar-h` is
|
||||
kept current by a `ResizeObserver` rather than measured once.
|
||||
- Each tab is a `.tab-panel` wrapper around the existing sections. The
|
||||
**wrapper** is what gets hidden, never the sections: `walk-timeline` and
|
||||
`walk-trend` carry their own `hidden`, set by `renderWalkPatterns` once a walk
|
||||
|
||||
Reference in New Issue
Block a user