diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 8e6bae8..fc2c2b0 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -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 diff --git a/docs/SPEC.md b/docs/SPEC.md index 7091839..835d55c 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -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 diff --git a/frontend/index.html b/frontend/index.html index 27c7900..c15d090 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -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)}