DogFatherGit
7c81b17f9c
Filipe: "die kisten wo die namen drin stehen um auszuwaehlen -- kannst du doch ueberall besser aussehen lassen". Betraf nicht eine Stelle, sondern 28 Auswahlfelder auf zehn Seiten. Deshalb EIN Baustein (assets/js/wahl.js) statt zehn Einzelloesungen. WIE ER ARBEITET: Das echte <select> bleibt im Dokument und behaelt seinen Wert -- es wird nur unsichtbar. Darueber liegt ein eigener Knopf mit eigener Liste. Damit funktioniert alles weiter, was schon da war: jedes `feld.value`, jedes `change`-Ereignis, jedes Formular. Ich musste keine einzige der zehn Seiten in ihrer Logik anfassen. Faellt das Skript aus, ist wieder das gewohnte Systemmenue da. DREI ENTSCHEIDUNGEN, DIE WICHTIG WAREN: 1. Nicht display:none fuer das echte Feld, sondern ein Pixel und durchsichtig. Ein per display:none verstecktes Feld faellt aus der Formularpruefung des Browsers heraus -- `required` wuerde stumm nicht mehr greifen. 2. Die Liste haengt an position:fixed, nicht am Elternelement. In einer Karte mit overflow:hidden waere sie sonst abgeschnitten. Passt sie nach unten nicht mehr hin, klappt sie nach oben. 3. Ein MutationObserver erfasst Felder, die erst spaeter entstehen, und Eintraege, die nachgeladen werden. Neu gezeichnet wird im naechsten Bild -- so wird ein direkt nach dem Fuellen gesetztes `feld.value` noch mitgenommen. Geprueft an der Scout-Pipeline: Prioritaet und Stufe entstehen erst beim Aufklappen, beide werden aufgewertet, der gewaehlte Wert kommt beim Speichern richtig an. Tastatur wie gewohnt: Pfeile oeffnen und blaettern, Buchstaben springen zum passenden Eintrag, Esc schliesst, Klick daneben auch. Gruppen (optgroup) werden als Zwischenueberschrift dargestellt. Geprueft ueber zehn Seiten: 28 Felder, KEINES mehr als Systemmenue, Werte kommen an, Seite reagiert auf die Auswahl, Handy ohne Ueberlauf, 0 Konsolenfehler.
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=202608311222" />
|
|
<link rel="stylesheet" href="assets/css/start.css?v=202608311222" />
|
|
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311222" />
|
|
</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=202608311222" defer></script>
|
|
<script src="assets/js/kopf.js?v=202608311222" defer></script>
|
|
<script src="assets/js/aufgaben.js?v=202608311222" defer></script>
|
|
</body>
|
|
</html>
|