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/style.css
+21 -13
View File
@@ -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. */