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
frontend/index.html
+18
View File
@@ -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}
</style>
</head>
<body>
@@ -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);