Die Kopfleiste bleibt auch in einer fremden Sicht in EINER Reihe
Filipe, mit Bildschirmfoto aus der installierten App: "es ist noch nicht alles in einer zeile und irgendwie funktionieren nicht alle knoepfe." DER GRUND WAR NICHT DIE BREITE SEINES GERAETS, SONDERN DER ZUSTAND. In der eigenen Sicht klappt der Umschalter auf 36 px zusammen; sobald man die Sicht einer anderen Person uebernimmt, stand der Name darin und er war 152 px breit. Gemessen waren es dann zwei Zeilen bei 320, 360, 390, 412 UND 430 px -- ausnahmslos. Auf seinem Bild stand "Miesmus..." im Umschalter und der goldene Rahmen um die Seite: er war in einer fremden Sicht. MEINE PRUEFUNGEN HABEN DEN FALSCHEN ZUSTAND GEMESSEN. pruef-handy lief ausschliesslich in der eigenen Sicht und war deshalb gruen, waehrend es beim Nutzer zweizeilig war. Ein gruener Haken sagt nur, dass die Bedingung erfuellt war -- nicht, dass sie den Zustand geprueft hat, in dem der Nutzer ist. Die Pruefung wechselt jetzt selbst in eine fremde Sicht (92 -> 99 Pruefungen). WAS SICH AENDERT - Auf dem Handy ist der Umschalter auch in fremder Sicht ein Zeichenknopf: Auge + Anfangsbuchstabe, 46-48 statt 152 px, in der ROLLENFARBE der Person, deren Sicht laeuft. Die Farbe kommt aus `data-rolle` -- dieselbe Zuordnung, die gate.css ohnehin hat, keine zweite Farbliste. - Der volle Name wandert in ein Band unter die Leiste, zusammen mit "Zurueck zu meiner Sicht" als ganzem Satz statt als 28-px-Kreuz. Er steht dort GANZ statt als "Miesmus...". Am Rechner bleibt alles wie bisher; dort ist Platz. - Der Rahmen um die Seite nimmt dieselbe Farbe an. Man sieht damit nicht nur DASS eine fremde Sicht laeuft, sondern WESSEN. - Das `:not([data-fremd="ja"])` faellt an beiden Stellen weg. Es war der ganze Fehler: eine Regel, die den wichtigeren Fall ausnahm. UND DER BLOCK FUER SCHMALE GERAETE STAND AN DER FALSCHEN STELLE Er galt bis 340 px und stand 3600 Zeilen VOR dem 560er-Block -- bei gleicher Spezifitaet verliert er damit. Gewirkt hat er nur, weil sein Selektor zufaellig ein `:not()` trug. Jetzt steht er direkt hinter dem 560er und gilt bis 400 px (34 px je Knopf, 4 px Abstand). Damit bleibt auch bei 360 px auf den UNTERSEITEN alles in einer Reihe -- dort stehen zusaetzlich der Zurueck-Knopf und die Glocke. Gemessen nach dem Umbau, eigene und fremde Sicht, Start- und Unterseite: 360, 390, 412 und 430 px alle einzeilig. Offen bleibt 320 px (iPhone SE 1. Generation bzw. Anzeige-Zoom) -- dort passt es ohne das Weglassen einer Funktion nicht, das ist eine Entscheidung und kein Handgriff. DER SICHERE BEREICH (auf Filipes Zusage) Jede der 20 Seiten sagt `viewport-fit=cover`, aber im ganzen Workspace stand kein einziges `env(safe-area-inset-*)`. Sein Android ist NICHT betroffen (im Bildschirmfoto nachgesehen), ein iPhone waere es: Von einem 36-px-Knopf blieben unter einer 47 px hohen Statusleiste rechnerisch 5 px zum Antippen. Einmal zentral benannt (gate.css) und an den vier Stellen angewandt, wo etwas am Rand klebt: Kopfleiste (oben und seitlich), Inhalt (seitlich und unten), Speichern-Leiste im Profil, Chat-Eingabe. Auf Geraeten ohne Aussparung sind alle vier Werte 0. Nebenbei: chat.js misst die Hoehe ueber der Chatflaeche jetzt einschliesslich des Bandes -- sonst stuende das Eingabefeld genau um dessen Hoehe unter dem Bildschirmrand. Derselbe Fehler wie mit den festen 62 px, nur mit einem anderen Element. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+191
-22
@@ -279,7 +279,15 @@ body.start > main { position: relative; z-index: 1; }
|
||||
.kopfleiste {
|
||||
position: sticky; top: 0; z-index: 5;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
padding: 14px clamp(16px, 4vw, 40px);
|
||||
/* Der sichere Bereich kommt OBEN DRAUF, nicht statt der Polsterung:
|
||||
Auf einem Geraet ohne Aussparung ist der Wert 0 und es bleibt bei
|
||||
den 14 px. Seitlich dasselbe -- im Querformat liegt die Aussparung
|
||||
links oder rechts, und ohne den Zuschlag verschwindet die Marke
|
||||
halb darunter. `100vw` zaehlt die Aussparung naemlich mit. */
|
||||
padding: calc(14px + var(--ws-sicher-oben, 0px))
|
||||
calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-rechts, 0px))
|
||||
14px
|
||||
calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-links, 0px));
|
||||
background: rgba(6, 9, 16, .82);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
@@ -470,7 +478,13 @@ body.start > main { position: relative; z-index: 1; }
|
||||
.inhalt {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
|
||||
/* Seitlich und unten der sichere Bereich obendrauf (09.09.2026):
|
||||
im Querformat liegt die Aussparung seitlich, unten sitzt auf
|
||||
randlosen Geraeten die Gestenleiste. Ohne Aussparung sind beide 0. */
|
||||
padding: clamp(28px, 5vw, 56px)
|
||||
calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-rechts, 0px))
|
||||
calc(64px + var(--ws-sicher-unten, 0px))
|
||||
calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-links, 0px));
|
||||
}
|
||||
|
||||
/* Diese vier standen bis zum 31.08.2026 in aufgaben.css -- also in einer
|
||||
@@ -3726,11 +3740,90 @@ body.start #protokoll {
|
||||
body[data-fremde-sicht="ja"]::after {
|
||||
content: "";
|
||||
position: fixed; inset: 0;
|
||||
border: 2px solid rgba(216, 161, 58, .38);
|
||||
/* Der Ton kommt seit dem 09.09.2026 von der Person, deren Sicht
|
||||
laeuft (kopf.js liest ihn aus dem fertigen Umschalter und setzt ihn
|
||||
hier). Damit tragen Rahmen, Knopf und Band dieselbe Farbe, und man
|
||||
sieht auf einen Blick WESSEN Sicht -- nicht nur DASS eine fremde
|
||||
laeuft. Der Rueckfallwert ist das alte Gold. */
|
||||
border: 2px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 40%, transparent);
|
||||
pointer-events: none;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DER ANFANGSBUCHSTABE IM UMSCHALTER (09.09.2026)
|
||||
|
||||
Nur auf dem Handy sichtbar (siehe Medienabfrage weiter unten): Am
|
||||
Rechner steht der ganze Name daneben, dort waere ein Buchstabe davor
|
||||
nur Wiederholung.
|
||||
=================================================================== */
|
||||
.sicht__kuerzel {
|
||||
display: none;
|
||||
flex: none;
|
||||
font-size: .78rem; font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
color: var(--s-ton);
|
||||
}
|
||||
/* Der Umschalter traegt in fremder Sicht die Farbe der Rolle, deren
|
||||
Sicht laeuft -- die Zuordnung steht schon in gate.css
|
||||
(`[data-rolle="…"] { --rolle-haupt: … }`), sie wird hier nur
|
||||
ausgelesen. Keine zweite Farbliste. */
|
||||
.sicht[data-fremd="ja"][data-rolle] { --s-ton: var(--rolle-haupt, #d8a13a); }
|
||||
|
||||
/* ===================================================================
|
||||
DAS BAND UNTER DER LEISTE (09.09.2026)
|
||||
|
||||
Es traegt, was aus der Kopfleiste weichen musste: den vollen Namen
|
||||
und den Weg zurueck. Auf dem Rechner ist es aus -- dort steht der
|
||||
Name im Umschalter selbst, und zwei Anzeigen fuer dieselbe Sache
|
||||
sind eine zu viel.
|
||||
=================================================================== */
|
||||
.fremd-band {
|
||||
display: none; /* nur auf dem Handy, siehe unten */
|
||||
align-items: center; gap: 9px;
|
||||
padding: 8px clamp(14px, 4vw, 20px);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 34%, transparent);
|
||||
background: color-mix(in srgb, var(--fremd-ton, #d8a13a) 13%, rgba(8, 12, 20, .92));
|
||||
color: var(--text);
|
||||
font-size: .82rem;
|
||||
position: relative; z-index: 4; /* unter der Leiste (5/6), ueber dem Inhalt */
|
||||
}
|
||||
.fremd-band[data-rolle] { --fremd-ton: var(--rolle-haupt, #d8a13a); }
|
||||
.fremd-band__auge {
|
||||
flex: none; width: 16px; height: 16px;
|
||||
fill: none; stroke: var(--fremd-ton, #d8a13a); stroke-width: 1.6;
|
||||
}
|
||||
.fremd-band__text {
|
||||
margin: 0; min-width: 0;
|
||||
/* Der Name darf umbrechen statt abzuschneiden -- genau das
|
||||
Abschneiden ("Miesmus…") war ja der Grund, ihn hierher zu holen. */
|
||||
overflow-wrap: anywhere;
|
||||
/* Nicht `--text-leise`: Das Band ist keine Randnotiz, sondern die
|
||||
Antwort auf "wessen Zahlen sehe ich hier gerade". Der gefaehrlichste
|
||||
Fall dieser Funktion ist, dass man sie vergisst -- eine leise
|
||||
Schrift waere genau das Gegenteil davon. */
|
||||
color: var(--text);
|
||||
}
|
||||
.fremd-band__name { color: var(--fremd-ton, #d8a13a); font-weight: 700; }
|
||||
.fremd-band__weg {
|
||||
flex: none; margin-left: auto;
|
||||
min-height: 34px; padding: 0 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 45%, transparent);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--fremd-ton, #d8a13a);
|
||||
font: inherit; font-size: .78rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background var(--tempo);
|
||||
}
|
||||
.fremd-band__weg:hover { background: color-mix(in srgb, var(--fremd-ton, #d8a13a) 16%, transparent); }
|
||||
.fremd-band__weg:focus-visible { outline: 2px solid var(--fremd-ton, #d8a13a); outline-offset: 2px; }
|
||||
@media (forced-colors: active) {
|
||||
.fremd-band { border-bottom: 1px solid CanvasText; }
|
||||
.fremd-band__weg { border: 1px solid ButtonText; color: ButtonText; }
|
||||
}
|
||||
|
||||
/* Ab hier wird die Kopfleiste eng. Das Schild "SICHT" entfaellt als
|
||||
Erstes -- das Feld selbst sagt bereits, wessen Sicht laeuft, und der
|
||||
Rahmen um die Seite sagt DASS eine fremde laeuft. */
|
||||
@@ -3796,17 +3889,14 @@ body[data-fremde-sicht="ja"]::after {
|
||||
geschaltet: 34 px je Knopf, 4 px Abstand. Macht 283 und passt.
|
||||
34 px bleiben deutlich ueber den 24 px, die als Mindestmass fuer ein
|
||||
Beruehrziel gelten (WCAG 2.5.8). */
|
||||
@media (max-width: 340px) {
|
||||
.kopfleiste__rechts { gap: 4px; }
|
||||
.kopfleiste__rechts > .teilen,
|
||||
.kopfleiste__rechts > .chat-knopf,
|
||||
.kopfleiste__rechts > .suche-knopf,
|
||||
.kopfleiste__rechts > .abmelden,
|
||||
.kopfleiste__rechts > .glocke,
|
||||
.sicht:not([data-fremd="ja"]) {
|
||||
width: 34px; min-width: 34px; height: 34px; min-height: 34px;
|
||||
}
|
||||
}
|
||||
/* Der Block fuer sehr schmale Geraete ist am 09.09.2026 ans ENDE der
|
||||
Datei gewandert, direkt hinter den 560er-Block. Grund: Er stand hier,
|
||||
also VOR ihm, und hat deshalb bei gleicher Spezifitaet verloren --
|
||||
die 34 px kamen nur an, weil der Selektor zufaellig ein `:not()`
|
||||
trug und damit staerker war. Wer sich auf so etwas verlaesst, baut
|
||||
auf Sand: Sobald das `:not()` faellt (und es musste fallen, siehe
|
||||
dort), gilt wieder der 560er-Block. Zwei Regeln fuer dieselbe Sache
|
||||
gehoeren nebeneinander, in der Reihenfolge, in der sie greifen. */
|
||||
|
||||
@media (max-width: 300px) {
|
||||
.kopfleiste { flex-wrap: wrap; row-gap: 8px; }
|
||||
@@ -7468,18 +7558,46 @@ body.start .k-leiste .feldschild::after {
|
||||
Der Knopf liegt unsichtbar UEBER dem Auge, statt daneben. Das
|
||||
bewahrt die Bedienbarkeit (die ganze Flaeche ist das Ziel) und den
|
||||
Fokusring, kostet aber keine Breite. */
|
||||
.sicht:not([data-fremd="ja"]) {
|
||||
/* NACHTRAG 09.09.2026 -- DAS `:not()` IST WEG, UND DAS IST DER KERN.
|
||||
|
||||
Filipe aus der installierten App: "es ist noch nicht alles in einer
|
||||
zeile." Gemessen lag es nicht an seinem Geraet, sondern an genau
|
||||
diesem `:not([data-fremd="ja"])`: In der eigenen Sicht klappte der
|
||||
Umschalter auf 36 px zusammen, in einer fremden blieb er 152 px
|
||||
breit. Auf 320, 360, 390, 412 UND 430 px waren es dann zwei Zeilen
|
||||
-- ausnahmslos.
|
||||
|
||||
Der Satz darueber ("dann darf die Leiste auch umbrechen") war ein
|
||||
Handel, den ich mit mir selbst gemacht habe: Name gegen gerade
|
||||
Zeile. Beides geht -- der Name muss nur woandershin. Er steht jetzt
|
||||
vollstaendig im Band unter der Leiste (.fremd-band), und im Knopf
|
||||
bleiben Farbe und Anfangsbuchstabe.
|
||||
|
||||
Eine Regel fuer beide Faelle, nicht zwei nebeneinander: Der
|
||||
Unterschied ist die Breite und ein Buchstabe, sonst nichts. */
|
||||
.sicht {
|
||||
position: relative;
|
||||
width: 36px; min-width: 36px; height: 36px;
|
||||
padding: 0; gap: 0; justify-content: center;
|
||||
}
|
||||
.sicht:not([data-fremd="ja"]) .sicht__auge { position: relative; z-index: 0; }
|
||||
.sicht:not([data-fremd="ja"]) .wahl2 { position: absolute; inset: 0; z-index: 1; }
|
||||
.sicht:not([data-fremd="ja"]) .wahl2__knopf {
|
||||
/* Neben dem Auge steht in fremder Sicht noch der Buchstabe. 48 statt
|
||||
36 px -- gemessen 12 px mehr gegenueber 116 px vorher. */
|
||||
.sicht[data-fremd="ja"] {
|
||||
width: 48px; min-width: 48px;
|
||||
gap: 2px;
|
||||
}
|
||||
.sicht .sicht__auge { position: relative; z-index: 0; }
|
||||
.sicht .sicht__kuerzel { position: relative; z-index: 0; display: block; }
|
||||
.sicht .wahl2 { position: absolute; inset: 0; z-index: 1; }
|
||||
.sicht .wahl2__knopf {
|
||||
width: 100%; height: 100%; padding: 0;
|
||||
background: none; border-color: transparent;
|
||||
}
|
||||
.sicht:not([data-fremd="ja"]) .wahl2__knopf svg { display: none; }
|
||||
.sicht .wahl2__knopf svg { display: none; }
|
||||
/* Das Kreuz entfaellt -- der Weg zurueck steht als ganzer Satz im
|
||||
Band darunter, und dort ist er leichter zu treffen als ein
|
||||
28-px-Kreuz zwischen zwei anderen Knoepfen. */
|
||||
.sicht .sicht__weg { display: none; }
|
||||
/* DER KNOPF WIRD GEKLAMMERT, NICHT SEIN KASTEN.
|
||||
|
||||
Erster Anlauf war `max-width: 30px` am umgebenden .wahl2. Gemessen
|
||||
@@ -7487,9 +7605,60 @@ body.start .k-leiste .feldschild::after {
|
||||
tatsaechliche Breite 104. Der Knopf DARIN behielt seine Groesse und
|
||||
schob den Kasten wieder auf. Wer nur den Rahmen begrenzt, begrenzt
|
||||
nichts; die Breite kommt vom Inhalt. */
|
||||
.sicht:not([data-fremd="ja"]) .wahl2,
|
||||
.sicht:not([data-fremd="ja"]) .wahl2__knopf { max-width: none; min-width: 0; }
|
||||
.sicht:not([data-fremd="ja"]) .wahl2__text { display: none; }
|
||||
.sicht .wahl2,
|
||||
.sicht .wahl2__knopf { max-width: none; min-width: 0; }
|
||||
.sicht .wahl2__text { display: none; }
|
||||
|
||||
/* DAS BAND ERSCHEINT GENAU DA, WO DER NAME AUS DER LEISTE WEICHT.
|
||||
|
||||
Beide Regeln stehen in derselben Medienabfrage und in derselben
|
||||
Datei -- sonst waere es wieder die alte Falle: eine Schwelle fuer
|
||||
"Name weg" und eine zweite fuer "Band da", und beim naechsten
|
||||
Verschieben stimmt nur noch eine davon. */
|
||||
.fremd-band { display: flex; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
SEHR SCHMALE GERAETE (bis 400 px) — 09.09.2026
|
||||
|
||||
Hier stand einmal 340 px. Gemessen reichte das nicht: Bei 360 px war
|
||||
die Leiste auf den UNTERSEITEN immer noch zweizeilig, weil dort der
|
||||
Zurueck-Knopf (38 px) und die Glocke zusaetzlich stehen. Die Rechnung
|
||||
bei 360 px, Unterseite, fremde Sicht:
|
||||
|
||||
zurueck 38 + Umschalter 48 + Teilen 36 + Chat 36 + Suche 36
|
||||
+ wer 28 + Glocke 37 + Abmelden 36 = 295
|
||||
dazu 7 Abstaende zu 6 px = 42
|
||||
dazu der Abstand zur Marke = 16
|
||||
---
|
||||
353 bei 328 verfuegbar
|
||||
|
||||
25 px zu viel. Mit 34 px je Knopf und 4 px Abstand sind es 24 px
|
||||
weniger bei den Knoepfen und 14 bei den Abstaenden — es passt mit
|
||||
Luft, ohne dass eine Funktion verschwindet.
|
||||
|
||||
34 px liegt weiterhin deutlich ueber den 24 px, die WCAG 2.5.8 als
|
||||
Untergrenze nennt. Kleiner sollte es nicht werden; dann waere das
|
||||
Weglassen eines Knopfes die ehrlichere Loesung als ein Ziel, das man
|
||||
nicht mehr trifft.
|
||||
|
||||
DIESER BLOCK MUSS HINTER DEM 560er STEHEN. Beide setzen `width` am
|
||||
selben Element mit derselben Spezifitaet — dann entscheidet die
|
||||
Reihenfolge. Vorher stand er 3600 Zeilen weiter oben und wirkte nur
|
||||
deshalb, weil sein Selektor zufaellig ein `:not()` enthielt.
|
||||
===================================================================== */
|
||||
@media (max-width: 400px) {
|
||||
.kopfleiste__rechts { gap: 4px; }
|
||||
.kopfleiste__rechts > .teilen,
|
||||
.kopfleiste__rechts > .chat-knopf,
|
||||
.kopfleiste__rechts > .suche-knopf,
|
||||
.kopfleiste__rechts > .abmelden,
|
||||
.kopfleiste__rechts > .glocke,
|
||||
.sicht {
|
||||
width: 34px; min-width: 34px; height: 34px; min-height: 34px;
|
||||
}
|
||||
/* Der Buchstabe braucht auch hier seine 12 px daneben. */
|
||||
.sicht[data-fremd="ja"] { width: 46px; min-width: 46px; }
|
||||
}
|
||||
|
||||
/* Am Rechner bleibt das Wort -- dort ist Platz, und ein Wort ist
|
||||
|
||||
Reference in New Issue
Block a user