DogFatherGitandClaude Opus 5
6996c5957d
DIE VERZOGENE FORMULARZEILE hatte drei Ursachen, nicht eine -- und jede einzelne haette gereicht, damit es schief aussieht: 1. Die Rasterregel galt nur fuer Kinder mit der Klasse .feld. Der Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch, bekamen von zwoelf Spalten je EINE und wurden nur so breit, wie ihr Inhalt sie zwang. Daher "Art" schmal und "Beginn" breit. 2. "Dauer (Minuten)" brach in der schmalen Spalte auf zwei Zeilen um -- und schob das Feld darunter tiefer als seine Nachbarn. Die Klammer ist jetzt ein leiser Zusatz, die Beschriftung hat feste Hoehe. 3. Die letzten drei Pixel: Mit grid-template-rows: 1fr auto bestimmte jedes Element die Zeilenhoehe selbst. Ein <select> mass sich 3 px kleiner als ein <input> und sass dadurch hoeher. Gemessen: Container beider Felder identisch (652+71), Eingabe aber 676..720 gegen 679..723. Drei Pixel klingen nach nichts und sind genau das, was man als "verzogen" sieht. Jetzt hat die Zeile feste Hoehe und das Feld fuellt sie ganz. Ergebnis, gemessen statt betrachtet: alle Felder 44 px hoch, alle 362 px breit, alle Unterkanten auf einer Linie. Auf dem Handy untereinander -- zwei Felder auf 300 px sind zwei Streifen, in die nichts hineinpasst. NEUE PRUEFUNG pruef-formulare.mjs. Sie prueft nicht "sieht gut aus", sondern misst: gleiche Hoehe, Unterkanten auf einer Linie, kein Feld absurd schmal, keine Beschriftung mehrzeilig -- auf fuenf Seiten und zwei Geraetegroessen. Zwei Messfehler darin selbst gefunden und behoben (Teilpixel-Rundung, und eine Ausgabe ueber mehrere Zeilen, die die Datei zerschossen hat). DIE SCOUT-PIPELINE ERKLAERT SICH JETZT SELBST. Vorher stand im leeren Zustand ein Satz, der nur wiederholte, was man ohnehin sieht: dass nichts da ist. Wer die Seite zum ersten Mal oeffnet, wusste danach weiterhin nicht, wofuer es sie gibt. Der leere Zustand ist der EINZIGE Moment, in dem jemand garantiert liest, was dort steht -- spaeter ist die Flaeche von Daten belegt. Deshalb steht die Erklaerung genau dort und nicht in einer Hilfe, die niemand aufmacht. Erklaert wird der NUTZEN, nicht die Bedienung: nicht "hier klicken", sondern warum ein Scout ohne diese Liste Leute verliert -- naemlich die Interessierten, bei denen drei Wochen nichts passiert ist, und nicht die, die Nein sagen. Dazu die fuenf Stufen mit je einem Satz, was sie bedeuten. Co-Authored-By: Claude Opus 5 <[email protected]>
156 lines
6.9 KiB
HTML
156 lines
6.9 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>Kalender · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#05070d" />
|
||
<link rel="icon" href="assets/img/favicon.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609011609" />
|
||
</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> · Kalender</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">
|
||
|
||
<!-- Der Zeitraum ist die Überschrift, nicht eine Beschriftung neben
|
||
Knöpfen: Man liest zuerst, WO man ist, und bewegt sich dann. -->
|
||
<section class="k-kopf">
|
||
<div class="k-kopf__titel">
|
||
<h1 class="k-zeitraum" id="zeitraum">…</h1>
|
||
<p class="k-kopf__unter" id="zeitraum-unter"></p>
|
||
</div>
|
||
<div class="k-nav">
|
||
<button type="button" class="knopf-still k-pfeil" id="zurueck-zeit" aria-label="Vorheriger Zeitraum">‹</button>
|
||
<button type="button" class="knopf-still" id="heute-knopf">Heute</button>
|
||
<button type="button" class="knopf-still k-pfeil" id="vor-zeit" aria-label="Nächster Zeitraum">›</button>
|
||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neuer Termin</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Zwei Reihen, die zwei VERSCHIEDENE Fragen beantworten – und deshalb
|
||
beschriftet sind:
|
||
"Als Nächstes" blickt ab heute nach vorn und ändert sich NICHT
|
||
beim Blättern
|
||
"Im September" beschreibt den Monat, den man gerade ansieht
|
||
Ohne Überschriften wären zwei gleich aussehende Reihen verwirrend. -->
|
||
<section class="k-leiste" id="saison-block" hidden>
|
||
<p class="feldschild">Als Nächstes</p>
|
||
<div class="k-anlassreihe" id="saison"></div>
|
||
</section>
|
||
|
||
<section class="k-leiste" id="monat-block" hidden>
|
||
<p class="feldschild" id="monat-titel">Im Monat</p>
|
||
<div class="k-anlassreihe" id="monatsanlaesse"></div>
|
||
</section>
|
||
|
||
<form class="neu" id="neu" hidden>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-titel">Worum geht es?</label>
|
||
<input id="f-titel" maxlength="160" placeholder="z. B. Wochen-Call mit Luna" required />
|
||
</div>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="f-art">Art</label>
|
||
<select id="f-art">
|
||
<option value="call" selected>Call</option>
|
||
<option value="termin">Termin</option>
|
||
<option value="review">Review</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-beginn">Beginn</label>
|
||
<input id="f-beginn" type="datetime-local" required />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-dauer">Dauer <span class="feld-schild__still">Minuten</span></label>
|
||
<input id="f-dauer" type="number" min="5" max="1440" step="5" value="30" />
|
||
</div>
|
||
<div id="feld-teilnehmer" hidden>
|
||
<label class="feld-schild" for="f-teilnehmer">Mit wem</label>
|
||
<select id="f-teilnehmer"><option value="">—</option></select>
|
||
</div>
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-ort">Ort oder Link <span class="leise">(optional)</span></label>
|
||
<input id="f-ort" maxlength="400" placeholder="Discord, Meet-Link, Adresse …" />
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-text">Notiz <span class="leise">(optional)</span></label>
|
||
<textarea id="f-text" rows="2" maxlength="4000"></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>
|
||
|
||
<!-- Vier Ansichten auf DENSELBEN Daten. Der Server liefert einen
|
||
Zeitraum, hier wird er nur unterschiedlich dargestellt – so kann
|
||
keine Ansicht etwas anderes zeigen als die andere. -->
|
||
<div class="k-werkzeuge">
|
||
<div class="k-ansichten" role="group" aria-label="Ansicht">
|
||
<button type="button" class="k-ansicht" data-ansicht="monat" aria-pressed="true">Monat</button>
|
||
<button type="button" class="k-ansicht" data-ansicht="woche" aria-pressed="false">Woche</button>
|
||
<button type="button" class="k-ansicht" data-ansicht="liste" aria-pressed="false">Liste</button>
|
||
<button type="button" class="k-ansicht" data-ansicht="zeitstrahl" aria-pressed="false">Zeitstrahl</button>
|
||
</div>
|
||
<div class="k-filter" id="filter"></div>
|
||
</div>
|
||
|
||
<div id="kalender" aria-busy="true"><p class="leise">Kalender wird geladen …</p></div>
|
||
|
||
<!-- Der Tagesdialog. Als echtes <dialog>: Esc schließt, der Tastaturfokus
|
||
bleibt drin, und der Rest der Seite ist für Vorleseprogramme still –
|
||
das alles bringt das Element mit, ohne dass es nachgebaut wird. -->
|
||
<dialog id="tagdialog" class="k-dialog" aria-labelledby="tagdialog-titel">
|
||
<div class="k-dialog__kopf">
|
||
<div>
|
||
<strong id="tagdialog-titel" class="k-dialog__titel">…</strong>
|
||
<span id="tagdialog-unter" class="k-dialog__unter"></span>
|
||
</div>
|
||
<button type="button" class="knopf-still" id="tagdialog-zu" aria-label="Schließen">✕</button>
|
||
</div>
|
||
<div id="tagdialog-anlaesse" class="k-dialog__anlaesse"></div>
|
||
<div id="tagdialog-liste" class="k-dialog__liste"></div>
|
||
<div class="k-dialog__fuss">
|
||
<button type="button" class="knopf knopf--klein" id="tagdialog-neu">Hier eintragen</button>
|
||
<span class="k-dialog__tipp">Esc schließt</span>
|
||
</div>
|
||
</dialog>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609011609" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609011609" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609011609" defer></script>
|
||
<script src="assets/js/kalender.js?v=202609011609" defer></script>
|
||
</body>
|
||
</html>
|