Claudian
b941080694
FILIPE, mit Bildschirmfoto der Personenauswahl: "wenn ich da scollen will geht das immer zu"
Er hatte recht, und es war eine einzige Zeile in workspace/assets/js/wahl.js:
addEventListener('scroll', schliessen, true);
Das dritte Argument bedeutet "in der Einfangphase lauschen" -- und damit auf JEDES
Scroll-Ereignis im ganzen Dokument, auch auf das in der Liste selbst. Wer die Namensliste
herunterrollen wollte, schloss sie im selben Moment. Bei acht Eintraegen faellt das kaum
auf; beim ganzen Manager- und Scout-Team ist die Liste unbedienbar.
Zumachen MUSS sie trotzdem, wenn die Seite scrollt: Sie haengt an position:fixed und
schwaemme sonst neben ihrem Knopf davon. Deshalb wird jetzt unterschieden, WO gescrollt
wurde -- ein Scroll-Ereignis der Seite hat document als Ziel, das ist nicht in der Liste
enthalten, also schliesst sie wie bisher.
Dazu overscroll-behavior: contain in gate.css. Ohne das reicht der Browser das Rollen am
Listenende an die Seite weiter, die Seite bewegt sich -- und daran schliesst die Liste zu
Recht. Der Fehler waere zur Haelfte zurueck gewesen.
GEPRUEFT im echten Browser am echten wahl.js und gate.css (pruef-wahl-scrollen.mjs, 7
Pruefungen), und zwar BEIDE Haelften der Zusage: Liste scrollt -> bleibt offen, Seite
scrollt -> geht zu. Eine Reparatur, die nur die eine Richtung sichert, waere die naechste
Ueberraschung.
Gegenprobe: alte Zeile testweise eingesetzt -> 2 Pruefungen fallen durch. Reparatur ->
alle 7 gruen.
Die Pruefung hat sich beim Bauen DREIMAL geweigert, etwas zu bestaetigen, das sie nicht
gemessen hatte -- "die Liste ist gar nicht laenger als ihr Fenster", "scrollTop = 0". Jedes
Mal lag es an meinem Aufbau (zu hohes Fenster, fehlende Stylesheets, Mausrad ohne Wirkung),
nie an der Reparatur. Gruen gemeldet haette sie es nie.
Der Versionsstempel muss mit: Cloudflare haelt JS und CSS vier Stunden im Browser fest.
Ohne neue Adresse saehe Filipe die Reparatur bis zu vier Stunden lang nicht.
HINWEIS ZUM COMMIT: In diesem Verzeichnis lag zum Zeitpunkt der Arbeit fremde,
uncommittete Arbeit -- vier Server-Dateien (heute 16:41-16:53 geaendert), sieben neue
Pruefdateien, ~110 Bildschirmfotos, eine Fokusring-Korrektur in gate.css und eine
Beschriftung in profil.html. Nichts davon ist hier drin. Bereitgestellt wurde ausdruecklich
nach Pfad, und die beiden Dateien mit gemischtem Inhalt (gate.css, profil.html) wurden dafuer
aus HEAD geholt und nur um den eigenen Anteil ergaenzt. Die fremde Arbeit steht unveraendert
im Arbeitsstand.
130 lines
5.7 KiB
HTML
130 lines
5.7 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>Personen & Zugänge · 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=202609041818" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609041818" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609041818" />
|
||
<link rel="stylesheet" href="assets/css/personen.css?v=202609041818" />
|
||
</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> · Personen</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<svg style="display:none" aria-hidden="true"><defs>
|
||
<g id="r-krone"><path d="M4 17.6 5.4 7.4l4 3.4L12 5.2l2.6 5.6 4-3.4L20 17.6z"/><path d="M4.6 20.4h14.8"/></g>
|
||
<g id="r-stern"><path d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
|
||
<g id="r-schutz"><path d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
|
||
<g id="r-person"><circle cx="12" cy="8.4" r="3.6"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
|
||
</defs></svg>
|
||
|
||
<main class="inhalt inhalt--breit">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Zugänge</p>
|
||
<h1 class="titel">Personen & Zugangscodes</h1>
|
||
</div>
|
||
<div class="kopf-knoepfe">
|
||
<!-- Standardmäßig steht hier nur DogFather. Alle anderen kommen auf
|
||
Knopfdruck dazu – und der Knopf sagt immer, wie viele das sind,
|
||
damit niemand vergisst, dass da noch welche sind. -->
|
||
<button type="button" class="knopf-still" id="rest-schalter"
|
||
aria-expanded="false" aria-controls="liste" hidden>
|
||
<span id="rest-schalter-text">weitere zeigen</span>
|
||
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m6 9.5 6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Person anlegen</button>
|
||
</div>
|
||
</section>
|
||
|
||
<form class="neu" id="neu" hidden>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="f-name">Name</label>
|
||
<input id="f-name" name="name" maxlength="60" placeholder="z. B. Luna" required />
|
||
</div>
|
||
<div class="rollenwahl-block">
|
||
<span class="feld-schild">Rolle</span>
|
||
<!-- Kein Auswahlmenü: Bei vier Möglichkeiten ist eine sichtbare
|
||
Wahl schneller und zeigt gleich, was die Rolle bedeutet. Das
|
||
Systemmenü ließ sich ausserdem nicht gestalten. -->
|
||
<div class="rollenwahl" id="f-rolle" role="radiogroup" aria-label="Rolle"></div>
|
||
</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>
|
||
|
||
<!-- Anzeige des frisch erzeugten Codes. Bewusst auffällig und mit klarem
|
||
Hinweis, dass er nur jetzt zu sehen ist. -->
|
||
<div class="code-kasten" id="code-kasten" hidden role="status" aria-live="polite">
|
||
<p class="code-kasten__schild">Zugangscode für <span id="code-name"></span></p>
|
||
<p class="code-kasten__code" id="code-wert"></p>
|
||
<p class="code-kasten__hinweis">
|
||
Dieser Code wird <strong>nur jetzt</strong> angezeigt und ist danach nicht mehr
|
||
abrufbar. Sicher weitergeben und in Bitwarden ablegen.
|
||
</p>
|
||
<div class="neu__knoepfe">
|
||
<button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
|
||
<button type="button" class="abmelden" id="code-schliessen">Verstanden, schließen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div id="liste" aria-busy="true"><p class="leise">Personen werden geladen …</p></div>
|
||
|
||
<!-- Das Protokoll ist Nachschlagewerk, nicht Startbild: Standardmäßig
|
||
stehen nur die letzten vier Zeilen da, alles Weitere auf Knopfdruck. -->
|
||
<section class="protokoll-block">
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Letzte Ereignisse</p>
|
||
<button type="button" class="knopf-still" id="protokoll-schalter"
|
||
aria-expanded="false" aria-controls="protokoll" hidden>
|
||
<span id="protokoll-schalter-text">Alle zeigen</span>
|
||
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m6 9.5 6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div id="protokoll" data-klapp="zu"><p class="leise">…</p></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609041818" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609041818" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609041818" defer></script>
|
||
<script src="assets/js/personen.js?v=202609041818" defer></script>
|
||
</body>
|
||
</html>
|