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.
64 lines
2.2 KiB
HTML
64 lines
2.2 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>Dogfather Universe · 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" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<header class="kopfleiste">
|
||
<p class="marke">Dogfather Universe · Creator Workspace</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">
|
||
<section class="willkommen">
|
||
<p class="marke">Angemeldet</p>
|
||
<h1 class="titel" id="gruss">Willkommen</h1>
|
||
<p class="unterzeile" id="rollentext">…</p>
|
||
</section>
|
||
|
||
<!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
|
||
zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
|
||
Bleibt komplett weg, wenn nichts anliegt. -->
|
||
<section class="dran" id="dran-block" hidden>
|
||
<p class="feldschild">Was ist dran</p>
|
||
<ul class="dran__liste" id="dran"></ul>
|
||
</section>
|
||
|
||
<!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof". -->
|
||
<section class="zahlen-block">
|
||
<p class="feldschild">Deine Aufgaben</p>
|
||
<ul class="zahlen" id="zahlen"></ul>
|
||
</section>
|
||
|
||
<!-- Bereiche aus dem Konzept. Was noch nicht gebaut ist, steht ehrlich
|
||
dran, statt Kacheln anzubieten, die ins Leere führen. -->
|
||
<section>
|
||
<p class="feldschild">Bereiche</p>
|
||
<ul class="bereiche" id="bereiche"></ul>
|
||
</section>
|
||
|
||
<p class="fuss">
|
||
„Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
|
||
schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
|
||
Angezeigt wird nur, was du ohnehin sehen darfst.
|
||
</p>
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202608311222" defer></script>
|
||
<script src="assets/js/kopf.js?v=202608311222" defer></script>
|
||
<script src="assets/js/start.js?v=202608311222" defer></script>
|
||
</body>
|
||
</html>
|