Split the page into five tabs
Fourteen panels sat in one column, so reaching the weight curve meant scrolling past sleep, timing, walks and counts. The page had only grown — walks, walk patterns, training and the excluded-day marker all landed on the same scroll — and folding panels away, while it helps, is a per-panel fiddle you then have to undo to look at anything. They are grouped by subject now: Today (overview, sleep & wake, history), Sleep, Walks, Habits (pee/poo/meal timing and counts) and Growth (weight, training, notes). No tab holds more than three. The day bar and the log buttons stay above them on every tab, because logging has to be one tap from wherever you are, and the tab bar sticks under the day bar — two stacked stickies need the second's offset to be the first's height, so that height is measured and published as --day-bar-h rather than guessed. What gets hidden is the wrapper, never the sections inside it. walk-timeline and walk-trend carry their own hidden, set by renderWalkPatterns once a walk exists, and hiding them directly would clobber it. render() still draws every panel on every pass, hidden tabs included. Nothing measures layout — the charts scale through their viewBox, and the one getBoundingClientRect belongs to the timer pill — so drawing into a hidden wrapper is safe, and a tab is never briefly stale when you arrive on it. That pill's own check gains an explicit "is the card's tab showing": a hidden element measures as zeroes, which gave the right answer here by coincidence rather than by rule. Back returns to Today from any tab in one press, and a second press leaves. Exactly one history entry is ever live, armed on leaving Today and spent on returning — including when the return is a tap on the Today tab, which would otherwise strand the entry and make the next press appear to do nothing. An entry per switch is what a browser does unaided, and is why tabbed apps get a reputation for trapping you. Folding is untouched and composes: tabs group, folding tunes what shows within a group. Both selectors that reach for panels are descendant selectors, so the extra nesting cost them nothing. The reordering was scripted rather than done by hand — fourteen sections moving between five wrappers is how you silently lose one — and a check now asserts every panel sits in exactly one tab, that buttons and wrappers correspond, and that the aria pairs are wired. The first run of that script dropped three explanatory comments along the way, which is exactly the sort of thing it exists to catch.
This commit is contained in:
@@ -43,6 +43,33 @@ source-of-truth and sync between devices.
|
||||
A status pill in the header shows `syncing…` / `synced 2m ago` / `pending` /
|
||||
`sync error` / `offline`. Tap it to force-sync.
|
||||
|
||||
## On screen
|
||||
|
||||
The panels are grouped into five tabs — **Today**, **Sleep**, **Walks**,
|
||||
**Habits** (pee/poo/meal timing and counts) and **Growth** (weight, training,
|
||||
notes) — so each screen holds one subject instead of all fourteen panels in one
|
||||
column. The day bar and the log buttons sit above the tabs and stay put on all
|
||||
of them, because logging has to be one tap from wherever you are.
|
||||
|
||||
- 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
|
||||
exists, and hiding them directly would clobber it.
|
||||
- `render()` still draws every panel on every pass, including the tabs you
|
||||
can't see. Nothing measures layout — the charts scale through their `viewBox`
|
||||
— so drawing into a hidden wrapper is safe, and it means a tab is never
|
||||
briefly stale when you arrive on it.
|
||||
- Tapping a panel's heading still folds it away, remembered across reloads, and
|
||||
composes with tabs: tabs group, folding tunes what shows within a group. The
|
||||
chosen tab is remembered the same way (device-global, like the theme).
|
||||
- **Back returns to Today**, from any tab, in one press; a second press leaves
|
||||
the app. Exactly one history entry is ever live — armed on leaving Today and
|
||||
spent on returning, whether that return came from the back button or from
|
||||
tapping the tab. An entry per switch is what a browser does unaided, and is
|
||||
why tabbed apps get a reputation for trapping you: flick between tabs fifteen
|
||||
times and it takes fifteen presses to escape. Two presses, always, from
|
||||
anywhere.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user