Interleave the sleep and wake lists, move walks down
Sleep windows and Wake windows were two panels showing two halves of one sequence: a wake window is precisely the gap between two sleeps, so the panels alternated with each other and neither could be read as the day's rhythm on its own. Answering "how long was he up before that nap?" meant looking at one panel, holding a time in your head, and finding it in the other. They are one list now, the two window sets sorted together by start time, which is all the interleaving that alternating-by-construction needs. Each row states whether it is asleep or awake and carries a stripe in its colour, so the alternation reads before the words do, and the row still running keeps the highlight it had. renderWindowList grew the ability for a window to bring its own class and label; the single-kind lists still pass one of each for the whole list and tag only the open row, where "Walking" is news rather than a repeat of the heading it sits under. One rule had to be spelled out: the new per-kind stripe ties on specificity with the generic .ww.ongoing, and being later would have won, leaving an open awake row with a faded edge instead of its full-strength one. The walks group — the panel and both its patterns — moves below "Pees, poos & meals". The three stay together: they were grouped under Walks deliberately, and leaving the patterns behind would strand two walk charts among the sleep ones. Both old panel keys go stale, so anyone who had folded Sleep windows or Wake windows gets the merged panel open, as with any panel that is new to a build.
This commit is contained in:
Alexander Heldt
+47
-48
@@ -218,56 +218,17 @@
|
||||
<p class="muted-note timing-hint" id="timing-hint"></p>
|
||||
</section>
|
||||
|
||||
<section class="sleep" data-panel="sleep-windows">
|
||||
<h2>Sleep windows</h2>
|
||||
<ul id="sleep-list" class="wake-list"></ul>
|
||||
<p id="sleep-empty" class="empty">No sleep windows yet for this day.</p>
|
||||
<!-- Sleep and wake windows are the same boundaries read two ways — a wake
|
||||
window is exactly the gap between two sleeps — so they interleave into
|
||||
one alternating list rather than sitting in two panels that each show
|
||||
half the day. Every row carries its state; the open one keeps the
|
||||
highlight. -->
|
||||
<section class="sleepwake" data-panel="sleep-wake">
|
||||
<h2>Sleep & wake</h2>
|
||||
<ul id="sleep-wake-list" class="wake-list"></ul>
|
||||
<p id="sleep-wake-empty" class="empty">No sleep or wake windows yet for this day.</p>
|
||||
</section>
|
||||
|
||||
<section class="wake" data-panel="wake-windows">
|
||||
<h2>Wake windows</h2>
|
||||
<ul id="wake-list" class="wake-list"></ul>
|
||||
<p id="wake-empty" class="empty">No wake windows yet for this day.</p>
|
||||
</section>
|
||||
|
||||
<section class="walks" data-panel="walks">
|
||||
<h2>Walks <span class="muted-note" id="walk-total"></span></h2>
|
||||
<ul id="walk-list" class="wake-list"></ul>
|
||||
<p id="walk-empty" class="empty">No walks yet for this day. Use 🦮 Walk start / 🏁 Walk end to time one.</p>
|
||||
<!-- Age-based guidance ("the five-minute rule"), only when a birthday
|
||||
is set and the puppy is still growing. -->
|
||||
<p id="walk-goal" class="muted-note" hidden></p>
|
||||
<div class="chart walk-chart" id="walk-chart-wrap" hidden>
|
||||
<div class="chart-title">Minutes per day <span data-chart-days-label>(last 7 days)</span></div>
|
||||
<svg id="chart-walk" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Minutes walked per day"></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The two walk patterns mirror the sleep ones below, drawn from walk
|
||||
windows instead of sleep windows. Both stay hidden until there is a
|
||||
walk to draw, so they cost nothing to anyone not tracking walks. -->
|
||||
<section class="patterns" data-panel="walk-timeline" hidden>
|
||||
<h2><span id="walk-timeline-title">When walking</span> <span class="muted-note" data-chart-days-label>(last 7 days)</span></h2>
|
||||
<svg id="chart-walk-timeline" class="chart-svg" viewBox="0 0 320 125" role="img" aria-label="Walks per day"></svg>
|
||||
<p class="muted-note">Each row is a day, midnight to midnight; shaded = out on a walk. Tap a row to open that day.</p>
|
||||
</section>
|
||||
|
||||
<section class="patterns" data-panel="walk-trend" hidden>
|
||||
<h2>Walk trend</h2>
|
||||
<svg id="chart-walk-trend" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Cumulative minutes walked through the selected day, the day before it, the recent average, and the age-based daily goal"></svg>
|
||||
<div class="legend">
|
||||
<span class="lg wtrend-today"><span class="sw"></span><span id="legend-wtrend-today-text">Today</span></span>
|
||||
<span class="lg wtrend-yesterday" id="legend-wtrend-yesterday"><span class="sw"></span><span id="legend-wtrend-yesterday-text">Yesterday</span></span>
|
||||
<span class="lg wtrend-avg" id="legend-wtrend-avg"><span class="sw"></span><span id="legend-wtrend-avg-text">7-day avg</span></span>
|
||||
<span class="lg wtrend-goal" id="legend-wtrend-goal" hidden><span class="sw"></span><span id="legend-wtrend-goal-text">Goal</span></span>
|
||||
</div>
|
||||
<p class="muted-note">Minutes walked so far at each point of the day, against yesterday and the average over the picked window. The line climbs only while a walk is on, so every step is one walk.</p>
|
||||
</section>
|
||||
|
||||
<!-- The day-window picker lives in this panel but governs every
|
||||
day-window chart on the page — the training grid above, both sleep
|
||||
patterns below, the counts panel and the walk chart — so changing it
|
||||
here changes all of them (see renderChartWindow). -->
|
||||
<section class="patterns" data-panel="sleep-daily">
|
||||
<h2>Sleep <span class="muted-note" data-chart-days-label>(last 7 days)</span></h2>
|
||||
<div class="chart-days-picker" role="group" aria-label="How many days the charts cover">
|
||||
@@ -325,6 +286,44 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="walks" data-panel="walks">
|
||||
<h2>Walks <span class="muted-note" id="walk-total"></span></h2>
|
||||
<ul id="walk-list" class="wake-list"></ul>
|
||||
<p id="walk-empty" class="empty">No walks yet for this day. Use 🦮 Walk start / 🏁 Walk end to time one.</p>
|
||||
<!-- Age-based guidance ("the five-minute rule"), only when a birthday
|
||||
is set and the puppy is still growing. -->
|
||||
<p id="walk-goal" class="muted-note" hidden></p>
|
||||
<div class="chart walk-chart" id="walk-chart-wrap" hidden>
|
||||
<div class="chart-title">Minutes per day <span data-chart-days-label>(last 7 days)</span></div>
|
||||
<svg id="chart-walk" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Minutes walked per day"></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The two walk patterns mirror the sleep ones below, drawn from walk
|
||||
windows instead of sleep windows. Both stay hidden until there is a
|
||||
walk to draw, so they cost nothing to anyone not tracking walks. -->
|
||||
<section class="patterns" data-panel="walk-timeline" hidden>
|
||||
<h2><span id="walk-timeline-title">When walking</span> <span class="muted-note" data-chart-days-label>(last 7 days)</span></h2>
|
||||
<svg id="chart-walk-timeline" class="chart-svg" viewBox="0 0 320 125" role="img" aria-label="Walks per day"></svg>
|
||||
<p class="muted-note">Each row is a day, midnight to midnight; shaded = out on a walk. Tap a row to open that day.</p>
|
||||
</section>
|
||||
|
||||
<section class="patterns" data-panel="walk-trend" hidden>
|
||||
<h2>Walk trend</h2>
|
||||
<svg id="chart-walk-trend" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Cumulative minutes walked through the selected day, the day before it, the recent average, and the age-based daily goal"></svg>
|
||||
<div class="legend">
|
||||
<span class="lg wtrend-today"><span class="sw"></span><span id="legend-wtrend-today-text">Today</span></span>
|
||||
<span class="lg wtrend-yesterday" id="legend-wtrend-yesterday"><span class="sw"></span><span id="legend-wtrend-yesterday-text">Yesterday</span></span>
|
||||
<span class="lg wtrend-avg" id="legend-wtrend-avg"><span class="sw"></span><span id="legend-wtrend-avg-text">7-day avg</span></span>
|
||||
<span class="lg wtrend-goal" id="legend-wtrend-goal" hidden><span class="sw"></span><span id="legend-wtrend-goal-text">Goal</span></span>
|
||||
</div>
|
||||
<p class="muted-note">Minutes walked so far at each point of the day, against yesterday and the average over the picked window. The line climbs only while a walk is on, so every step is one walk.</p>
|
||||
</section>
|
||||
|
||||
<!-- The day-window picker lives in this panel but governs every
|
||||
day-window chart on the page — the training grid above, both sleep
|
||||
patterns below, the counts panel and the walk chart — so changing it
|
||||
here changes all of them (see renderChartWindow). -->
|
||||
<section class="weight" data-panel="weight">
|
||||
<h2>Weight</h2>
|
||||
<div class="weight-summary">
|
||||
|
||||
Reference in New Issue
Block a user