mi/werkbaum
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

frontend: Modus-Waehler auf kleinem Bildschirm als Reihum-Umschalter

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 14:27:15 +02:00
co-authored by Claude Opus 4.8
parent ffe70d2d40
commit a04b3ef9fa
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/SPEC.md
+5 -3
View File
@@ -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** Min/Normal/Max-Buttons entfallen; geteilt wird weiterhin über den **Splitter**
(Ziehen). Die **Legende** bekommt hier einen eigenen (Ziehen). Die **Legende** bekommt hier einen eigenen
Umschalter im Editor-Kopf (statt der dauerhaften „AGENDA“-Zeile), damit sie Umschalter im Editor-Kopf (statt der dauerhaften „AGENDA“-Zeile), damit sie
zugeklappt keinen Platz kostet. Die **Sprachwahl** zeigt nur Englisch und die zugeklappt keinen Platz kostet. Der **Modus-Wähler** zeigt nur das aktive Icon
aktive Sprache plus „…“ (das alle Sprachen aufklappt). Voreinstellung auf und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal →
kleinem Bildschirm ist **Vollbild** (siehe D17). …), 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 ### Grafikexport des Diagramms
Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen
frontend/index.html
+18
View File
@@ -507,6 +507,10 @@
body.mobile .langsel.expanded button[data-lang]{display:inline-block} body.mobile .langsel.expanded button[data-lang]{display:inline-block}
body.mobile .langsel button[data-lang="en"], body.mobile .langsel button[data-lang="en"],
body.mobile .langsel button[data-lang].active{display:inline-block} 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}
</style> </style>
</head> </head>
<body> <body>
@@ -1555,6 +1559,20 @@ legendBtn.addEventListener('click', () => {
legendBtn.classList.toggle('active', agenda.open); legendBtn.classList.toggle('active', agenda.open);
}); });
agenda.addEventListener('toggle', () => 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(){ function applyMobile(){
const m = isMobile(); const m = isMobile();
document.body.classList.toggle('mobile', m); document.body.classList.toggle('mobile', m);