fix: Linie zum einzigen Kind riss ab (D29-Nachtrag 4)
Der Stiel aus dem Elternknoten sitzt bei 50 % der Gruppe, der Stiel zum
Kind bei `--stem-x` (der gemessenen Knotenmitte, Nachtrag 2). Für
`li:only-child` ist die waagerechte Sammelleiste abgeschaltet — richtig,
solange beide zusammenfallen, und das tun sie nur, solange der Knoten in
seiner Zelle zentriert steht. Bei einer Treppe darunter sind es gemessen
8,5 px Versatz, bei einem `li.has-or` als einzigem Kind 41,8 px.
Jetzt verbindet ein Leiterstück genau zwischen 50 % und `--stem-x` die
beiden — dieselbe L-Form wie bei einem äußeren Kind einer größeren
Gruppe; ohne `--stem-x` ist es 0 px breit und unsichtbar.
Dabei aufgefallen: `:only-child::after{border-left}` stand vor
`:last-child::after{border:0 none}` und war bei gleicher Spezifität seit
jeher wirkungslos. Der ganze Block steht nun dahinter.
Kein Rückschritt von D61 — mit ausgeschaltetem Pfad derselbe Versatz;
die Zugabe steht seither nur in voller Farbe statt blass da. Der
Grafikexport war nie betroffen (die Leiste schließt dort die Elternmitte
ein).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
36b78efa53
commit
a60c466d82
@@ -458,6 +458,13 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
|
||||
der any-of-Teilbaum. `alignStems()` misst deshalb nach jedem `render()` (und
|
||||
in `applyLayout`) die Knotenmitte und setzt `--stem-x`; Fallback im CSS ist
|
||||
`50%`. Messwerte durch `zoom` zurückrechnen, sonst stimmt es nur bei 100 %.
|
||||
**Beim einzigen Kind trägt keine Sammelleiste** (`:only-child` schaltet sie
|
||||
ab): Der Stiel aus dem Elternknoten sitzt bei 50 % der Gruppe, der zum Kind
|
||||
bei `--stem-x` — fallen die auseinander, riss die Linie ab (D29-Nachtrag 4).
|
||||
Die `:only-child`-Regeln ziehen deshalb ein Leiterstück zwischen beide und
|
||||
müssen **hinter** den first/last-Regeln stehen: Ein einziges Kind ist auch
|
||||
das letzte, und bei gleicher Spezifität gewinnt die spätere Regel — genau
|
||||
daran war `:only-child::after` jahrelang wirkungslos.
|
||||
- Kleiner Bildschirm: `body.mobile` (per `matchMedia`, ≤ 640 px) zeigt **genau
|
||||
einen** Bereich — `body.pane-diagram` bzw. `body.pane-text`, umgeschaltet über
|
||||
je einen festen Knopf pro Titelzeile (`#paneToText`/`#paneToDiagram`,
|
||||
|
||||
+22
-3
@@ -1021,13 +1021,32 @@
|
||||
border-top:2px solid var(--line);height:16px;
|
||||
}
|
||||
ul.and>li::after{left:var(--stem-x, 50%);right:0;border-left:2px solid var(--line)}
|
||||
ul.and>li:only-child{padding-top:14px}
|
||||
ul.and>li:only-child::before,ul.and>li:only-child::after{border-top:none}
|
||||
ul.and>li:only-child::after{border-left:2px solid var(--line);height:14px}
|
||||
ul.and>li:first-child::before,
|
||||
ul.and>li:last-child::after{border:0 none}
|
||||
ul.and>li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
|
||||
ul.and>li:first-child::after{border-radius:6px 0 0 0}
|
||||
/* Einziges Kind: Normalerweise fallen der Stiel aus dem Elternknoten
|
||||
(`ul.and::before`, 50 % der Gruppe) und der Stiel zum Kind (`--stem-x`)
|
||||
zusammen — eine gerade Linie, keine Leiste nötig. Steht der Knoten aber
|
||||
nicht mittig in seiner Zelle (`li.has-or`, Treppe — dort misst
|
||||
`alignStems()` die Knotenmitte, D29-Nachtrag 2), liegen die beiden
|
||||
auseinander, und ohne Geschwister gibt es keine Sammelleiste, die sie
|
||||
verbände: die Linie riss ab (gemessen: 8,5 px). Deshalb hier ein kurzes
|
||||
Leiterstück genau zwischen den beiden — dieselbe L-Form, mit der ein
|
||||
äußeres Kind einer größeren Gruppe angeschlossen ist. Ohne `--stem-x` ist
|
||||
es null Pixel breit und damit unsichtbar. Diese Regeln müssen NACH den
|
||||
first/last-Regeln stehen: `li:only-child` ist beides, und bei gleicher
|
||||
Spezifität gewinnt die spätere. */
|
||||
ul.and>li:only-child{padding-top:14px}
|
||||
ul.and>li:only-child::before{
|
||||
border:0 none;border-top:2px solid var(--line);border-radius:0;height:14px;
|
||||
left:min(50%, var(--stem-x, 50%));
|
||||
right:calc(100% - max(50%, var(--stem-x, 50%)));
|
||||
}
|
||||
ul.and>li:only-child::after{
|
||||
border:0 none;border-left:2px solid var(--line);border-radius:0;height:14px;
|
||||
left:var(--stem-x, 50%);right:0;
|
||||
}
|
||||
|
||||
/* --- ANY OF: durchgehend gestrichelte graue Linien (Haupt- + Abzweige) --- */
|
||||
li.has-or{align-items:flex-start}
|
||||
|
||||
Reference in New Issue
Block a user