DogFatherGit
a9e0834cfb
Filipe, 28.09.2026: "ich will auch nicht dass man sachen nach links
und rechts schieben muss. perfektion das untereinander. ich will
niemals irgendwas nach links oder rechts swippen muessen." Dazu ein
Bildschirmfoto der Tafel "Gestaltung" mit waagerechter Rollleiste.
GEMESSEN, NICHT GERATEN
Ein grep nach `overflow-x` findet nur die absichtlichen Roller. Er
findet nicht die Stelle, an der ein Inhalt breiter ist als sein
Kasten und der Browser von sich aus eine Rollleiste anhaengt -- und
genau das war auf dem Bild zu sehen. `server/mess-quer.mjs` geht
deshalb im echten Browser jedes Element durch, auf fuenf
Bildschirmgroessen, in allen sieben Registern, bei offener und
zugeklappter Regie und in allen fuenf Anordnungen.
Erster Lauf: 78 Stellen. Davon waren 54 KEINE -- `overflow-x: hidden`
ist abgeschnittener Text, dort laesst sich nichts schieben. Die
Messung trennt das jetzt; wer es mitzaehlt, findet die echten nicht
mehr. Uebrig blieben vier Ursachen:
1. DIE REGISTER rollten absichtlich waagerecht. Auf 412 px standen
von 605 px Registern 193 rechts ausserhalb -- dass es
"Gestaltung" und "Spenden" gibt, erfuhr man nur beim Wischen auf
Verdacht. Sie brechen jetzt um. Das kostet oben rund 45 Pixel
und bringt Gewissheit dafuer.
2. `.stufen` STAND ZWEIMAL IN reaktion.css -- einmal fuer die
Stufenleiter der Spenden (`display: grid`), 600 Zeilen spaeter
fuer die Chat-Leiste Offen/Team/Zu (`display: flex`). Die
spaetere gewinnt: Die Stufenleiter stellte ihre drei Stufen
NEBENEINANDER, 572 Pixel in einer 327 Pixel schmalen Spalte.
Das ist die Rollleiste auf Filipes Bild. Die Chat-Leiste heisst
jetzt `.chatstufen` / `.chatstufe`.
Dritter Fall dieser Art nach `.tafel` und `.stufe-knopf`.
3. DIE TAFELN KONNTEN NICHT SCHRUMPFEN. Ein Gitterfeld hat von
sich aus `min-width: auto` und besteht auf seinem unteilbarsten
Inhalt. Mit `minmax(0, 1fr)` und `min-width: 0` bricht jetzt
alles um, statt hinauszulaufen.
4. DIE TRANSPORTLEISTE ragte am Handy 76 Pixel ueber beide Kanten
("Naechstes" war nur halb zu sehen). Zwei Gruende: `.transport__teil`
hatte kein `flex-wrap` (die mittlere Gruppe schon -- zwei Regeln
fuer dieselbe Sache, eine vergessen), und im Umschalter steht
ein ganzer Videotitel, der als Flex-Kind auf seiner vollen
Breite bestand.
NEBENBEFUND: EINE FESTE ZAHL VON GESTERN
Der Saal stand auf `height: calc(100dvh - 69px)` -- 69 war einmal
die gemessene Hoehe der Kopfleiste. Sie ist 73 geworden, und der
Saal endete damit 4 Pixel unter dem Fensterrand: Der Play-Knopf war
nur mit Scrollen zu erreichen. Die Antwort ist keine neue Zahl,
sondern eine Regel, die misst -- der Koerper ist jetzt eine Spalte,
die Kopfleiste nimmt, was sie braucht, der Saal bekommt den Rest.
(Dabei noch ein Spezifitaetsunfall: `.reaktion-seite` (0,1,0)
verliert gegen `body.start` (0,1,1) aus start.css.)
NEUE WACHEN
- `mess-quer.mjs` mit Gegenprobe (ohne die Reparaturen findet sie
47 px, mit ihnen nichts).
- pruef-reaktion: kein absichtliches `overflow-x: auto` mehr; und
zwei Grundregeln derselben Klasse mit verschiedenem `display`
sind ein Namensstreit. Der bisherige Waechter verglich nur
ZWISCHEN Stilvorlagen -- `.stufen` stand zweimal in DERSELBEN.
- pruef-css-klassen: jede Klammer hat ihr Gegenstueck. Beim
Umschreiben blieb heute das Ende einer Regel ohne ihren Anfang
stehen; der Browser wirft die Zeile weg und schliesst dafuer den
naechsten @media-Block zu frueh. Drei Befunde sahen daraufhin wie
Programmfehler aus.
MESSUNG NACHGEZOGEN
`mess-reaktion` stammte noch aus der Zeit vor "Regie links" und
"drei Kacheln" und meldete drei Dinge, die keine Fehler waren --
gemessen gegen den Stand von HEAD: identisch rot. Sie misst ausserdem
seit heute mit FINGER statt Mauszeiger; ohne `hasTouch` greift keine
einzige Regel aus `@media (pointer: coarse)`, und dort stehen alle
44-Pixel-Beruehrziele des Hauses.
OFFEN UND AUFGESCHRIEBEN
Am Handy bleibt bei offener Regie vom Bild nichts (0 px). Der Mangel
besteht seit dem Umbau "Regie links"; drei Versuche, ihn heute zu
loesen, haben Knoepfe verdeckt -- und ein verdeckter Knopf ist
schlimmer als ein kleines Bild. Die Versuche und der richtige Weg
(Tempo-Gruppe hinter einen Knopf, wie "Aa" im Chat) stehen in
reaktion.css. `mess-reaktion` meldet ihn als dritten Ausgang: nicht
als Fehler und nicht als bestanden.
GEPRUEFT
pruef-reaktion 384 / 0 (vorher 379)
pruef-spenden 172 / 0
pruef-buehne 36 / 0
pruef-css-klassen, -tippziele, -struktur, -handy: ohne Befund
mess-quer EXIT 0 -- 28 Stellen, fuenf Groessen, nichts rollt
mess-reaktion EXIT 0, 1 benannter offener Punkt
mess-buehne EXIT 0
166 lines
7.7 KiB
HTML
166 lines
7.7 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Mein Steckbrief · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609290232" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609290232" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609290232" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609290232" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609290232" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609290232" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609290232" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
|
||
genau diesen Dateinamen auf crew-haus.css um, und die Seite
|
||
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
|
||
ohne Umfaerben im Browser, ohne Flackern. -->
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609290232" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Mein Steckbrief</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Über mich</p>
|
||
<h1 class="titel">Mein Steckbrief</h1>
|
||
<p class="unterzeile">
|
||
Das hier gehört dir. Dein Bild steht danach in der Kopfleiste, in der
|
||
Personenliste und überall dort, wo dein Name auftaucht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Der eigene Steckbrief. Steht GANZ OBEN und über allem anderen: Er
|
||
gehört jedem im Workspace, nicht nur Creatorn – ein Scout, ein
|
||
Manager und DogFather haben ihn genauso. Die Creator-Akte darunter
|
||
ist etwas anderes (die führen die Betreuer). -->
|
||
<section class="steckbrief" id="steckbrief" hidden>
|
||
<div class="steckbrief__kopf">
|
||
<div class="steckbrief__bildfeld">
|
||
<span class="steckbrief__bild" id="sb-bild" aria-hidden="true"></span>
|
||
<div class="steckbrief__bildknoepfe">
|
||
<label class="schritt" for="sb-datei">Bild wählen</label>
|
||
<input type="file" id="sb-datei" accept="image/jpeg,image/png,image/webp" hidden />
|
||
<button type="button" class="schritt" id="sb-bild-weg" hidden>entfernen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="steckbrief__text">
|
||
<p class="feldschild">Mein Profil</p>
|
||
<h2 class="steckbrief__name" id="sb-name">…</h2>
|
||
<p class="steckbrief__rolle" id="sb-rolle"></p>
|
||
|
||
<label class="feld-schild" for="sb-ueber">Ein Satz über dich</label>
|
||
<textarea id="sb-ueber" rows="2" maxlength="400"
|
||
placeholder="z. B. Ich streame Gaming und Just Chatting, meistens abends."></textarea>
|
||
|
||
<p class="feldschild steckbrief__schild">Meine Kanäle</p>
|
||
<!-- Bewusst nur der öffentliche Name, kein Login: siehe die
|
||
Begründung im Kopf von server/workspace-steckbrief.js. -->
|
||
<div class="steckbrief__kanaele" id="sb-kanaele"></div>
|
||
|
||
<p class="fehler" id="sb-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="steckbrief__fuss">
|
||
<button type="button" class="knopf knopf--klein" id="sb-speichern">Profil speichern</button>
|
||
<span class="steckbrief__stand" id="sb-stand" role="status" aria-live="polite"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DAS TEAM. Wunsch vom 01.09.2026: "ich will, dass wir Manager,
|
||
Scouts, DogFather auch die Fotos, Namen und so alles sehen, alles
|
||
was die in ihrem Profil eintragen."
|
||
|
||
Bis dahin war der Steckbrief eine Einbahnstraße: Jeder pflegte
|
||
seinen, und niemand bekam ihn je zu Gesicht. Die Schnittstelle
|
||
dafür lag fertig da (GET /workspace/api/steckbrief) und wurde von
|
||
keiner einzigen Seite aufgerufen.
|
||
|
||
Wer wen sieht, entscheidet weiterhin der Server. -->
|
||
<!-- EIGENE KLASSEN, nicht die vorhandenen .block__* : Die stehen in
|
||
automation.css und wissen.css, und diese Seite lädt beide nicht.
|
||
Genau so sind hier schon zweimal Stile ins Leere gelaufen -- der
|
||
Aufbau sah richtig aus, auf dem Bildschirm stand nacktes HTML.
|
||
Alles zu .team-* steht in start.css, die jede Seite lädt. -->
|
||
<section class="team-block" id="team-block" hidden>
|
||
<div class="team-block__kopf">
|
||
<div>
|
||
<p class="feldschild">Das Team</p>
|
||
<!-- „Wer hier dabei ist" statt „Wer hier mitarbeitet" (19.09.2026).
|
||
Seit die Community einen Steckbrief hat, liest diesen Titel
|
||
auch jemand, der NICHT mitarbeitet — er schaut zu. Das Wort
|
||
hätte ihm gesagt, dass er hier eigentlich nicht gemeint ist. -->
|
||
<h2 class="team-block__titel">Wer hier dabei ist</h2>
|
||
</div>
|
||
<span class="team-block__zahl" id="team-zahl"></span>
|
||
</div>
|
||
<p class="team-block__text" id="team-text"></p>
|
||
<div class="team-gitter" id="team"></div>
|
||
</section>
|
||
|
||
|
||
<!-- ==== WAS IST ÜBER MICH GESPEICHERT? (15.09.2026) ==============
|
||
Art. 15 DSGVO. Kein Antrag, kein Formular, kein Warten – ein
|
||
Knopf. Er steht auf den beiden Seiten, die einem Menschen selbst
|
||
gehören: dem Steckbrief und den Rudel-Regeln. Die Community hat
|
||
keinen Steckbrief; ohne die zweite Stelle hätte ausgerechnet die
|
||
Gruppe mit den wenigsten Rechten auch diesen nicht. -->
|
||
<section class="meine-daten">
|
||
<div class="meine-daten__kopf">
|
||
<h2 class="meine-daten__titel">Was ist über mich gespeichert?</h2>
|
||
<button type="button" class="knopf-still" id="auskunft-knopf">Datei herunterladen</button>
|
||
</div>
|
||
<p class="meine-daten__satz">
|
||
Alles, was dieser Workspace über dich weiß, als Datei zum Mitnehmen.
|
||
Zugangsgeheimnisse sind nicht dabei, und wo andere Menschen vorkommen,
|
||
stehen sie nicht mit Namen darin – ihre Daten gehören ihnen.
|
||
</p>
|
||
<p class="leise" id="auskunft-stand" hidden></p>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/meldung.js?v=202609290232" defer></script>
|
||
<script src="assets/js/hochladen.js?v=202609290232" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609290232" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202609290232" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609290232" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609290232" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609290232" defer></script>
|
||
<script src="assets/js/auskunft.js?v=202609290232" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609290232" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609290232" defer></script>
|
||
</body>
|
||
</html>
|