Scarriffle/Flaro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abspielen in die Mitte, die beiden Zeiten daneben

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-10-10 14:12:50 +02:00
co-authored by Claude Opus 5
parent 3dba736def
commit 912969d829
2 changed files with 38 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/src/spieler.ts
+17 -14
View File
@@ -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 ---------- */