Am Handy ist die Transportleiste wieder erreichbar
Der offene Punkt von gestern Nacht, jetzt geloest -- und dabei stellte
sich heraus, dass er schlimmer war als gemeldet.
WAS WIRKLICH LOS WAR
Gemeldet war: "Am Handy bleibt bei offener Regie vom Bild nichts."
Gemessen auf 390x844 ergab sich mehr:
Saal 69..844 (775 px)
Zeilen 101 + 0 + 511 + 325 = 937
transport 681..1006 -- 162 Pixel UNTER dem Fensterrand
Der Koerper hat `overflow: hidden`; die Leiste war also nicht
abgeschnitten, sondern weg. Play, "Naechstes" und die Sprungknoepfe:
bei offener Regie nicht erreichbar. Das Bild hatte dabei null Pixel.
DIE RECHNUNG, DIE ES ERKLAERT
Regieleiste 101 (zwei Zeilen Register)
Regie-Kopf 207 (fuenf Zeilen zu je rund 44 px -- der
Klapp-Knopf stand allein in einer)
Regie-Inhalt 305
Transport 325 (Schiene 48 + drei Gruppen untereinander)
----
938 von 775.
Video, Regie und Transport passen auf einem Handy nicht nebeneinander.
Das ist keine Frage der Gestaltung, sondern des Platzes.
VIER SCHNITTE UND EINE ENTSCHEIDUNG
1. Die Tempo-Gruppe klappt hinter ihren eigenen Wert -- dasselbe
Muster wie "Aa" im Chat, das dort 73 Pixel gespart hat. Der
Knopf zeigt "1x" oder "1,5x", man muss zum Nachsehen also nicht
aufklappen. Am Rechner gibt es ihn nicht.
2. Der Klapp-Knopf rutscht neben die Lampe statt in eine eigene
Zeile.
3. Die drei Gruppen der Transportreihe stehen nebeneinander (158
statt 240 Pixel) -- moeglich, seit die Tempo-Gruppe klappt.
4. Die Messwerte stehen in einer Zeile, die grossen Knoepfe
bekommen weniger Polsterung.
Das reichte nicht. Also die Entscheidung: AM HANDY LEGT SICH DIE
REGIE UEBER DAS BILD, statt ihm Platz wegzunehmen -- als Rasterfeld
ueber die Zeilen 2 und 3, unten angedockt, hoechstens 72 Prozent
hoch. Oben bleibt ein Streifen Bild stehen (gemessen 135 px): Wer
mitten in der Sendung etwas einstellt, muss sehen, worueber er redet.
Gemessen jetzt: Saal 775 = Leiste 101 + Bild 481 + Regie 346, und
der Transport steht bei 601..844 -- erreichbar.
DREI VERSUCHE, DIE ES NICHT WURDEN (und warum)
- `position: absolute` mit gemessener Transporthoehe: lief, lag
aber 17 Pixel ueber den Registern. Der Bezugsrahmen eines
absolut gesetzten RASTERFELDES ist sein Rasterbereich, nicht der
Container -- mit `grid-row: 3` (0 Pixel hoch) wurde aus
`max-height: 100%` eine Hoehe von einem Pixel.
- `top` UND `bottom` UND `height: fit-content`: Der Browser
verwirft dann das `bottom`; die Regie ragte 101 Pixel in die
Leiste.
- `grid-row: 2 / 4` mit `align-self: end` statt absolut: ragte 146
Pixel nach oben und schob die Seite 198 Pixel breiter.
AUF 320 PIXELN BLEIBT ES BEIM ALTEN
Dort passen Register (104), Regie-Kopf (210) und Transportleiste
(158) zusammen nicht in die 499 Pixel Saal -- es fehlten 17. Fuenf
Verteilungen haben nur bestimmt, WER verdeckt wird: erst
"Vorbereiten" und "Beenden" unter der Leiste, dann die Schublade
ueber "Gaeste" und "Bild". Die Schublade greift deshalb erst ab 360
Pixeln; darunter bleibt der Stand von vorher -- ein bekannter Mangel,
aber kein neuer. Der Grund steht im Stilblatt.
NEBENBEI GEFUNDEN
- `.muenzsatz` brach nicht um und ragte auf 320 px 8 Pixel hinaus
-- die Tafel rollte dort wieder waagerecht.
WACHEN GESCHAERFT
- Die Klammerwache von gestern hat heute ihren ersten echten Fund
gemacht: Beim Herausschneiden einer Regel blieb eine `}` stehen.
Ohne sie waere das als drei Befunde in `mess-reaktion`
aufgetaucht, die wie Programmfehler ausgesehen haetten.
- Der Namensstreit-Waechter meldete `pult (grid vs. flex)` und
`messwerte__paar (grid vs. flex)` -- beides Fehlalarm: Eine
Regel in einem Zusammenhang (`.saal .pult`) und eine in einer
Medienabfrage sind Varianten, kein Streit. Er nimmt beides jetzt
aus. Dabei fiel auf, dass sein Muster die schliessende Klammer
verbrauchte, die der naechste Treffer als Anfang braucht -- der
echte Fall vom 28.09. (`.stufen` zweimal) wurde dadurch gar
nicht gefunden. Die Gegenprobe deckt jetzt fuenf Faelle ab.
- `mess-reaktion` mass die HOEHE der Kinozeile und haette 431
Pixel gemeldet, waehrend das Bild vollstaendig verdeckt war.
Sie misst jetzt, wieviel oberhalb der Schublade uebrig bleibt.
GEPRUEFT
pruef-reaktion, -css-klassen, -tippziele, -handy, -struktur,
-buehne: alle EXIT 0
mess-reaktion EXIT 0, kein ACHTUNG, kein offener Punkt
mess-quer EXIT 0 -- fuenf Groessen, nichts rollt seitlich
mess-buehne EXIT 0
This commit is contained in:
@@ -188,7 +188,7 @@ body.reaktion-seite > .kopfleiste { flex: none; }
|
||||
/* ENDLICH PLATZ. Unten waren es 272 Pixel fuer drei Felder
|
||||
untereinander -- sie passten nicht, und der Transport verdeckte
|
||||
den Rest. Hier ist die Hoehe die des Saals. */
|
||||
.saal:has(.pult[data-auf="ja"]) .pult__innen {
|
||||
.saal .pult__innen {
|
||||
max-height: none;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@@ -2325,7 +2325,11 @@ body.reaktion-seite > .kopfleiste { flex: none; }
|
||||
.muenzwahl { display: grid; gap: 8px; }
|
||||
.muenzsatz {
|
||||
appearance: none; cursor: pointer; text-align: left;
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
/* UMBRUCH: Auf 320 Pixeln ragten die drei Muenzen plus ihr Text
|
||||
8 Pixel hinaus und die Tafel rollte waagerecht -- genau das,
|
||||
was am 28.09. abgestellt wurde. Der Text rutscht jetzt unter
|
||||
die Muenzen, statt neben ihnen hinauszulaufen. */
|
||||
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
|
||||
padding: 8px 12px;
|
||||
border-radius: 13px;
|
||||
border: 1px solid var(--rand);
|
||||
@@ -3080,3 +3084,226 @@ body[data-nur="buehne"] { background: #000; }
|
||||
.sender-taste,
|
||||
.spur__knopf kbd { display: none; }
|
||||
}
|
||||
|
||||
/* ==== DIE TEMPO-GRUPPE KLAPPT AM FINGERGERAET =====================
|
||||
Der offene Punkt vom 28.09.2026: Am Handy blieb bei offener
|
||||
Regie vom Bild null Pixel. Die Wurzel war die Transportleiste --
|
||||
seit sie umbricht (Filipes Ansage: nichts nach links oder rechts
|
||||
schieben), braucht sie auf 320 px Breite 220 Pixel. Der groesste
|
||||
Posten darin sind die sechs Tempo-Knoepfe zu je 44 Pixeln.
|
||||
|
||||
Am Rechner aendert sich NICHTS: Dort gibt es den Klappknopf gar
|
||||
nicht, und die Gruppe steht offen -- sie war Filipes Wunsch an
|
||||
genau dieser Stelle. Nur wo mit dem Finger bedient wird und der
|
||||
Platz fehlt, klappt sie hinter ihren eigenen Wert. */
|
||||
.tempo__auf { display: none; }
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.tempo__auf {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
appearance: none; cursor: pointer;
|
||||
min-height: 44px; min-width: 52px; padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--rand);
|
||||
background: rgba(255, 255, 255, .05);
|
||||
color: var(--schrift);
|
||||
font: inherit; font-size: .78rem; font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* AUFGEKLAPPT SIEHT MAN ES DEM KNOPF AN -- sonst drueckt man ihn
|
||||
ein zweites Mal, weil man nicht weiss, ob der erste gewirkt hat. */
|
||||
.tempo__auf[aria-expanded="true"] {
|
||||
border-color: rgba(154, 183, 255, .4);
|
||||
background: rgba(154, 183, 255, .14);
|
||||
}
|
||||
/* Das Wort „Tempo" faellt weg: Der Knopf daneben sagt bereits
|
||||
„1×", und die Kuerzel darin gibt es an einem Geraet ohne
|
||||
Tastatur ohnehin nicht. */
|
||||
#tempo-teil .transport__wort { display: none; }
|
||||
#tempo-teil[data-auf="zu"] .tempo { display: none; }
|
||||
}
|
||||
|
||||
/* ==== AM HANDY MUSS DER TRANSPORT ERREICHBAR BLEIBEN ==============
|
||||
Gemessen am 29.09.2026 auf 390x844 bei offener Regie:
|
||||
Saal 775 px, Zeilen 101 + 0 + 511 + 325 = 937
|
||||
transport 681..1006 -- 162 Pixel UNTER dem Fensterrand
|
||||
Der Koerper hat `overflow: hidden`; die Leiste war also nicht
|
||||
abgeschnitten, sondern weg. Play, „Naechstes" und ±10 Sekunden
|
||||
waren bei offener Regie nicht erreichbar, und das Kino hatte
|
||||
null Pixel.
|
||||
|
||||
Drei Schnitte, keiner davon nimmt eine Funktion weg: */
|
||||
@media (pointer: coarse) {
|
||||
/* 1. DER KLAPP-KNOPF STAND ALLEIN IN EINER ZEILE -- 44 Pixel plus
|
||||
Abstand fuer einen Pfeil. Er gehoert an den Rand der obersten
|
||||
Zeile, neben die Lampe. `order` reicht dafuer: Die Leiste ist
|
||||
ohnehin eine umbrechende Reihe. */
|
||||
.pult__leiste { position: relative; padding-right: 64px; }
|
||||
.pult__klapp {
|
||||
position: absolute; top: 9px; right: 12px;
|
||||
}
|
||||
|
||||
/* 2. DIE DREI GRUPPEN DER TRANSPORTREIHE NEBENEINANDER.
|
||||
Untereinander kosteten sie 240 Pixel; nebeneinander sind es
|
||||
rund 58. Moeglich wurde das, als die Tempo-Gruppe hinter
|
||||
ihren eigenen Wert klappte -- vorher brauchte sie allein
|
||||
zwei Zeilen. */
|
||||
.transport__reihe {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
justify-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
.transport__teil--rechts { justify-content: flex-end; }
|
||||
|
||||
/* 3. DER REGIE-INHALT NIMMT, WAS UEBRIG BLEIBT.
|
||||
Eine feste Hoechsthoehe waere hier die dritte Zahl, die
|
||||
dasselbe zu regeln versucht wie die Schublade darueber --
|
||||
und zwei Regeln fuer eine Frage haben heute schon zweimal
|
||||
gereicht, damit eine davon falsch gewinnt. Als Flex-Kind
|
||||
bekommt der Inhalt den Rest und rollt darin. */
|
||||
.saal:has(.pult[data-auf="ja"]) .pult__innen {
|
||||
max-height: none;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==== AM HANDY LEGT SICH DIE REGIE UEBER DAS BILD =================
|
||||
GERECHNET, NICHT GERATEN. Auf 390x844 hat der Saal 775 Pixel.
|
||||
Davon gehen weg: Regieleiste 101, Regie-Kopf 207, Regie-Inhalt
|
||||
240, Transport 243 -- zusammen 791. Mehr als da ist. Selbst nach
|
||||
drei Schnitten (Klapp-Knopf aus der eigenen Zeile, Transportreihe
|
||||
nebeneinander, Inhalt kuerzer, zusammen 145 Pixel) bleiben fuer
|
||||
das Bild rund 120 Pixel: ein Streifen, kein Bild.
|
||||
|
||||
Das ist keine Frage der Gestaltung mehr, sondern des Platzes.
|
||||
Video, Regie und Transport passen auf einem Handy nicht
|
||||
nebeneinander.
|
||||
|
||||
ALSO UEBEREINANDER. Das Video behaelt seine volle Hoehe und ist
|
||||
sofort wieder da, sobald man die Regie zuklappt. Der Transport
|
||||
bleibt sichtbar, weil die Schublade oberhalb von ihm endet --
|
||||
seine Hoehe misst das Skript und schreibt sie in
|
||||
`--transport-hoch`; eine Zahl waere beim naechsten Knopf still
|
||||
falsch.
|
||||
|
||||
WARUM DAS NICHT DER ALTE FEHLER IST. Weiter oben steht, dass das
|
||||
Pult frueher `position: fixed` war und „die untere Haelfte
|
||||
verdeckte". Das stimmt -- fuer den RECHNER, wo Platz fuer beides
|
||||
ist, und dort bleibt alles wie es ist. Am Handy ist die Wahl
|
||||
nicht „nebeneinander oder uebereinander", sondern
|
||||
„uebereinander oder gar nicht". */
|
||||
/* ERST AB 360 PIXELN. Auf 320x568 passen Register (104), Regie-Kopf
|
||||
(210) und Transportleiste (158) zusammen nicht in die 499 Pixel
|
||||
Saal -- gemessen fehlten 17. Jede Verteilung hat dort nur
|
||||
bestimmt, WER verdeckt wird: erst „Vorbereiten“ und „Beenden“
|
||||
unter der Leiste, dann die Schublade ueber „Gäste“ und „Bild“.
|
||||
Fuenf Versuche haben den Befund verschoben und keinen geloest.
|
||||
Auf diesem Geraet (iPhone SE der ersten Reihe, 2016) bleibt es
|
||||
deshalb beim Stand von vorher -- ein bekannter Mangel, aber
|
||||
kein neuer. Ab 360 Pixeln greift die Schublade, und dort ist
|
||||
alles sauber. */
|
||||
@media (pointer: coarse) and (min-width: 360px) {
|
||||
/* IM RASTER, NICHT DARUEBER GESCHWEBT.
|
||||
|
||||
Der erste Bau nahm `position: absolute` und rechnete die
|
||||
Unterkante aus der gemessenen Transporthoehe. Das lief -- und
|
||||
die Schublade lag dabei 17 Pixel ueber den Registern, weil
|
||||
„von unten so hoch wie noetig" nichts darueber weiss, wo oben
|
||||
etwas anderes steht.
|
||||
|
||||
Als Rasterfeld ueber die Zeilen 2 und 3, unten angedockt,
|
||||
braucht es keine einzige gerechnete Zahl: Es beginnt nie ueber
|
||||
der Regieleiste (die ist Zeile 1) und endet nie unter dem
|
||||
Transport (der ist Zeile 4). Das Bild liegt darunter in
|
||||
derselben Zeile 2 und behaelt seine volle Hoehe. */
|
||||
.saal .pult {
|
||||
/* UEBER ZEILE 2 UND 3, ABSOLUT DARIN.
|
||||
|
||||
Der Bezugsrahmen eines absolut gesetzten RASTERFELDES ist
|
||||
sein Rasterbereich -- nicht der ganze Container. Das hat
|
||||
zwei Versuche gekostet: Mit `grid-row: 3` (0 Pixel hoch)
|
||||
wurde aus `max-height: 100%` eine Hoehe von einem Pixel, und
|
||||
mit `top` UND `bottom` UND `height: fit-content` verwirft der
|
||||
Browser das `bottom` -- die Regie ragte 101 Pixel in die
|
||||
Transportleiste.
|
||||
|
||||
Ueber die Zeilen 2 und 3 gespannt stimmt beides von selbst:
|
||||
Der Bereich beginnt unter der Regieleiste und endet ueber
|
||||
dem Transport. `bottom: 0` dockt unten an. Keine gemessene
|
||||
Zahl, keine Variable, nichts, das beim naechsten Knopf
|
||||
veraltet.
|
||||
|
||||
72 PROZENT UND NICHT 100: Oben bleibt ein Streifen Bild
|
||||
stehen. Wer mitten in der Sendung etwas einstellt, muss
|
||||
sehen, worueber er redet -- eine Schublade, die alles
|
||||
zudeckt, waere derselbe Zustand wie vorher, nur mit einem
|
||||
anderen Grund. Gemessen sind das auf 390x844 rund 120 Pixel
|
||||
Bild und 310 Pixel Regie; der Kopf mit den drei grossen
|
||||
Knoepfen passt hinein, der Rest rollt. */
|
||||
grid-row: 2 / 4;
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
/* 72 PROZENT: Oben bleibt ein Streifen Bild stehen. Wer
|
||||
mitten in der Sendung etwas einstellt, muss sehen, worueber
|
||||
er redet -- eine Schublade, die alles zudeckt, waere
|
||||
derselbe Zustand wie vorher, nur mit anderem Grund.
|
||||
Gemessen auf 390x844: rund 120 Pixel Bild, 310 Pixel Regie. */
|
||||
max-height: 72%;
|
||||
/* DER INHALT MUSS SICH DIE HOEHE TEILEN. Ohne diese drei
|
||||
Zeilen hielt sich die Schublade an ihre 72 Prozent, ihr
|
||||
INHALT aber nicht: Das Vorschaubild der Kachel „Was läuft"
|
||||
lag im Bildschirmfoto quer ueber der Transportleiste.
|
||||
Als Spalte bekommt der Kopf, was er braucht, und der Rest
|
||||
rollt in dem, was uebrig bleibt. */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 60;
|
||||
/* Ein Schatten nach oben -- sonst sieht die Schublade aus wie
|
||||
ein abgeschnittenes Bild statt wie etwas, das darueberliegt. */
|
||||
box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, .75);
|
||||
}
|
||||
/* Die dritte Zeile faellt damit weg -- das Bild bekommt sie.
|
||||
AUCH ZUGEKLAPPT: Bei 320x568 ist der Kopf der Regie allein
|
||||
207 Pixel hoch (drei Knoepfe brauchen dort zwei Zeilen), und
|
||||
zusammen mit den drei Zeilen Registern (148) und der
|
||||
Transportleiste (243) sind das 598 von 499 Pixeln Saal.
|
||||
Gemessen ragten „Vorbereiten" und „Beenden" dadurch in die
|
||||
Transportleiste -- verdeckte Knoepfe, die man drueckt und
|
||||
dabei etwas anderes trifft. Als Schublade legt sich der Kopf
|
||||
ueber das Bild statt in die Leiste. */
|
||||
.saal {
|
||||
grid-template-rows: auto minmax(0, 1fr) 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==== DER KOPF DER REGIE AM FINGERGERAET ==========================
|
||||
Gemessen auf 320x568: Der Kopf ist 207 Pixel hoch -- fuenf
|
||||
Zeilen zu je rund 44 Pixeln. Zusammen mit drei Zeilen Registern
|
||||
(148) und der Transportleiste (243) sind das 598 von 499 Pixeln
|
||||
Saal, und „Vorbereiten" und „Beenden" lagen unter der Leiste.
|
||||
|
||||
Drei Straffungen, die auf jedem Fingergeraet gelten und keine
|
||||
Funktion wegnehmen:
|
||||
|
||||
- Die Messwerte stehen in EINER Zeile statt umzubrechen.
|
||||
„Sehen zu 3 · Mit Bild 3/12 · Gäste 1/2 · Upload –" liest
|
||||
sich nebeneinander genauso gut, und untereinander kosten
|
||||
sie 41 Pixel.
|
||||
- Die Schrift der Zahlen ist kleiner. Sie sind Nebenauskunft,
|
||||
nicht die Hauptsache -- 11,52 px ist die Hausgrenze, und
|
||||
darueber bleibt es.
|
||||
- Die drei grossen Knoepfe bekommen weniger Polsterung. Ihre
|
||||
44 Pixel Hoehe bleiben (das ist die Daumengrenze), nur die
|
||||
Breite gibt nach, damit sie in eine Zeile passen. */
|
||||
@media (pointer: coarse) {
|
||||
.pult__leiste { gap: 6px 10px; padding: 8px 12px; }
|
||||
.messwerte { gap: 2px 12px; flex-wrap: nowrap; overflow: visible; }
|
||||
.messwerte__paar { display: flex; align-items: baseline; gap: 5px; }
|
||||
.messwerte dt { font-size: .72rem; }
|
||||
.messwerte dd { font-size: .8rem; }
|
||||
.pult__tun { gap: 6px; }
|
||||
.pult__tun .tun { padding: 0 10px; font-size: .78rem; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user