mhoennigandClaude Opus 4.8
506bdccd2e
Auf kleinem Bildschirm (body.mobile per matchMedia, <=640px): - Immer nur ein Bereich gross (Diagramm ODER Editor); der andere schrumpft auf seine Titelzeile und dient als Umschalter (Antippen holt ihn nach vorn). Splitter und Min/Normal/Max-Buttons entfallen. - Legende von der Bereichs-Umschaltung entkoppelt: eigener Umschalter (#legendBtn) im Editor-Kopf statt der dauerhaften "AGENDA"-Zeile, damit sie zugeklappt keinen Platz kostet (neuer i18n-Key legendTooltip, 9 Spr.). - Sprachwahl schlank: nur EN + aktive Sprache + "…" (klappt alle auf); die aktive Sprache wird auch als "extra" eingeblendet, Auto-Aufklappen entfaellt. - Default Vollbild auf Mobil (nur ohne gespeicherte Nutzerwahl). Verifiziert (headless, 375px): body.mobile gesetzt, Diagramm-Default + Editor als Titelzeile, Umschalten per Tap, Legenden-Toggle, Sprachleiste DE+EN+…/Aufklappen zeigt alle 9/aktives Extra bleibt sichtbar, Vollbild an, keine Konsolenfehler; Desktop unveraendert (beide Panels, 4 Sprachen, Legendenbutton verborgen). i18n konsistent (47 Keys x 9). SPEC §9 (Kleiner Bildschirm) + DECISIONS D17 + frontend/CLAUDE.md ergaenzt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2.3 KiB
2.3 KiB
Werkbaum · Frontend
Editor: index.html ist der funktionierende Prototyp (Text links,
Diagramm rechts, Toggles für transponierte Ansicht und verworfene Elemente).
Konventionen
- Vanilla HTML/CSS/JS, ES-Module; keine Frameworks. Testwerkzeug (Vitest) ok.
- Parser und Renderer müssen headless (ohne Editor-UI) nutzbar bleiben — Basis für SVG-Export und Mermaid-Plugin (docs/ROADMAP.md).
- Design: Farben/Typografie beibehalten (CSS-Variablen, IBM Plex); Statusfarben sind in SPEC §4 normiert. Marke nach ../brand/BRAND.md; Pastelltöne nie im Logo.
Stolperfallen
- Abzweig-Linien zielen auf die Knotenmitte (fester 23-px-Offset,
line-height: 1.3), nicht auf die Mitte des Teilbaums — bei Layout- Änderungen alle drei Modi (horizontal/vertikal/kompakt) prüfen. Vertikal + kompakt teilen die transponierte Basis-CSS; nur vertikal bekommt den Rechts-Ausgang für „all of“, kompakt führt auch „all of“ nach unten. Any-of ist in allen Modi grau: Linien gestrichelt grau und Alternative-Rahmen grau (Basis-CSSul.or). Kein Petrol im Diagramm mehr;var(--or)nur noch für UI-Akzente/Logo (SPEC §9, D15). - Extraktionsreihenfolge im Parser nicht umstellen: Kommentar → Zeichen/
Status → URL → Größe → Tags (sonst kollidiert
@in URLs). - „verworfen" ist per Default ausgeblendet; Filterlogik steckt in
visibleChildren()und muss bei Renderer-Umbauten erhalten bleiben. - Zustand wird im
localStoragegehalten (noch kein Backend):werkbaum-lang(Sprache),werkbaum-src(Editortext),werkbaum-ui(JSON: Modus, verworfene, Split-Zustand inkl.--col/--drow, Zoom, Vollbild). Neue GUI-Einstellungen insaveUI()/restoreState()mitführen;saveUIliefert währendrestoring===truenichts, damit das Wiederherstellen nicht sofort zurückschreibt. Fehlenderwerkbaum-srcfällt aufINITIALzurück, ein leerer String bleibt jedoch leer. - Kleiner Bildschirm:
body.mobile(permatchMedia, ≤ 640 px) schaltet auf Ein-Bereich-Ansicht (Diagramm oder Editor, Umschalten per Titelzeile), eigenen Legenden-Umschalter (#legendBtn) und schlanke Sprachwahl; Default Vollbild. Layout-CSS hängt anbody.mobile, nicht an einer eigenen@media-Regel — beide Seiten müssen denselben 640-px-Schwellwert nutzen (SPEC §9, D17).