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:
co-authored by
Claude Opus 4.8
parent
9c1f6df225
commit
ffe70d2d40
+3
-2
@@ -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
@@ -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
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user