Files
dogfather-universe/workspace/bewerbungen.html
T
DogFatherGitandClaude Opus 5 7ccf904c3c Das Aufgaben-Formular: was aufklappt, bekommt jetzt auch Platz
Filipe, 22.09.2026, zum Bildschirmfoto: „wie scheisse sieht das aus,
verbesser das bitte." Zu sehen: „Anlegen" und „Abbrechen" lagen mitten
in der Personenliste.

GEMESSEN statt geraten, bei 1280 px mit aufgeklappter Liste:

    Zelle            Zeilen          Hoehe   Inhalt
    feld-verant      24px 44px          68      107
    feld-mehrere     43px 44px          87      261   <-- 174 zu viel

Jede Zelle des Formularrasters bekommt zwei Zeilen: Beschriftung oben,
Eingabe unten mit festen 44 px. Das ist richtig und der Grund, warum
alle Eingaben auf einer Linie sitzen (17.09.).

`feld-mehrere` ist aber keine Beschriftung mit Eingabe, sondern ein
Knopf mit einer Liste, die aufklappt. Ihr zweites Kind landet in der
44-Pixel-Zeile und laeuft heraus, sobald jemand sie oeffnet. Was
herauslaeuft, belegt keinen Platz -- also legt es sich ueber das
Naechste, und das Naechste sind die Knoepfe.

DIE MESSUNG HAT MICH VOR DEM NAHELIEGENDEN FEHLER BEWAHRT.
Erster Gedanke: „Zellen ohne eigene Eingabe brauchen die zwei Zeilen
nicht" -- `:has(> input, > select, > textarea)`. Die Messung sagt etwas
anderes: Von sieben Zellen haben SECHS ihre Eingabe nicht als direktes
Kind, weil der Auswahl-Baustein sie in ein <div> wickelt. Die Regel
haette fast das ganze Formular getroffen und genau die Ausrichtung
zerstoert, die sie schuetzen soll.

`aria-expanded` ist gemessen das einzige Merkmal, das nur bei dieser
Zelle steht -- und es ist das inhaltlich richtige: Es sagt „dieser
Bereich kann groesser werden". Etwas, das groesser werden kann, darf
keine feste Hoehe haben.

UND DIE PRUEFUNG, DIE ES HAETTE FINDEN MUESSEN
pruef-formulare war gruen -- sie klappt das Feld nie auf. Ein Zustand,
der nie hergestellt wird, kann nicht gemessen werden.

Neuer Abschnitt: Jedes Element mit `aria-expanded` im Formular wird
geoeffnet, danach darf keine Rasterzelle mehr Inhalt haben, als sie
hoch ist. Nicht diese eine Stelle, sondern die Eigenschaft -- damit
faellt auch die naechste auf, die es noch gar nicht gibt.

ZWEI ANLAEUFE DABEI WAREN FALSCH, und der zweite war der gefaehrliche:
  1. `scrollHeight` der Zelle meldete elf Zellen als kaputt, die alle
     in Ordnung sind: Der Hinweis unter einem Feld haengt seit dem
     17.09. absichtlich absolut darunter. Eine Warnung, die bei
     richtigem Verhalten anschlaegt, wird abgeschaltet.
  2. Nur die direkten Kinder im Fluss -- das war gruen, AUCH MIT DEM
     ECHTEN FEHLER. Nachgemessen mit zurueckgenommener Behebung:
     immer noch gruen. Das Raster staucht das Kind auf die feste
     Zeilenhoehe, das Kind bleibt also brav in der Zelle; was
     herauslaeuft, ist der Inhalt darin.

Jetzt misst sie in die Tiefe (ohne Teilbaeume unter absolut gesetzten
Elementen und ohne eigene Rollbereiche) und ist beidseitig belegt:
  mit Behebung    -> gruen
  ohne Behebung   -> FEHL „feld-mehrere: Inhalt reicht bis 169 px,
                     Zelle ist 87 px hoch"
Dazu eine Gegenprobe, die eine Zelle kuenstlich einklemmt.

Ueberlappungen im Formular: von 12 auf 4 -- und die vier sind Absicht
(der echte <select> liegt unsichtbar ueber seinem Knopf).

pruef-formulare, pruef-aufgabenbrett, pruef-css-klassen gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-22 14:58:45 +02:00

95 lines
3.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Anfragen · Nachwuchs</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=202609221458" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609221458" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609221458" />
<link rel="stylesheet" href="assets/css/start.css?v=202609221458" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609221458" />
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609221458" />
<link rel="stylesheet" href="assets/css/bewerbung.css?v=202609221458" />
<link rel="stylesheet" href="assets/css/module.css?v=202609221458" />
<!-- haus.css MUSS die letzte Stilvorlage sein - siehe treff-regeln.html. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202609221458" />
</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="talente.html">Talente</a> · Anfragen</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">
<!-- ==================================================================
DER EINGANG FÜR DIE ANFRAGEN AUS DER COMMUNITY (17.09.2026)
Filipe: „und dan soll ich annehmen ablehnen, in warteschlange
stellen oder sofort kommunizieren können. und wenn ich annehme dan
soll diese person automatisch zu talente kategorie weiter geleitet
werden."
HIER STEHEN SÄTZE, DIE JEMAND ÜBER SICH SELBST GESCHRIEBEN HAT,
im Vertrauen darauf, dass nur zwei Menschen sie lesen. Diese Seite
gehört DogFather und der rechten Hand -- durchgesetzt in der
Rechtetafel UND in workspace-bewerbung.js.
Deshalb steht im Protokoll auch kein Inhalt, sondern nur die
Nummer: Das Protokoll lesen mehr Leute als die Anfrage.
============================================================== -->
<section class="kopf-zeile">
<div>
<p class="marke">Entwicklung &amp; Nachwuchs</p>
<h1 class="titel">Anfragen</h1>
<p class="unterzeile">
Wer sich selbst gemeldet hat. Nimmst du an, entsteht daraus ein
Eintrag bei den Talenten – auf der Stufe „Angesprochen“, denn wer
sich meldet, hat die erste Frage schon beantwortet.
</p>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- Die Zahlen. Nicht Schmuck, sondern die Arbeitsanweisung dieser
Seite: Was neu ist, steht links und wird zuerst gelesen. -->
<section class="bw-zahlen" id="zahlen" hidden></section>
<p class="leise" id="ladezeile">einen Moment …</p>
<div id="liste"></div>
</main>
<script src="assets/js/meldung.js?v=202609221458" defer></script>
<script src="assets/js/nachfrage.js?v=202609221458" defer></script>
<script src="assets/js/wahl.js?v=202609221458" defer></script>
<script src="assets/js/bereiche.js?v=202609221458" defer></script>
<script src="assets/js/installieren.js?v=202609221458" defer></script>
<script src="assets/js/kopf.js?v=202609221458" defer></script>
<script src="assets/js/auskunft.js?v=202609221458" defer></script>
<script src="assets/js/bewerbungen.js?v=202609221458" defer></script>
</body>
</html>