Files
dogfather-universe/workspace/report.html
T
DogFatherGitandClaude Opus 5 8107b97379 Die Kopfleiste wuchs beim Laden um vier Pixel -- und schob die Seite
Beim Messen des Datenvolumens nach dem Bildumbau fiel etwas anderes
auf: Der Layout-Sprung auf der Startseite lag bei 0,99. Die Bilder waren
es nicht -- ein Hintergrundbild liegt `position: fixed` und bewegt gar
nichts.

Die Meldung sagte es selbst, man musste nur hinsehen: ALLES sprang um
denselben Betrag (295->301, 144->150, 685->692, 605->611). Wenn die
ganze Seite gleichmaessig nach unten rutscht, waechst etwas ueber ihr.

Gemessen: Leiste vor dem Skript 67 px, danach 71. Der Sicht-Umschalter
kommt erst, wenn die Personenliste geladen ist, und ist mit 42 px das
hoechste Teil in der Reihe. Vier Pixel -- man sieht sie kaum und merkt
sie doch: Wer beim Laden schon zielt, klickt daneben.

Die Loesung ist keine reservierte Hoehe auf Verdacht, sondern die Hoehe,
die die Zeile ohnehin haben muss: `min-height: 44px`. Das ist das
Mindestmass fuer ein Fingerziel (WCAG 2.5.8) und gilt hier sowieso fuer
jedes Teil. Damit ist die Zeile immer so hoch wie ihr groesstes
zulaessiges Element -- unabhaengig davon, ob dieses gerade schon da ist
oder erst kommt.

Ergebnis: 0,99 auf 0,60, und die Zahl der Seiten ueber dem Zielwert von
zwoelf auf sechs. Datenvolumen unveraendert in Ordnung trotz der
groesseren Bilder -- der Browser holt je Seite nur eine Stufe.

Und der offene Punkt von vorhin ist geklaert: pruef-browser laeuft
gruen durch, alle vier Maschinen (Chromium, Firefox, WebKit, WebKit auf
dem iPhone), 64 Seitenaufrufe, 15898 Elemente. Der eine rote Punkt im
Gesamtlauf war eine Zeitueberschreitung unter Dauerlast -- erkennbar
daran, dass ZWEI Pruefungen gar nicht gelaufen waren und die Datei die
doppelte Zeit brauchte. Eine gesunkene Anzahl ist ein eigener Befund.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 01:46:29 +02:00

104 lines
4.2 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>Reports &amp; Review · 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=202609070141" />
<link rel="stylesheet" href="assets/css/start.css?v=202609070141" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070141" />
<link rel="stylesheet" href="assets/css/report.css?v=202609070141" />
</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&nbsp;Workspace</a> · Review</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">Reports</p>
<h1 class="titel">Review &amp; nächste Schritte</h1>
<p class="unterzeile" id="unterzeile">Fortschritt wird nicht gefühlt, sondern nachvollziehbar gemacht.</p>
</div>
<div class="steuerung">
<div id="creator-block" hidden>
<label class="feld-schild" for="f-creator">Creator</label>
<select id="f-creator"></select>
</div>
<div>
<label class="feld-schild" for="f-tage">Zeitraum</label>
<select id="f-tage">
<option value="7">7 Tage</option>
<option value="30" selected>30 Tage</option>
<option value="90">90 Tage</option>
</select>
</div>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<div id="bericht" aria-busy="true"><p class="leise">Report wird erstellt …</p></div>
<!-- Der Kern aus dem Konzept: Ein Review endet mit einer Entscheidung. -->
<section class="entscheidung" id="entscheidung-block" hidden>
<p class="marke">Abschluss</p>
<h2 class="entscheidung__titel">Was ist die Entscheidung?</h2>
<p class="entscheidung__text">
Ein Review endet nicht mit einer Zusammenfassung, sondern mit einem nächsten Schritt.
Was hier steht, wird sofort als Aufgabe mit hoher Priorität angelegt.
</p>
<form id="entscheidung">
<div class="entscheidung__raster">
<div>
<label class="feld-schild" for="e-titel">Nächster Schritt</label>
<input id="e-titel" maxlength="160" placeholder="z. B. Mikro-Problem bis Freitag lösen" required />
</div>
<div>
<label class="feld-schild" for="e-frist">Bis wann <span class="leise">(optional)</span></label>
<input id="e-frist" type="date" />
</div>
</div>
<p class="fehler" id="e-fehler" role="alert" aria-live="polite"></p>
<div class="neu__knoepfe">
<button type="submit" class="knopf knopf--klein" id="e-speichern">Als Aufgabe festhalten</button>
<span class="leise" id="e-stand"></span>
</div>
</form>
</section>
</main>
<script src="assets/js/ki.js?v=202609070141" defer></script>
<script src="assets/js/wahl.js?v=202609070141" defer></script>
<script src="assets/js/bereiche.js?v=202609070141" defer></script>
<script src="assets/js/kopf.js?v=202609070141" defer></script>
<script src="assets/js/glocke.js?v=202609070141" defer></script>
<script src="assets/js/report.js?v=202609070141" defer></script>
</body>
</html>