DogFatherGitandClaude Opus 5
af4a00dce2
DIE LEISTE BLEIBT JETZT OBEN (screen 3)
Filipe: "diese leiste soll immer da stehen bleiben, egal ob man die
seite runterscrollt oder nicht, auf allen seiten."
In start.css steht seit jeher `.kopfleiste { position: sticky; top: 0 }`.
Zwanzig Zeilen darueber steht aber
body.start > .kopfleiste { position: relative; z-index: 1; }
und das ist (0,2,1) gegen (0,1,0) -- die staerkere Regel gewinnt,
unabhaengig von der Reihenfolge. Gemessen im Browser: `position:
relative`, und bei 600 px Scrollen wanderte die Leiste 600 px aus dem
Bild. Sie hat also nie geklebt, obwohl es im Code so dasteht.
Das ist heute die VIERTE Spielart derselben Falle: `:where()` zu
schwach, `body.start .willkommen` zu stark, die Kachel-Verschachtelung
zu stark -- und hier eine Regel, die etwas ganz anderes wollte (den
Stapelwert ueber der Buehne) und dabei die Positionierung mitgenommen
hat. Merksatz: Wer `position` setzt, nur um `z-index` zu bekommen,
greift jedes Mal daneben.
Nachgemessen: 700 px gescrollt, Leiste steht bei 0.
DAS CALL-BRETT: DREI TAFELN STATT ZWEIER SPALTEN (screen 2)
Filipe: "das bewegt sich immer noch mit, das ist so scheissen."
DAS PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung. Zwei Spalten, und
"Steht an" hatte siebenundzwanzig Karten: Die rechte Spalte lief ueber
mehrere Bildschirmhoehen, die linke war nach zwei Koepfen zu Ende. Wer
scrollt, sieht dann eine leere halbe Seite mit einer Ueberschrift, die
scheinbar mitwandert -- sie steht bloss still, waehrend daneben alles
laeuft.
Jetzt bekommt jede Tafel DIESELBE Hoehe und einen EIGENEN Lauf. Alle
drei Gruppen sind damit immer gleichzeitig zu sehen, egal wie viel in
einer steckt, und die Seite selbst scrollt kaum noch. Das ist die
Bauart jedes Aufgabenbretts, und sie ist es aus genau diesem Grund.
Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer festen
Zahl. Unter 900 px stehen die Tafeln untereinander und laufen wieder
frei -- auf dem Handy ist ein Kaestchen mit eigenem Balken eine Falle,
keine Hilfe. Der Balken ist selbst gestaltet; der Systembalken reisst
ein weisses Band in eine dunkle Flaeche.
NOCH OFFEN aus derselben Nachricht: der Erinnerungswecker fuer Termine
(ein-/ausschaltbar je Eintrag, mehrere Zeitpunkte, von jedem selbst
einstellbar) -- dazu will Filipe ausdruecklich Recherche, und der baut
sich nicht nebenbei.
Zehn Pruefungen gelaufen, alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
158 lines
7.0 KiB
HTML
158 lines
7.0 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>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=202609071817" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071817" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609071817" />
|
||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609071817" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071817" />
|
||
</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 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" id="schild-datum">Datum</label>
|
||
<input id="f-datum" type="date" />
|
||
</div>
|
||
<!-- Nur bei Agentur-Events: das Ende des Zeitraums. Der Beginn ist
|
||
das Feld darueber -- ein zweites Datumsfeld daneben liest sich
|
||
als Spanne, ein Feld "Zeitraum" mit Text darin nicht. -->
|
||
<div id="feld-ende" hidden>
|
||
<label class="feld-schild" for="f-ende">Bis</label>
|
||
<input id="f-ende" 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" id="schild-creator">Creator</label>
|
||
<select id="f-creator"><option value="">—</option></select>
|
||
<p class="feld-hinweis" id="hinweis-creator" hidden></p>
|
||
</div>
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-titel" id="schild-titel">Überschrift</label>
|
||
<input id="f-titel" maxlength="160" required />
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-text" id="schild-text">Text <span class="leise">(optional)</span></label>
|
||
<textarea id="f-text" rows="4" maxlength="6000"></textarea>
|
||
</div>
|
||
<!-- ==== Nur bei Agentur-Events ====================================
|
||
Zwei Felder, die den Unterschied zwischen einem Aufruf und einer
|
||
Aktion ausmachen, an der jemand teilnehmen kann: WAS ist zu tun
|
||
(und was springt dabei heraus) und WAS GILT dabei. Beides stand
|
||
bisher irgendwo im Fliesstext oder gar nicht -- und jede
|
||
Rueckfrage dazu kostet eine Nachricht. -->
|
||
<div class="neu__zeile" id="feld-aufgaben" hidden>
|
||
<label class="feld-schild" for="f-aufgaben">Aufgaben
|
||
<span class="leise">– womit sammelt man Punkte, was gibt es zu gewinnen</span></label>
|
||
<textarea id="f-aufgaben" rows="5" maxlength="6000"
|
||
placeholder="z. B. · 1 Punkt je Live-Stunde · 3 Punkte je neuem Abo · Platz 1 gewinnt …"></textarea>
|
||
</div>
|
||
<div class="neu__zeile" id="feld-regeln" hidden>
|
||
<label class="feld-schild" for="f-regeln">Regeln
|
||
<span class="leise">– was zählt, was nicht, bis wann</span></label>
|
||
<textarea id="f-regeln" rows="5" maxlength="6000"
|
||
placeholder="z. B. · Nur Streams auf dem eigenen Konto · Punkte zählen bis 23:59 am letzten Tag"></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=202609071817" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609071817" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071817" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609071817" defer></script>
|
||
<script src="assets/js/checkliste.js?v=202609071817" defer></script>
|
||
<script src="assets/js/ampel.js?v=202609071817" defer></script>
|
||
<script src="assets/js/schulung.js?v=202609071817" defer></script>
|
||
<script src="assets/js/vorlagen.js?v=202609071817" defer></script>
|
||
<script src="assets/js/bereich.js?v=202609071817" defer></script>
|
||
</body>
|
||
</html>
|