From 63c9e79a9d4a0e0f906f8d64d67645d15466ef02 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Tue, 21 Jul 2026 12:30:07 +0200 Subject: [PATCH] =?UTF-8?q?frontend:=20Vertikale=20Ansicht=20=E2=80=94=20A?= =?UTF-8?q?bzweige=20treffen=20die=20Knotenmitte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In der zentrierten vertikalen Darstellung sind all-of-Zwischenknoten selbst vertikal mittig zu ihrem Teilbaum. Der Abzweig war jedoch fest auf 23 px verankert und lief daher bei diesen Knoten ins Leere. Abzweig und die Enden der Sammelleiste zielen für all-of-Kinder nun auf 50 % (Knotenmitte); Blatt- und Any-of-Kinder bleiben bei 23 px. Verifiziert: alle Abzweige treffen ihren Knoten. Co-Authored-By: Claude Opus 4.8 --- frontend/index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 5fc9ba7..85ed812 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -432,10 +432,17 @@ left:0;top:50%;width:9px;height:0; border-left:0;border-top:2px solid var(--line); } - /* Sammelleiste nur von erster bis letzter Kindmitte (23-px-Offset); - mittlere Kinder tragen die volle Höhe (Basis), Rand-Kinder halbieren. */ + /* Abzweig trifft die tatsächliche Knotenmitte des Kindes: + Blatt- und Any-of-Kinder sitzen oben (Offset 23 px), all-of-Zwischenknoten + sind selbst vertikal zentriert (50 %). Ohne diese Unterscheidung liefen die + Linien zu zentrierten Zwischenknoten ins Leere. Die Enden der Sammelleiste + folgen demselben Abzweigpunkt des jeweiligen Rand-Kindes. */ .tree.vertical li.has-and>ul.and>li:first-child::after{top:23px;height:calc(100% - 23px)} .tree.vertical li.has-and>ul.and>li:only-child::after{border:0} + .tree.vertical li.has-and>ul.and>li.has-and::before{top:50%} + .tree.vertical li.has-and>ul.and>li.has-and:first-child::after{top:50%;height:50%} + .tree.vertical li.has-and>ul.and>li.has-and:last-child::after{top:0;height:50%} + .tree.vertical li.has-and>ul.and>li.has-and:only-child::after{border:0} /* Kompakt: auch All-of läuft nach unten (spart Breite) — kein Rechts-Fächer. Die graue, gestrichelte Any-of-Führung kommt aus der Basis und gilt hier