DogFatherGitandClaude Opus 5
1894395d8f
Die "Letzten Ereignisse" im Personen-Bereich fuellten mit 25 Zeilen die
halbe Seite, obwohl sie Nachschlagewerk sind und kein Startbild. Jetzt
stehen nur die vier neuesten da, der Rest kommt auf Knopfdruck.
Der Knopf sagt, was er TUT ("Alle 25 zeigen" / "Nur die letzten 4") und
nennt die Zahl, damit man weiss, was dahintersteckt. Bei hoechstens vier
Eintraegen bleibt er ganz weg -- ein Knopf, der nichts verbirgt, verwirrt
nur. Der Pfeil dreht sich, aria-expanded stimmt.
Gemeinsamer Helfer in kopf.js statt zweimal derselbe Block: Dieselbe
Liste gab es auf der Automationen-Seite ("Zuletzt automatisch passiert"),
die verhaelt sich jetzt genauso. Zugeklappt wird per CSS
([data-klapp="zu"]) statt durch Entfernen von Zeilen -- das Aufklappen
braucht so weder Neuaufbau noch zweite Abfrage.
Der Zuhoerer wird nur einmal gesetzt (die Listen werden bei jeder
Aktualisierung neu aufgebaut), und die Anzahl wird bei jedem Umschalten
frisch gelesen statt in der Fassung des ersten Durchlaufs festzuhaengen.
Geprueft: beide Seiten, Computer und Handy, zweimaliges Hin- und
Herklappen, Gegenprobe mit drei Eintraegen -- server/pruef-protokoll-klappe.mjs
Co-Authored-By: Claude Opus 5 <[email protected]>
142 lines
5.5 KiB
HTML
142 lines
5.5 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>Aufgaben · 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=202608311327" />
|
|
<link rel="stylesheet" href="assets/css/start.css?v=202608311327" />
|
|
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311327" />
|
|
</head>
|
|
|
|
<body class="start">
|
|
|
|
<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"><a class="zurueck" href="start.html">Creator Workspace</a> · Aufgaben</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">Aufgaben</p>
|
|
<h1 class="titel">Offen. In Arbeit. Review. Erledigt.</h1>
|
|
</div>
|
|
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neue Aufgabe</button>
|
|
</section>
|
|
|
|
<!-- Formular zum Anlegen. Standardmäßig zu, damit das Brett im Vordergrund
|
|
steht und die Seite nicht mit einem Formular begrüßt. -->
|
|
<form class="neu" id="neu" hidden>
|
|
<div class="neu__zeile">
|
|
<label class="feld-schild" for="f-titel">Titel</label>
|
|
<input id="f-titel" name="titel" maxlength="160" placeholder="Was ist zu tun?" required />
|
|
</div>
|
|
<div class="neu__zeile">
|
|
<label class="feld-schild" for="f-text">Beschreibung <span class="leise">(optional)</span></label>
|
|
<textarea id="f-text" name="beschreibung" rows="3" maxlength="4000"
|
|
placeholder="Worum geht es genau?"></textarea>
|
|
</div>
|
|
<div class="neu__raster">
|
|
<div>
|
|
<label class="feld-schild" for="f-prio">Priorität</label>
|
|
<select id="f-prio" name="prioritaet">
|
|
<option value="hoch">hoch</option>
|
|
<option value="mittel" selected>mittel</option>
|
|
<option value="niedrig">niedrig</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="feld-schild" for="f-frist">Frist <span class="leise">(optional)</span></label>
|
|
<input id="f-frist" name="frist" type="date" />
|
|
</div>
|
|
<div id="feld-creator" hidden>
|
|
<label class="feld-schild" for="f-creator">Bereich von</label>
|
|
<select id="f-creator" name="creator_id"><option value="">—</option></select>
|
|
</div>
|
|
<div id="feld-verant" hidden>
|
|
<label class="feld-schild" for="f-verant">Verantwortlich</label>
|
|
<select id="f-verant" name="verantwortlich_id"><option value="">—</option></select>
|
|
</div>
|
|
</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">Anlegen</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="brett" id="brett" aria-busy="true">
|
|
<p class="leise" id="laedt">Aufgaben werden geladen …</p>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Bearbeiten. Als natives <dialog>: bringt Fokusfang, Schließen mit Esc
|
|
und die Abdunklung des Hintergrunds ohne eigenen Code mit. -->
|
|
<dialog class="dialog" id="bearbeiten-dialog">
|
|
<form method="dialog" id="bearbeiten" class="neu neu--blank">
|
|
<h2 class="dialog__titel">Aufgabe bearbeiten</h2>
|
|
|
|
<div class="neu__zeile">
|
|
<label class="feld-schild" for="b-titel">Titel</label>
|
|
<input id="b-titel" maxlength="160" required />
|
|
</div>
|
|
<div class="neu__zeile">
|
|
<label class="feld-schild" for="b-text">Beschreibung</label>
|
|
<textarea id="b-text" rows="3" maxlength="4000"></textarea>
|
|
</div>
|
|
<div class="neu__raster">
|
|
<div>
|
|
<label class="feld-schild" for="b-prio">Priorität</label>
|
|
<select id="b-prio">
|
|
<option value="hoch">hoch</option>
|
|
<option value="mittel">mittel</option>
|
|
<option value="niedrig">niedrig</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="feld-schild" for="b-frist">Frist</label>
|
|
<input id="b-frist" type="date" />
|
|
</div>
|
|
<div id="b-feld-creator" hidden>
|
|
<label class="feld-schild" for="b-creator">Bereich von</label>
|
|
<select id="b-creator"><option value="">—</option></select>
|
|
</div>
|
|
<div id="b-feld-verant" hidden>
|
|
<label class="feld-schild" for="b-verant">Verantwortlich</label>
|
|
<select id="b-verant"><option value="">—</option></select>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="fehler" id="b-fehler" role="alert" aria-live="polite"></p>
|
|
|
|
<div class="dialog__knoepfe">
|
|
<button type="button" class="knopf knopf--klein" id="b-speichern">Speichern</button>
|
|
<button type="button" class="abmelden" id="b-abbrechen">Abbrechen</button>
|
|
<button type="button" class="abmelden abmelden--warnung" id="b-loeschen" hidden>Löschen</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script src="assets/js/wahl.js?v=202608311327" defer></script>
|
|
<script src="assets/js/kopf.js?v=202608311327" defer></script>
|
|
<script src="assets/js/aufgaben.js?v=202608311327" defer></script>
|
|
</body>
|
|
</html>
|