Die Knoepfe stehen nicht mehr vor dem Text -- und verteilt wird bei "Eure Aufgaben"

ZWEI WUENSCHE, EINE URSACHE: beide gehen auf den Block "Noch jemanden
dazunehmen" zurueck, der am 21.09. ins Aufgabenformular kam.

1. "DIE ZWEI BUTTONS SOLLEN NICHT VOR DEM TEXT STEHEN"

Gemessen bei 1280 px: "Anlegen" und "Abbrechen" lagen ueber zwei
Hinweisen, mit 363x27 und 363x10 Pixeln Ueberlappung.

Die Ursache ist eine Regel vom 17.09., und sie ist richtig: Der
Hinweis haengt ABSOLUT unter seinem Feld, damit die Eingaben auf einer
Linie bleiben. Was aus dem Fluss genommen wird, belegt aber keinen
Platz -- solange darunter nur der Rasterabstand kam, fiel das nicht
auf. Mit dem neuen Knopf wurde die Zelle hoeher, und der Hinweis
wanderte mit, direkt auf die Knoepfe.

Jetzt bekommt das Raster unter sich 44 px, wenn es einen haengenden
Hinweis gibt (`:has()`, nicht pauschal -- ein Formular ohne Hinweis
bekaeme sonst Leere geschenkt). Die Hoehe ist gemessen: ein Hinweis
ist zweizeilig 35 px hoch plus 4 px Abstand.

UND EIN ZWEITER FUND AN DERSELBEN STELLE: Der Block sass IN der Zelle
"Wer macht es?". Dadurch stand deren Eingabe bei 780..824, die
Nachbarin "Fuer welchen Kanal?" bei 833..877 -- 53 Pixel Versatz, und
genau das sieht man als "verzogen". Er steht jetzt als eigene
Rasterzeile hinter beiden; danach sind sie wieder buendig. Als eigene
Zeile ist er ausserdem ehrlicher: "Noch jemanden dazunehmen" ist ein
zweiter Schritt, kein Teil des ersten.

Gefunden hat beides pruef-formulare, die seit dem 07.09. auf buendige
Unterkanten prueft und seit dem 21.09. rot war.

2. "BEI EURE AUFGABEN DIE AUFGABEN VERTEILEN"

Filipe, zum wiederholten Mal -- und so stand es auch im Auftrag vom
21.09. (Abschnitt 2). Auf "Eure Aufgaben" steht jetzt ein Band
"Aufgabe verteilen". Es nimmt die gerade gewaehlte Person mit:
"Aufgabe fuer Kessi" fuehrt auf das Aufgabenbrett, oeffnet das
Formular und traegt sie ein.

EIN WEG, KEIN ZWEITES FORMULAR. Zwei Formulare fuer dieselbe Sache
waeren zwei Gelegenheiten, eines zu vergessen -- und man wuesste nie,
welches das richtige ist.

Beim Bauen gemessen: Das Band blieb unsichtbar, bis man eine Person
anklickte -- `window.__ich` kommt ueber das Netz und steht beim ersten
Aufruf noch nicht. Jetzt wird darauf gewartet, laengstens drei
Sekunden, statt eine Zahl aus dem Kopf zu setzen.

Zwei Pruefungen waren selbst kaputt: pruef-formulare zaehlte ein
Eingabefeld mit, das in einem zugeklappten Block liegt und Hoehe 0 hat
-- ein Feld, das man nicht sieht, kann nicht schief stehen.
pruef-entwicklung verlangte, dass ein Modi "Eure Aufgaben" NICHT
bekommt; das hat Filipe heute umgedreht.

Geprueft: pruef-formulare 19/0 (war 18 ok / 1 FEHL), pruef-entwicklung
48/0 (war 45/1), pruef-aufgabenbrett 49/0, pruef-css-klassen 30/0.
Der ganze Weg am Bildschirm gemessen: Band sichtbar, Person mitgenommen,
Formular offen, richtige Person gewaehlt, keine Skriptfehler.
This commit is contained in:
2026-09-22 01:57:08 +02:00
parent 4b87f27451
commit bc9a902ffb
44 changed files with 907 additions and 652 deletions
+144 -117
View File
@@ -1,117 +1,144 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Eure Aufgaben · Spicy &amp; Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609220142" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609220142" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609220142" />
<link rel="stylesheet" href="assets/css/start.css?v=202609220142" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609220142" />
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609220142" />
<link rel="stylesheet" href="assets/css/module.css?v=202609220142" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609220142" />
</head>
<body class="start">
<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">Team&nbsp;Dogi</a> · Eure Aufgaben</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">
<section class="kopf-zeile">
<div>
<p class="marke" id="ober">Entwicklung &amp; Nachwuchs</p>
<!-- UMBENANNT AM 19.09.2026 (siehe workspace.js). Diese Seite ist
der Aufgabenkatalog: was ein Modi koennen soll und wo er
gerade steht. Der Name "Entwicklung" bleibt dem vorbehalten,
was Filipe darunter versteht -- einer Auswertung je Person. -->
<h1 class="titel" id="titel">Eure Aufgaben</h1>
<p class="unterzeile" id="unterzeile">
Anklicken statt tippen. Keine Noten, keine Punktzahl – ein Gesprächsanlass.
</p>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- ==================================================================
DIE REIHENFOLGE AUF DIESER SEITE IST DAS EIGENTLICHE DESIGN
1. Die Ampel — sie betrifft Menschen, nicht Prozesse.
2. Die Personen — wen gehe ich heute durch.
3. Die Karte — und darin die ABWEICHUNGEN zuerst.
4. Ganz unten der Weg zu den eigenen sechs Fragen — sie haben
seit dem 15.09.2026 eine eigene Seite.
Wer die Seite öffnet, soll die wichtigste Sache zuerst sehen, und
das ist nicht die Liste. Eine Ampel unter 34 Beobachtungen hätte
niemand je gelesen.
============================================================== -->
<section id="ampel" class="e-ampel" hidden></section>
<section id="personen-block" hidden>
<h2 class="e-abschnitt">Wen gehst du durch?</h2>
<div id="personen" class="e-personen" role="group" aria-label="Person wählen" aria-busy="true"></div>
</section>
<section id="karte" class="e-karte" hidden></section>
<!-- DEINE EIGENE KARTE.
Sie steht ÜBER den sechs Fragen und UNTER der Liste der anderen:
Wer diese Seite als DogFather öffnet, kommt zuerst zu seiner
Arbeit; wer beurteilt wird, sieht die Liste gar nicht und
landet direkt hier.
Sie erscheint erst, wenn alle gesetzt haben — eine halbe Karte
ist schlimmer als keine. -->
<section id="karte-block" class="e-meine" hidden>
<h2 class="e-abschnitt">Deine Karte</h2>
<p class="e-meine__satz" id="karte-satz">…</p>
<div id="meine-karte" aria-busy="true"></div>
</section>
<!-- ==== DIE SECHS FRAGEN STEHEN WOANDERS (15.09.2026) ==========
Sie hatten hier ihren Platz, solange es keine eigene Seite gab.
Jetzt gibt es eine – und zwei Stellen für dieselben sechs Fragen
wären zwei Stände, die auseinanderlaufen. Hier bleibt der Weg
dorthin, nicht eine Kopie. -->
<section class="e-meins e-meins--verweis" id="meins-block" hidden>
<h2 class="e-abschnitt">Und wie geht es dir?</h2>
<p class="e-meins__satz">
Ein paar Fragen über dich – die Antworten sieht niemand außer dir.
</p>
<a class="knopf knopf--klein" href="befinden.html">Zu deinen Fragen</a>
</section>
</main>
<script src="assets/js/meldung.js?v=202609220142" defer></script>
<script src="assets/js/nachfrage.js?v=202609220142" defer></script>␍
<script src="assets/js/wahl.js?v=202609220142" defer></script>
<script src="assets/js/bereiche.js?v=202609220142" defer></script>
<script src="assets/js/kopf.js?v=202609220142" defer></script>
<script src="assets/js/entwicklung.js?v=202609220142" defer></script>
</body>
</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>Eure Aufgaben · Spicy &amp; Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609220157" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609220157" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609220157" />
<link rel="stylesheet" href="assets/css/start.css?v=202609220157" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609220157" />
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609220157" />
<link rel="stylesheet" href="assets/css/module.css?v=202609220157" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609220157" />
</head>
<body class="start">
<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">Team&nbsp;Dogi</a> · Eure Aufgaben</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">
<section class="kopf-zeile">
<div>
<p class="marke" id="ober">Entwicklung &amp; Nachwuchs</p>
<!-- UMBENANNT AM 19.09.2026 (siehe workspace.js). Diese Seite ist
der Aufgabenkatalog: was ein Modi koennen soll und wo er
gerade steht. Der Name "Entwicklung" bleibt dem vorbehalten,
was Filipe darunter versteht -- einer Auswertung je Person. -->
<h1 class="titel" id="titel">Eure Aufgaben</h1>
<p class="unterzeile" id="unterzeile">
Anklicken statt tippen. Keine Noten, keine Punktzahl – ein Gesprächsanlass.
</p>
</div>
</section>
<!-- VERTEILEN GEHOERT HIERHER (22.09.2026).
Filipe, zum wiederholten Mal: "ich will immer noch ... dass man
bei aufgaben nur die aufgaben sieht und bei eure aufgaben die
aufgaben verteilt."
Und so stand es schon im Auftrag vom 21.09. (Abschnitt 2): "Die
Kachel Eure Aufgaben soll erhalten bleiben. Innerhalb dieses
Bereichs soll zusaetzlich eine Funktion integriert werden, mit
der DogFather und die rechte Hand Aufgaben erstellen und
verteilen koennen."
ES IST EIN WEG, KEIN ZWEITES FORMULAR. Zwei Formulare fuer
dieselbe Sache waeren zwei Gelegenheiten, eines davon zu
vergessen -- und man wuesste nie, welches das richtige ist. Der
Knopf nimmt die gerade gewaehlte Person mit. -->
<section class="e-verteilen" id="verteilen-band" hidden>
<div class="e-verteilen__text">
<h2 class="e-verteilen__titel">Aufgabe verteilen</h2>
<p class="e-verteilen__satz" id="verteilen-satz">
Wähl links jemanden aus — dann legst du die Aufgabe direkt für ihn an.
</p>
</div>
<a class="knopf" id="verteilen-knopf" href="aufgaben.html?neu=1">Aufgabe anlegen</a>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- ==================================================================
DIE REIHENFOLGE AUF DIESER SEITE IST DAS EIGENTLICHE DESIGN
1. Die Ampel — sie betrifft Menschen, nicht Prozesse.
2. Die Personen — wen gehe ich heute durch.
3. Die Karte — und darin die ABWEICHUNGEN zuerst.
4. Ganz unten der Weg zu den eigenen sechs Fragen — sie haben
seit dem 15.09.2026 eine eigene Seite.
Wer die Seite öffnet, soll die wichtigste Sache zuerst sehen, und
das ist nicht die Liste. Eine Ampel unter 34 Beobachtungen hätte
niemand je gelesen.
============================================================== -->
<section id="ampel" class="e-ampel" hidden></section>
<section id="personen-block" hidden>
<h2 class="e-abschnitt">Wen gehst du durch?</h2>
<div id="personen" class="e-personen" role="group" aria-label="Person wählen" aria-busy="true"></div>
</section>
<section id="karte" class="e-karte" hidden></section>
<!-- DEINE EIGENE KARTE.
Sie steht ÜBER den sechs Fragen und UNTER der Liste der anderen:
Wer diese Seite als DogFather öffnet, kommt zuerst zu seiner
Arbeit; wer beurteilt wird, sieht die Liste gar nicht und
landet direkt hier.
Sie erscheint erst, wenn alle gesetzt haben — eine halbe Karte
ist schlimmer als keine. -->
<section id="karte-block" class="e-meine" hidden>
<h2 class="e-abschnitt">Deine Karte</h2>
<p class="e-meine__satz" id="karte-satz">…</p>
<div id="meine-karte" aria-busy="true"></div>
</section>
<!-- ==== DIE SECHS FRAGEN STEHEN WOANDERS (15.09.2026) ==========
Sie hatten hier ihren Platz, solange es keine eigene Seite gab.
Jetzt gibt es eine – und zwei Stellen für dieselben sechs Fragen
wären zwei Stände, die auseinanderlaufen. Hier bleibt der Weg
dorthin, nicht eine Kopie. -->
<section class="e-meins e-meins--verweis" id="meins-block" hidden>
<h2 class="e-abschnitt">Und wie geht es dir?</h2>
<p class="e-meins__satz">
Ein paar Fragen über dich – die Antworten sieht niemand außer dir.
</p>
<a class="knopf knopf--klein" href="befinden.html">Zu deinen Fragen</a>
</section>
</main>
<script src="assets/js/meldung.js?v=202609220157" defer></script>
<script src="assets/js/nachfrage.js?v=202609220157" defer></script>
<script src="assets/js/wahl.js?v=202609220157" defer></script>
<script src="assets/js/bereiche.js?v=202609220157" defer></script>
<script src="assets/js/kopf.js?v=202609220157" defer></script>
<script src="assets/js/entwicklung.js?v=202609220157" defer></script>
</body>
</html>