From 912969d829fcfde0e7784a0f0a888c1ae2974926 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Sat, 10 Oct 2026 14:12:50 +0200 Subject: [PATCH] Abspielen in die Mitte, die beiden Zeiten daneben MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die verstrichene Zeit stand hinter dem Lautstärkeregler — „1:51:01" direkt neben einem Schieber liest sich wie dessen Beschriftung — und die verbleibende ganz rechts hinter den Menüs. Zwei Angaben über dieselbe Sache, so weit auseinander wie möglich. Jetzt stehen sie dort, wo man ohnehin hinsieht: links und rechts vom Knopf, den man drückt. Drei Spalten statt drei Flex-Kinder, denn die Mitte soll die Mitte des Bildes sein und nicht die Mitte dessen, was links und rechts übrig bleibt. Mit `space-between` wanderte der Knopf, sobald rechts ein Menü dazukam oder links die Lautstärke wegfiel. Schmal weicht, was man auch anders bekommt: die Lautstärke liegt am Telefon auf einer Taste, und die verbleibende Zeit lässt sich an der Leiste ablesen. Der Knopf in der Mitte weicht nicht — dort sucht ihn der Daumen. Co-Authored-By: Claude Opus 5 --- web/app/src/spieler.ts | 31 +++++++++++++++++-------------- web/app/src/style.css | 34 +++++++++++++++++++++------------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/web/app/src/spieler.ts b/web/app/src/spieler.ts index 0ca6932..f0daa77 100644 --- a/web/app/src/spieler.ts +++ b/web/app/src/spieler.ts @@ -560,7 +560,21 @@ export function spieler(anfrage: Spieleranfrage): void { const links = document.createElement('div'); links.className = 'pl-gruppe'; - links.append(abspielknopf, tonknopf, lautstaerke); + links.append(tonknopf, lautstaerke); + + // **Das Wichtigste in die Mitte, und die beiden Zeiten dazu.** + // + // Vorher stand die verstrichene Zeit hinter dem Lautstärkeregler und die + // verbleibende ganz rechts hinter den Menüs: zwei Angaben über dieselbe + // Sache, so weit auseinander wie möglich, und die erste neben etwas, mit + // dem sie nichts zu tun hat. „1:51:01" direkt neben einem Schieber für + // Lautstärke liest sich wie dessen Beschriftung. + // + // Jetzt stehen sie dort, wo man hinsieht: links und rechts vom Knopf, den + // man drückt. + const zeitmitte = document.createElement('div'); + zeitmitte.className = 'pl-mitte'; + zeitmitte.append(stand, abspielknopf, rest); const rechts = document.createElement('div'); rechts.className = 'pl-gruppe'; @@ -568,20 +582,9 @@ export function spieler(anfrage: Spieleranfrage): void { const unten = document.createElement('div'); unten.className = 'pl-unten'; - unten.append(links, rechts); + unten.append(links, zeitmitte, rechts); - // **Die Zeitangaben gehören an die Zeitleiste, nicht zwischen die Knöpfe.** - // - // Die verstrichene Zeit stand hinter dem Lautstärkeregler und die - // verbleibende ganz rechts hinter den Menüs — zwei Angaben über dieselbe - // Sache, so weit auseinander wie möglich, und beide neben etwas, mit dem - // sie nichts zu tun haben. Jetzt stehen sie links und rechts von dem - // Balken, über den sie Auskunft geben. - const zeitreihe = document.createElement('div'); - zeitreihe.className = 'pl-zeitreihe'; - zeitreihe.append(stand, zeitleiste, rest); - - bedienung.append(zeitreihe, unten); + bedienung.append(zeitleiste, unten); /* ---------- Verhalten ---------- */ diff --git a/web/app/src/style.css b/web/app/src/style.css index 7bf55ce..d6f7731 100644 --- a/web/app/src/style.css +++ b/web/app/src/style.css @@ -906,17 +906,27 @@ textarea.feld { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pl-unten { display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular); } +/* **Drei Spalten, nicht drei Flex-Kinder.** + * + * Die Mitte soll die Mitte des Bildes sein, nicht die Mitte dessen, was + * links und rechts übrig bleibt. Mit `space-between` wanderte der + * Abspielknopf, sobald rechts ein Menü dazukam oder links die Lautstärke + * wegfiel. `1fr auto 1fr` hält ihn fest. */ +.pl-unten { + display: grid; grid-template-columns: 1fr auto 1fr; + align-items: center; gap: var(--s-regular); +} .pl-gruppe { display: flex; align-items: center; gap: 6px; min-width: 0; } +.pl-mitte { display: flex; align-items: center; gap: 12px; justify-self: center; } +.pl-unten > .pl-gruppe:last-child { justify-self: end; } /* **Die rechte Gruppe gibt nicht nach.** * * Beide Gruppen durften schrumpfen, und ihre Knöpfe sind `flex: 0 0 auto` — * wird es eng, schrumpft also die Gruppe und ihre Knöpfe stehen heraus. Dann * liegt der äusserste halb hinter dem Fensterrand. Links gibt es etwas - * nachzugeben (die Lautstärke, die Zeitangabe), rechts sind es nur Knöpfe. */ -.pl-unten > .pl-gruppe:last-child { flex: 0 0 auto; } -.pl-unten > .pl-gruppe:first-child { flex: 0 1 auto; overflow: hidden; } + * nachzugeben (die Lautstärke), rechts sind es nur Knöpfe. */ +.pl-unten > .pl-gruppe:first-child { overflow: hidden; } /* **44 Bildpunkte, nicht 32.** Darunter trifft ein Finger daneben, und ein Fehlgriff auf der Zeitleiste wirft einen aus dem Film. */ @@ -935,16 +945,14 @@ textarea.feld { flex: 0 0 auto; } -/* **Die Zeitangaben links und rechts vom Balken.** +/* **Schmal weicht, was man auch anders bekommt.** * - * Vorher stand die verstrichene Zeit hinter dem Lautstärkeregler und die - * verbleibende hinter den Menüs: zwei Angaben über dieselbe Sache, so weit - * auseinander wie möglich. */ -.pl-zeitreihe { display: flex; align-items: center; gap: 10px; } - -/* Schmal ist der Balken wichtiger als die zweite Zahl. */ -@media (max-width: 520px) { - .pl-zeitreihe .pl-rest { display: none; } + * Die Lautstärke liegt am Telefon auf einer Taste an der Seite, und die + * verbleibende Zeit steht auch an der Zeitleiste ablesbar. Was nicht weicht, + * ist der Abspielknopf in der Mitte — sonst rutscht er aus der Mitte, und + * genau dort sucht ihn der Daumen. */ +@media (max-width: 560px) { + .pl-laut, .pl-rest { display: none; } } /* Zeit- und Lautstärkeregler: dieselbe Form, verschiedene Breite. */