alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let the weigh-in list fold on its own

Browse Source 
The Weight panel holds three things, and only one of them grows: the latest
figure and the curve stay one screen forever, while the row list gains a line
every weigh-in until it pushes everything else off. Folding the panel to get rid
of it also takes away the two parts worth keeping.

So the fold mechanism now works on any keyed element inside main, not only on a
section, and the list moves into a block that folds by its own h3 while the
panel keeps folding by its h2. The two nest without special handling — separate
keys, and a folded section hides the block along with the rest, so the block's
own state is simply there again when the section reopens.

The CSS generalises from section.collapsible to a class, but scoped to main:
the pedigree tree uses .collapsed for its own branches, and an unscoped
selector would have folded every card in it.
This commit is contained in:
Alexander Heldt
2026-08-31 22:11:27 +00:00
parent 8f9e8783fa
commit 50d0d8a726
4 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+23 -5
View File
@@ -1207,14 +1207,19 @@ button.ex-edit { padding: 6px 12px; flex-shrink: 0; }
.walk-chart { margin-top: 16px; }
/* ---------- collapsible panels ---------- */
section.collapsible > h2 {
/* A panel folds by its own heading: h2 for a whole section, h3 for a block
inside one. Scoped to main on purpose — the pedigree tree uses .collapsed
for its own branches, and a bare selector here would fold those too. */
main .collapsible > h2,
main .collapsible > h3 {
cursor: pointer;
position: relative;
padding-right: 20px;
-webkit-user-select: none;
user-select: none;
}
section.collapsible > h2::after {
main .collapsible > h2::after,
main .collapsible > h3::after {
content: "▾";
position: absolute;
right: 0;
@@ -1224,9 +1229,22 @@ section.collapsible > h2::after {
color: var(--muted);
font-size: 0.85em;
}
section.collapsed > h2::after { transform: translateY(-50%) rotate(-90deg); }
section.collapsed > h2 { margin-bottom: 0; }
section.collapsed > :not(h2) { display: none; }
main .collapsed > h2::after,
main .collapsed > h3::after { transform: translateY(-50%) rotate(-90deg); }
main .collapsed > h2,
main .collapsed > h3 { margin-bottom: 0; }
main .collapsed > :not(h2):not(h3) { display: none; }
/* Sub-heading for a foldable block inside a panel: the section h2's look, a
size down, so it reads as subordinate to it rather than as a second panel. */
.subpanel > h3 {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 0 0 10px;
}
/* ---------- pedigree lookup ---------- */
.pedigree-screen {