Files
dogfather-universe/workspace/bereich.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

131 lines
5.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Bereich · 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/bereich.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>
<!-- Der innere span.marke__text fehlte hier als einziger Seite. Damit
griffen weder die Überlauf-Kürzung noch der Rang im Schriftzug --
aufgefallen erst, als die Seitenprüfung die Marke auf allen
dreizehn Seiten nachgesehen hat. -->
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> ·
<span id="marke-bereich">…</span></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" id="ober">Betreuung</p>
<h1 class="titel" id="titel">…</h1>
<p class="unterzeile" id="unterzeile"></p>
</div>
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neuer Eintrag</button>
</section>
<form class="neu" id="neu" hidden>
<div class="neu__raster">
<div>
<label class="feld-schild" for="f-art">Art</label>
<select id="f-art"></select>
</div>
<div>
<label class="feld-schild" for="f-datum">Datum</label>
<input id="f-datum" type="date" />
</div>
<div id="feld-dringlich" hidden>
<label class="feld-schild" for="f-dringlich">Dringlichkeit</label>
<select id="f-dringlich">
<option value="hoch">hoch</option>
<option value="mittel" selected>mittel</option>
<option value="niedrig">niedrig</option>
</select>
</div>
<div id="feld-bewertung" hidden>
<label class="feld-schild" for="f-bewertung">Bewertung (1–5)</label>
<select id="f-bewertung">
<option value="">—</option>
<option value="1">1 – schwach</option>
<option value="2">2</option>
<option value="3">3 – solide</option>
<option value="4">4</option>
<option value="5">5 – stark</option>
</select>
</div>
<div id="feld-creator" hidden>
<label class="feld-schild" for="f-creator">Creator</label>
<select id="f-creator"><option value="">—</option></select>
</div>
</div>
<div class="neu__zeile">
<label class="feld-schild" for="f-titel">Überschrift</label>
<input id="f-titel" maxlength="160" required />
</div>
<div class="neu__zeile">
<label class="feld-schild" for="f-text">Text <span class="leise">(optional)</span></label>
<textarea id="f-text" rows="4" maxlength="6000"></textarea>
</div>
<p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
<div class="neu__knoepfe">
<button type="submit" class="knopf knopf--klein" id="neu-speichern">Eintragen</button>
<button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
</div>
</form>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<div class="filter" id="filter"></div>
<!-- Fertige Punkte zum Uebernehmen -- nur in Bereichen, fuer die es
welche gibt (derzeit LIVE-Analyse). -->
<!-- Unterweisungen mit beidseitiger Bestaetigung. Nur im Bereich
"Schutz & Regeln" -- dort gehoeren Richtlinien hin. -->
<div id="schulung" hidden></div>
<div id="vorlagen" hidden></div>
<div id="liste" aria-busy="true"><p class="leise">Einträge werden geladen …</p></div>
</main>
<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/checkliste.js?v=202609070141" defer></script>
<script src="assets/js/ampel.js?v=202609070141" defer></script>
<script src="assets/js/schulung.js?v=202609070141" defer></script>
<script src="assets/js/vorlagen.js?v=202609070141" defer></script>
<script src="assets/js/bereich.js?v=202609070141" defer></script>
</body>
</html>