frontend: Splitter auf kleinem Bildschirm wieder verfuegbar

Der Gutter wurde auf Mobil faelschlich ganz ausgeblendet. Jetzt bleibt er
sichtbar und ziehbar (die 820-px-Regel liefert das gestapelte Layout inkl.
Gutter); nur die Min/Normal/Max-Buttons bleiben verborgen. Default weiterhin
ein Bereich gross, Umschalten per Titelzeilen-Tap unveraendert, zusaetzlich
Teilen per Ziehen moeglich.

Verifiziert (headless, 375px): Gutter sichtbar, Ziehen erzeugt Custom-Split
(--drow gesetzt, beide Bereiche sichtbar); Default-Einzelansicht und
winbtns-verborgen unveraendert. Normalgroesse nicht betroffen.

SPEC §9 und DECISIONS D17 an "Splitter bleibt" angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 14:25:19 +02:00
co-authored by Claude Opus 4.8
parent 9c1f6df225
commit ffe70d2d40
3 changed files with 14 additions and 20 deletions
+3 -2
View File
@@ -138,8 +138,9 @@ zählt der flache CI-Klon nur einen Commit. `1.0` bleibt die Version beim lokale
## D17 — Kleiner Bildschirm: ein Bereich, kompakte Legende & Sprachwahl
Auf schmalen Viewports (≤ 640 px) ist für beide Bereiche kein Platz. Daher ist
immer nur **ein** Bereich groß (Diagramm oder Editor); der andere schrumpft auf
seine Titelzeile und dient als Umschalter (Antippen bringt ihn nach vorn),
Splitter und Fenster-Buttons entfallen. Die Legende wird von der Bereichs-
seine Titelzeile und dient als Umschalter (Antippen bringt ihn nach vorn); die
Fenster-Buttons entfallen, der **Splitter bleibt** (Teilen per Ziehen möglich).
Die Legende wird von der Bereichs-
Umschaltung **entkoppelt** und über einen eigenen Umschalter im Editor-Kopf
gesteuert — das dauerhafte „AGENDA“-Band kostet sonst zu viel Höhe. Die
Sprachleiste zeigt nur Englisch + aktive Sprache + „…“. Voreinstellung ist
+3 -2
View File
@@ -144,8 +144,9 @@ ist grau (`#6B7A8C`) — kein Petrol mehr im Diagramm. Der Modus ändert nur die
### Kleiner Bildschirm (mobil)
Ab schmaler Breite (≤ 640 px, z. B. Smartphone) ist immer nur **ein** Bereich
groß sichtbar — Diagramm **oder** Texteditor; der andere schrumpft auf seine
Titelzeile und dient als Umschalter (Antippen bringt ihn nach vorn). Splitter
und Min/Normal/Max-Buttons entfallen. Die **Legende** bekommt hier einen eigenen
Titelzeile und dient als Umschalter (Antippen bringt ihn nach vorn). Die
Min/Normal/Max-Buttons entfallen; geteilt wird weiterhin über den **Splitter**
(Ziehen). Die **Legende** bekommt hier einen eigenen
Umschalter im Editor-Kopf (statt der dauerhaften „AGENDA“-Zeile), damit sie
zugeklappt keinen Platz kostet. Die **Sprachwahl** zeigt nur Englisch und die
aktive Sprache plus „…“ (das alle Sprachen aufklappt). Voreinstellung auf
+8 -16
View File
@@ -486,23 +486,15 @@
wie in allen Modi. Gate-Codierung: und = durchgezogen dunkel (Tinte),
oder = gestrichelt grau. */
/* ---------- Kleiner Bildschirm (Smartphone): nur ein Panel ----------
body.mobile wird per matchMedia (<=640px) gesetzt. Es ist immer genau
EIN Panel groß, das andere schrumpft auf seine Titelzeile und dient als
Umschalter (Tippen bringt es nach vorn). Splitter und Fenster-Buttons
entfallen; die Legende bekommt einen eigenen Umschalter statt der
dauerhaften „AGENDA“-Zeile. */
body.mobile .gutter{display:none}
/* ---------- Kleiner Bildschirm (Smartphone) ----------
body.mobile wird per matchMedia (<=640px) gesetzt. Standardmäßig ist ein
Bereich groß, der andere schrumpft auf seine Titelzeile und dient als
Umschalter (Tippen bringt ihn nach vorn). Die Min/Normal/Max-Buttons
entfallen; geteilt wird weiterhin über den **Splitter**, der sichtbar
bleibt. Das gestapelte Layout inkl. Gutter liefert bereits die
820-px-Regel weiter oben. Die Legende bekommt einen eigenen Umschalter
statt der dauerhaften „AGENDA“-Zeile. */
body.mobile .winbtns{display:none}
body.mobile .app,
body.mobile .app.side{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"diagram" "editor";
}
body.mobile .app.collapse-diagram,
body.mobile .app.side.collapse-diagram{grid-template-rows:auto minmax(0,1fr)}
body.mobile .app.collapse-editor,
body.mobile .app.side.collapse-editor{grid-template-rows:minmax(0,1fr) auto}
/* Editor immer gestapelt (Textarea oben, Legende darunter) */
body.mobile .editor-body{flex-direction:column;align-items:stretch}
body.mobile .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)}