DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die Kopfleiste bleibt auch in einer fremden Sicht in EINER Reihe

Browse Source 
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:
DogFatherGit
2026-09-09 19:44:25 +02:00
co-authored by Claude Opus 5
parent d0ac8ee8d1
commit 6c48579f66
28 changed files with 664 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/kopf.js
+85
View File
@@ -1217,6 +1217,41 @@
und haelt das fuer den Bestand. */
if (aktiv) {
feld.dataset.fremd = 'ja';
/* ---- WESSEN SICHT: FARBE UND ANFANGSBUCHSTABE (09.09.2026) ----
Filipe, mit Bildschirmfoto aus der App: "es ist noch nicht alles
in einer zeile."
Gemessen war der Grund NICHT die Breite seines Geraets, sondern
der Zustand: In der eigenen Sicht klappt der Umschalter auf
36 px zusammen, in einer fremden bleibt er mit dem Namen darin
152 px breit. Das sind 116 px mehr, und die passen auf KEINER
Handybreite mehr in die Reihe -- auch nicht auf 430 px.
Meine bisherigen Pruefungen liefen alle in der eigenen Sicht und
haben deshalb nie etwas gefunden. Sie haben einen Zustand
gemessen, in dem der Nutzer gar nicht war.
Der Name wandert deshalb aus der Leiste in ein eigenes Band
darunter (siehe unten). Im Knopf bleiben zwei Dinge, die
zusammen weniger als ein Viertel des Platzes brauchen und mehr
sagen als ein abgeschnittenes "Miesmus...": die FARBE der Rolle
und der ANFANGSBUCHSTABE des Namens.
Die Farbe kommt aus `data-rolle` -- dieselbe Zuordnung, die
gate.css ohnehin fuer jede Rolle hat. Keine zweite Liste; im
Haus ist genau die schon mehrfach auseinandergelaufen. */
const wen = personen.find((p) => p.id === aktiv);
if (wen?.rolle) feld.dataset.rolle = wen.rolle;
const name = (wen?.name || '').trim();
const kuerzel = el('span', 'sicht__kuerzel', (name.charAt(0) || '?').toUpperCase());
/* Fuer ein Vorleseprogramm steht der ganze Name im Band darunter
und im Auswahlfeld -- ein einzelner Buchstabe waere dort nur
Rauschen. */
kuerzel.setAttribute('aria-hidden', 'true');
auge.after(kuerzel);
/* EIN KREUZ STATT "zurueck zu mir". Der Satz brauchte mehr Platz
als der Name daneben, und was ein Kreuz an einer aktiven
Auswahl tut, weiss jeder. Die Worte bleiben im aria-label. */
@@ -1232,9 +1267,59 @@
zurueck.addEventListener('click', () => { schreiben(0); location.reload(); });
feld.append(zurueck);
document.body.dataset.fremdeSicht = 'ja';
/* ---- DAS BAND UNTER DER LEISTE --------------------------------
Es traegt, was aus der Leiste weichen musste: den vollen Namen
und den Weg zurueck -- beides in Worten statt als Kreuz. Auf dem
Handy ist es die einzige Stelle, an der der Name steht, und es
steht dort GANZ, nicht als "Miesmus...".
Es gehoert nicht in die Kopfleiste, sondern darunter: In der
Leiste waere es die zweite Zeile, die weg soll. Als eigenes
Band ist es eine Meldung zur Lage, kein Bedienelement mehr --
und es scrollt mit, waehrend der Rahmen um die Seite als
staendiges Zeichen bleibt.
Auf dem Rechner ist es ueberfluessig, dort steht der Name im
Umschalter selbst. Das entscheidet das CSS an einer Stelle. */
const band = el('div', 'fremd-band');
band.id = 'fremd-band';
if (wen?.rolle) band.dataset.rolle = wen.rolle;
band.setAttribute('role', 'status');
const bandAuge = auge.cloneNode(true);
bandAuge.setAttribute('class', 'fremd-band__auge');
band.append(bandAuge);
const satz = el('p', 'fremd-band__text');
satz.append(document.createTextNode('Du siehst gerade die Sicht von '));
satz.append(el('strong', 'fremd-band__name', name || 'jemand anderem'));
band.append(satz);
const raus = el('button', 'fremd-band__weg', 'Zurück zu meiner Sicht');
raus.type = 'button';
raus.addEventListener('click', () => { schreiben(0); location.reload(); });
band.append(raus);
const leiste = document.querySelector('.kopfleiste');
if (leiste) leiste.after(band);
else document.body.prepend(band);
}
kopf.prepend(feld);
/* DER RAHMEN UM DIE SEITE NIMMT DIESELBE FARBE AN.
Der Wert wird aus dem fertigen Element GELESEN, nicht in
Javascript nachgeschlagen -- sonst stuende hier eine zweite Liste
mit Rollenfarben neben der in gate.css, und beim naechsten
Farbwechsel bliebe eine davon stehen. Erst nach dem Einhaengen,
vorher hat das Element noch keinen berechneten Stil. */
if (aktiv) {
const ton = getComputedStyle(feld).getPropertyValue('--rolle-haupt').trim();
if (ton) document.body.style.setProperty('--fremd-ton', ton);
}
};
/* An werZeigen anhaengen: Jede Seite ruft es ohnehin auf, sobald sie