dashboard.css + docs: migrate topology indent + icon/pending prose (#712 batch 12)
dashboard.css carried many CSS WHY-blocks duplicating prose already in docs/web-ui.md (after PRs #722/#724/#728/#776). Substantive new migration: topology indent geometry. Remaining cookies collapse to docs pointers. Moved to docs/web-ui.md::Topology tree: - Indent + lane geometry paragraph (~18 lines new prose): per-depth 1.8em ladder rationale + hardcoded six levels + CSS Values 5 attr() partial-support caveat (Chromium-only as of 2026) + lane center continuation bars + bottom: -0.4em prefix extension to merge sibling vertical lines + horizontal stub at icon midline. Collapsed in dashboard.css: - Topology indent block (#363/#361) → 3-line pointer - Tree prefix lanes block (#388) → 3-line pointer - Tree prefix depth-step ladder (~6 lines) → 4-line tighter paraphrase (lane-meets-icon rationale stays inline as it's immediate context for the values below) - Live cards icon-left split (#177/#344) → 6-line tighter paraphrase + docs pointer - Icon selection-toggle hover/focus (#443) → docs pointer - Icon img absolute positioning (#177) → docs pointer - Icon favicon fallback (#195/#202) → docs pointer - Pending state queued vs running (#769) → docs pointer - Icon-only nav strip (#262/#333) → 7-line tighter + docs pointer - Approval requested-at chip (#272) → 2-line pointer - In-flight step indicator (#437) → 4-line pointer - M0V3 affordance (#486) → 3-line pointer - Cancel-X queued (#575) → 5-line pointer dashboard.css: 51 → 36 cookies (counting hex-color false positives; ~15 actual issue refs scrubbed). Net ~50 lines of CSS WHY-prose collapsed to brief docs pointers; ~18 lines of new substantive prose migrated to docs/web-ui.md::Topology tree.
This commit is contained in:
parent
dfbaa2654b
commit
9c72fd369a
2 changed files with 72 additions and 70 deletions
|
|
@ -538,6 +538,26 @@ needed). The joint at the row's own depth column is `├` (more
|
|||
siblings below) or `└` (last sibling at this depth — vertical
|
||||
stops at the row's icon midline).
|
||||
|
||||
**Indent + lane geometry.** Each depth level shifts the row right
|
||||
by `1.8em` (the lane width). The per-depth ladders are hardcoded
|
||||
for six levels — enough for any plausible hive topology, and the
|
||||
typed `attr()` function from CSS Values 5 that would collapse
|
||||
this to one rule is still partial-support (Chromium-only as of
|
||||
2026). The `.tree-prefix` span sits absolutely positioned with
|
||||
`left: -<depth>*1.8em` so its right edge meets the row content
|
||||
(the icon) and its leftmost lane lines up with top-level rows'
|
||||
icons at `x = 0`. Each `.tree-lane` is `flex: 0 0 1.8em` so all
|
||||
lanes have equal width. Continuation bars are drawn at lane
|
||||
center (`left: 0.6em`, `border-left: 1px solid currentColor`,
|
||||
`top: 0; bottom: 0`) and extend through `.containers { gap: 0.4em }`
|
||||
into the next sibling's prefix (`bottom: -0.4em` on the prefix
|
||||
span itself) so adjacent ancestor lines visually merge into one
|
||||
unbroken vertical line. The horizontal stub at a row's own joint
|
||||
lands at the icon midline so the L/T meets the icon edge cleanly.
|
||||
When every container has `parent = null` (pre-topology state) the
|
||||
`[data-depth]` attribute is absent on every row and these rules
|
||||
are no-ops — the layout reads exactly like the legacy flat list.
|
||||
|
||||
### Selection bar
|
||||
|
||||
Per-card action buttons (`R3ST4RT` / `ST0P` / `ST4RT` / `R3BU1LD` /
|
||||
|
|
|
|||
Loading…
Reference in a new issue