From a04b3ef9fa0f178d41db81816f0dd0e06e35560c Mon Sep 17 00:00:00 2001 From: mhoennig Date: Tue, 21 Jul 2026 14:27:15 +0200 Subject: [PATCH] frontend: Modus-Waehler auf kleinem Bildschirm als Reihum-Umschalter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auf body.mobile zeigt der horizontal/kompakt/vertikal-Waehler nur noch das aktive Icon (label:has(input:checked)); Tippen schaltet reihum zum naechsten Modus (horizontal -> kompakt -> vertikal -> …). Spart zwei Drittel Breite. Verifiziert (headless): mobil ein Icon sichtbar (~40px), 3x Tippen zyklt horizontal/kompakt/vertikal/horizontal; Desktop unveraendert (3 Icons, ~118px, Direktauswahl ohne Zyklus), keine Konsolenfehler. SPEC §9 (Kleiner Bildschirm) ergaenzt. Normalgroesse nicht betroffen. Co-Authored-By: Claude Opus 4.8 --- docs/SPEC.md | 8 +++++--- frontend/index.html | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/docs/SPEC.md b/docs/SPEC.md index 835d55c..b6ccc1d 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -148,9 +148,11 @@ 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 -kleinem Bildschirm ist **Vollbild** (siehe D17). +zugeklappt keinen Platz kostet. Der **Modus-Wähler** zeigt nur das aktive Icon +und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal → +…), spart also zwei Drittel der Breite. Die **Sprachwahl** zeigt nur Englisch +und die aktive Sprache plus „…“ (das alle Sprachen aufklappt). Voreinstellung +auf kleinem Bildschirm ist **Vollbild** (siehe D17). ### Grafikexport des Diagramms Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen diff --git a/frontend/index.html b/frontend/index.html index c15d090..cdd1679 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -507,6 +507,10 @@ body.mobile .langsel.expanded button[data-lang]{display:inline-block} body.mobile .langsel button[data-lang="en"], body.mobile .langsel button[data-lang].active{display:inline-block} + /* Modus-Wähler kompakt: nur das aktive Icon (ein Drittel Platz), Tippen + schaltet reihum weiter (horizontal → kompakt → vertikal → …, siehe JS). */ + body.mobile .seg label{display:none} + body.mobile .seg label:has(input:checked){display:flex} @@ -1555,6 +1559,20 @@ legendBtn.addEventListener('click', () => { legendBtn.classList.toggle('active', agenda.open); }); agenda.addEventListener('toggle', () => legendBtn.classList.toggle('active', agenda.open)); +/* Modus-Wähler auf kleinem Bildschirm: es ist nur das aktive Icon sichtbar, + Tippen schaltet zum nächsten Modus (reihum). Auf normaler Größe bleibt es + der Dreier-Umschalter — dort kehrt der Handler sofort zurück. */ +const seg = document.querySelector('.seg'); +const LAYOUT_MODES = ['horizontal','kompakt','vertikal']; +seg.addEventListener('click', e => { + if(!isMobile()) return; + e.preventDefault(); + const cur = document.querySelector('input[name="layout"]:checked').value; + const next = LAYOUT_MODES[(LAYOUT_MODES.indexOf(cur) + 1) % LAYOUT_MODES.length]; + const r = document.querySelector('input[name="layout"][value="' + next + '"]'); + r.checked = true; + r.dispatchEvent(new Event('change', {bubbles:true})); +}); function applyMobile(){ const m = isMobile(); document.body.classList.toggle('mobile', m);