/** * idf-list-tree.css — die Baum-Linien hierarchischer Listen (#701) * * v0.2.0 (Issue 773): zweiter Wirt, die Relation-Liste des Standard-Artefakts * (.idf-sa-relation-list). Dieselben Klassen und Werte, nur an der anderen * Zeilen-Struktur - siehe Abschnitt am Dateiende. * * DIE EINE STELLE, an der steht, wie ein Hierarchie-Indikator aussieht. * Vorher hatte jedes Modul seine eigene Kopie (`al-`, `pp-`, `cp-`, `hilfe-`), * und die vier liefen auseinander: zwei Strichstärken, zwei Farben, zwei * Einrückungen, zwei Span-Breiten. Das hat Joerg dreimal aufgemacht, bis klar * war, dass nicht die Werte das Problem sind, sondern die vier Kopien * (23.08.2026: „Alle Indikatoren gleich und als shared. Ich möchte nicht jedes * mal neu thematisieren, wie Linien aussehen sollen."). * * Wer die Optik ändern will, ändert DIESE Datei. Ein Modul, das hier etwas * überschreibt, macht den Baustein wieder kaputt. * * Was ein Modul beisteuert * ------------------------ * 1. `.idf-tree-cell` an der Titel-Zelle (die Zelle, in der der Baum steht). * 2. `.idf-tree-connector` als ERSTES Kind dieser Zelle, ab Ebene 1. * Genau dort hängt `IDF.listTree.attachIndent` ihn beim Einrücken auch * selbst ein — eine andere Position hieße zwei Geometrien in einer Liste. * 3. Die Zelle muss eine ZEILE sein (Connector neben dem Inhalt). Bei zwei * Textzeilen gehört der Text in einen eigenen Stapel; die Shared-Klasse * `idf-list-cell-two-line` macht die ganze Zelle zur Spalte und passt * deshalb NICHT. * * Die Ebenen-Klassen `idf-tree-l1` / `idf-tree-l2` setzt * `IDF.listTree.refreshIsLastSub` selbst — nach jedem Render und nach jedem * Einrücken. Das Modul behält seine eigenen Level-Klassen als JS-Haken. * * Voraussetzung: `idf-tokens.css` (liefert `--tree-line`). */ /* === Einrückung ============================================================ 22 px je Ebene. Der Titel der obersten Ebene sitzt bei 12 px (Zell-Padding aus dem Listen-Grid), der Connector einer Ebene-1-Zeile damit bei x = 22. Joerg-Entscheid 2026-05-06 nach mehreren Runden — 80/160 wirkten zu weit nach rechts geschoben. **Bestätigt am 23.08.2026 als der Wert für ALLE Apps.** Checklisten stand bis dahin auf 36/60 und ist mit dem Umzug hierher gezogen; Joerg hat nachgefragt, warum dort weniger eingerückt wird, und danach 22/44 gewählt. Die Arithmetik dahinter, falls es wieder aufkommt: der Text steht immer `padding-left + Connector-Breite` vom Zellenrand entfernt. Mit 22/44 und 12 px Connector sind das 12 → 34 → 56, also gleichmäßig +22 je Ebene. Die alten Checklisten-Werte (36/60 bei 16 px Connector) ergaben 12 → 52 → 76, also +40 und dann +24: die Ebenen waren dort nicht gleich weit auseinander. Wer diese Zahlen ändert, ändert sie hier und für alle vier Apps zugleich. */ /* SPEZIFITÄT, und zwar zwingend so: das Listen-Grid setzt `padding` und `overflow: hidden` auf `.idf-list-rows .idf-list-row .idf-list-grid > div` — das sind drei Klassen und ein Element (0,3,1). Eine Regel mit weniger Gewicht verliert, ohne dass irgendwo etwas rot wird; sie steht einfach da und wirkt nicht. Genau deshalb waren die alten Modul-Regeln so lang geschachtelt (`.al-rows .al-row.al-level-1 .al-grid > div.al-cell-titel`). Vier Klassen schlagen (0,3,1), ohne dass dieser Baustein eine einzige Modul-Klasse kennen muss. Die vier Konsumenten tragen `idf-list-rows`, `idf-list-row` und `idf-list-grid` alle — das ist der Listen-Standard. */ .idf-list-rows .idf-list-row .idf-list-grid > .idf-tree-cell { position: relative; /* Der Connector ragt absichtlich über die Zell-Innenabstände hinaus, damit die Linien benachbarter Geschwister sich über dem Zeilen-Rahmen treffen und als durchgehendes ├ … ├ … └ erscheinen. Mit dem `overflow: hidden` aus dem Listen-Grid-Default wäre jede Linie am Zellrand abgeschnitten. Der Titel-Text clippt sich selbst, die Ellipse bleibt also. */ overflow: visible; } .idf-list-rows .idf-list-row.idf-tree-l1 .idf-list-grid > .idf-tree-cell { padding-left: 22px; } .idf-list-rows .idf-list-row.idf-tree-l2 .idf-list-grid > .idf-tree-cell { padding-left: 44px; } /* === Der Connector-Span ==================================================== 12 px breit, über die volle Höhe des Zell-Inhalts (`align-self: stretch`). Senkrechte als border-left auf ::before, waagerechtes Häkchen als ::after. */ .idf-tree-connector { position: relative; align-self: stretch; flex: 0 0 12px; width: 12px; pointer-events: none; } .idf-tree-connector::before { content: ''; position: absolute; left: 0; /* 13 px Überstand: 12 px Zell-Padding plus der 1 px Zeilen-Rahmen. Damit berühren sich die Linien zweier untereinander stehender Geschwister genau auf dem Rahmen und ergeben eine durchgehende Linie. */ top: -13px; bottom: -13px; width: 0; border-left: 1px solid var(--tree-line, #999999); } /* └ — letztes Kind einer Gruppe: die Senkrechte endet auf halber Höhe. */ .idf-list-row.is-last-sub .idf-tree-connector::before { bottom: 50%; } /* Das waagerechte Häkchen, auf halber Höhe bis zum Ende des Connectors. */ .idf-tree-connector::after { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 0; border-top: 1px solid var(--tree-line, #999999); } /* === Durchlaufende Linie der Ebene DARÜBER ================================= Der Connector zeichnet nur das Häkchen seiner eigenen Ebene. Liegt ein Enkel zwischen zwei Kindern derselben Gruppe, riss deren Linie ab und das obere Kind hing offen in der Luft: ├─ Test 1 └─ Test 2 <- hier fehlte die Ebene-1-Linie └─ Test 3 `has-trunk-1` setzt `refreshIsLastSub` genau dann, wenn weiter unten noch eine Ebene-1-Zeile derselben Gruppe folgt. Die x-Position ist die Einrückung der Ebene 1, damit die Linie exakt auf der des Connectors einer Ebene-1-Zeile liegt. */ .idf-list-rows .idf-list-row.has-trunk-1 .idf-list-grid > .idf-tree-cell::before { content: ''; position: absolute; left: 22px; top: -13px; bottom: -13px; width: 0; border-left: 1px solid var(--tree-line, #999999); pointer-events: none; } /* === Schmal ================================================================ Unter 1100 px trägt die Einrückung nicht mehr, und eine Linie, die auf eine Einrückung zeigt, die es nicht gibt, zeigt auf nichts. Beide Hälften weg — nur den Span zu verstecken ließe die durchlaufende Linie der Zelle stehen. */ @media (max-width: 1100px) { /* Auf die Listen-Engine begrenzt (Issue 773). Der zweite Wirt weiter unten, die Relation-Liste, steht in einem Dialog: dessen Breite haengt nicht an der des Fensters, und eine Unterzeile ohne Linie waere dort von ihrer Mutter nicht zu unterscheiden. */ .idf-list-rows .idf-tree-connector { display: none; } .idf-list-rows .idf-list-row.has-trunk-1 .idf-list-grid > .idf-tree-cell::before { display: none; } } /* === Zweiter Wirt: die Relation-Liste (Issue 773) ========================== Dieselben Klassen, dieselben 22 px, dieselbe Linie - nur an der anderen Zeilen-Struktur. Die Regeln oben haengen an `.idf-list-rows .idf-list-row .idf-list-grid` (Listen-Engine); eine Relation-Liste im Standard-Artefakt hat davon nichts und bekaeme sonst gar keinen Indikator. Ein Modul, das sich dafuer eigene Linien baut, macht den Baustein wieder kaputt - genau das war der Anlass von Issue 701. Erster Konsument: der Zeiten-Reiter der Aufgabe, wo die Buchungen als Unterzeile unter ihrer Person haengen. Der Ueberstand des Connectors (13 px, oben definiert) passt hier ohne zweite Zahl: zwischen zwei Zeilen liegen 10 px Zell-Padding, 4 px Listen-Gap und nochmal 10 px, also 24 px - zwei Ueberstaende decken sie mit 1 px Ueberlappung ab und ergeben eine durchgehende Linie. */ .idf-sa-relation-list .idf-sa-relation-item > .idf-tree-cell { position: relative; /* Wie oben: der Connector ragt ueber die Zellgrenze hinaus, damit sich die Linien benachbarter Geschwister treffen. */ overflow: visible; /* Der Connector ist das erste Kind IN der Zelle und steht neben dem Inhalt - die Zelle ist deshalb eine Zeile, kein Stapel. */ display: flex; align-items: center; gap: var(--space-2, 8px); min-width: 0; } .idf-sa-relation-list .idf-sa-relation-item.idf-tree-l1 > .idf-tree-cell { padding-left: 22px; } .idf-sa-relation-list .idf-sa-relation-item.idf-tree-l2 > .idf-tree-cell { padding-left: 44px; } .idf-sa-relation-list .idf-sa-relation-item.is-last-sub .idf-tree-connector::before { bottom: 50%; }