DogFatherGitandClaude Opus 5
44b3290bc5
BEFUND. Der Gesamtlauf war nach dem Bildumbau bei SIEBZEHN Dateien rot,
pruef-handy allein mit 37 Fehlern. Alle mit derselben Meldung:
"ueber=126px". Eine Ursache, siebzehnfach gezaehlt.
Sie war meine. Um den Layout-Sprung bei 1280 px zu beheben, hatte ich
den Umbruch der aeusseren Leiste wieder auf "nur unter 380 px" gestellt
-- und damit bei 390 und 412 px genau das Loch aufgerissen, das ich
Stunden vorher geschlossen hatte. Dieselbe feste Schwelle von 380, ueber
die zwei Commits vorher eine Regel in CLAUDE.md gewandert ist.
DREI ANLAEUFE, und die ersten beiden waren Symptomkur:
1. `flex: 0 0 auto` fuer die Bedienelemente -> 126 px Ueberstand bei
412 px (sie koennen weder schrumpfen noch umbrechen).
2. Hoher Schrumpf-Faktor am Schriftzug (220 gegen 1) -> besser, aber
von 19 fehlenden Pixeln nahmen die Knoepfe 0,19, und die runden auf
1 auf. Ein Pixel, und die Gruppe brach um. Ich habe daraufhin die
Abstaende verkleinert; danach war es wieder genau ein Pixel. Wer an
einem Rundungsfehler schraubt, hat die falsche Stellschraube.
3. RICHTIG: dem Schriftzug gar keine Wunschbreite geben.
`flex: 1 1 0` heisst "ich beanspruche nichts und nehme, was uebrig
bleibt". Damit entsteht ueberhaupt kein Fehlbetrag, der verteilt
werden muesste. Kein Schrumpf-Faktor, keine Schwelle, nichts zu
runden. Dazu `max-width: max-content`, sonst zieht `flex-grow` die
Marken-Pille ueber die ganze Leiste (990 statt 375 px) -- wovor der
Kommentar zwei Zeilen darueber ausdruecklich warnt und was ich beim
Umbau uebergangen habe.
Gemessen ueber neun Breiten: 1920 bis 768 einzeilig (71 px), 412 und 390
zweizeilig (127), 320 dreizeilig (167). Ueberstand ueberall null. Und der
Layout-Sprung von 0,94 ist damit auch weg -- er kam aus derselben Ecke.
Dabei drei weitere echte Fehler gefunden, alle in Neuem von heute:
* Der Namenslink in der Fruehwarnung war 22x25 px -- unter dem
Mindestmass von 24x24 (WCAG 2.5.8). Bei kurzen Namen trifft man
daneben. Jetzt ein echtes Fingerziel mit negativem Aussenabstand, der
die Polsterung optisch wieder aufhebt.
* Die Warnkarten standen bei 320 px 9 px aus dem Bild:
`minmax(320px, 1fr)` begrenzt die Spalte, nicht ihren Inhalt. Erst
`min(320px, 100%)` PLUS `min-width: 0` PLUS umbrechender Kopf loesen
es -- einzeln keines davon. Die Schreibweise stand zwei Abschnitte
weiter oben laengst richtig da.
* Der Zurueck-Link im Schriftzug ragte aus seinem Kasten:
`overflow: hidden` schneidet nur die ANZEIGE ab, der Link behaelt
seine Layoutbreite. Bei 768 px lag sein Mittelpunkt unter den
Bedienelementen -- ein Klick dorthin traf das Falsche, auf 17 von 18
Seiten, und zu sehen war davon nichts.
Co-Authored-By: Claude Opus 5 <[email protected]>
92 lines
3.7 KiB
HTML
92 lines
3.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>Dashboard · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070044" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609070044" />
|
||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609070044" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<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> · Dashboard</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 inhalt--breit">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Alles zentral</p>
|
||
<h1 class="titel" id="titel">Dashboard</h1>
|
||
<p class="unterzeile" id="unterzeile">
|
||
Eine Karte je Creator – mit einem Blick sehen, wo es hakt und wo es läuft.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- FRÜHWARNUNG (06.09.2026).
|
||
|
||
Steht GANZ OBEN, noch vor den Summen. Die Summen beantworten "wie
|
||
steht es insgesamt", die Karten "wie steht es bei jedem" – aber
|
||
die Frage, mit der ein Betreuer morgens ankommt, ist eine dritte:
|
||
"wo muss ich HEUTE hin?" Sie stand bis jetzt nirgends.
|
||
|
||
Bewusst OHNE Punktzahl. Ein Wert wie "Abwanderungsrisiko 73"
|
||
klingt nach Wissenschaft und ist eine Behauptung: Man kann ihn
|
||
nicht prüfen, nicht widersprechen und nicht erklären. Hier stehen
|
||
stattdessen die einzelnen Beobachtungen im Klartext, jede mit
|
||
ihrem Beleg – dann entscheidet ein Mensch.
|
||
|
||
Ein Creator sieht diesen Block nie (der Server liefert ihm gar
|
||
keine Daten). Zu lesen, dass ein System einen für gefährdet hält,
|
||
ist keine Mitteilung an die betroffene Person. -->
|
||
<section class="warnblock" id="fruehwarnung" hidden aria-labelledby="warn-titel">
|
||
<div class="klapp-kopf">
|
||
<h2 class="feldschild" id="warn-titel">Wo ich diese Woche nachfassen würde</h2>
|
||
</div>
|
||
<div class="warnliste" id="warnliste"></div>
|
||
</section>
|
||
|
||
<!-- Summen über alle sichtbaren Creator. Steht oben, weil die Frage
|
||
"wie steht es insgesamt" vor der Frage "bei wem" kommt. -->
|
||
<section class="summen" id="summen" hidden></section>
|
||
|
||
<div id="liste" aria-busy="true"><p class="leise">Übersicht wird geladen …</p></div>
|
||
|
||
<p class="stand" id="stand" hidden></p>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/bereiche.js?v=202609070044" defer></script>
|
||
|
||
<script src="assets/js/kopf.js?v=202609070044" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609070044" defer></script>
|
||
<script src="assets/js/uebersicht.js?v=202609070044" defer></script>
|
||
</body>
|
||
</html>
|