DogFatherGitandClaude Opus 5
e3e015bca4
Filipe zu einem Bildschirmfoto: "was soll das jetzt, wieso sieht das in
gewissen seiten so scheisse aus?!"
Der Teilen-Knopf stand doppelt so hoch wie seine Nachbarn, mit dem
Zeichen UEBER dem Wort statt daneben. Es war kein Gestaltungsfehler,
sondern ein Name: `.teilen` gab es ZWEIMAL --
gate.css Knopf der Kopfleiste inline-flex, waagerecht
bereich.css Layout der Teilen-Seite flex column, 22px, 44rem
Auf den drei Seiten, die beide Dateien laden (bereich, bewerben,
teilen), gewann die spaeter geladene. Der Knopf bekam das Layout einer
ganzen Seite. "Gewisse Seiten" war exakt richtig beobachtet.
DERSELBE NAME KOSTETE AUSSERDEM DEN KNOPF: kopf.js baut ihn nur ein,
wenn `getElementById('teilen')` nichts findet -- ein Schutz gegen
doppelten Einbau. Auf teilen.html steht `<section id="teilen">` aber
schon im HTML. Dort fehlte der Knopf ganz, ohne Spur, ohne Meldung.
REPARIERT ALS REGEL, NICHT ALS EINZELFALL:
- Was kopf.js in die Leiste haengt, traegt jetzt `kopf-` davor
(kopf-teilen, kopf-sicht-wahl, kopf-sicht-feld, kopf-fremd-band).
Eine Seite darf dann heissen wie sie will -- auch "teilen", "chat"
oder "suchen", und genau diese Woerter braucht als naechstes eine
Seite.
- Die Teilen-Seite bekommt eigene Klassennamen (tl-*).
NEU: server/pruef-namen.mjs (12 Pruefungen, ohne Server, <1 s).
Es ist der ZWEITE Namenskonflikt an einem Tag -- der erste war
`.t-schritt` auf der Talente-Seite, gefunden nur durch Zaehlen im
Browser. Beide waren gruen in jeder bestehenden Prueflinie.
Gemessen, um den Schnitt zu finden, der etwas taugt:
2872 Klasse in zwei geladenen Dateien erwaehnt -> Rauschen
1887 davon mit eigener Blockdefinition -> Rauschen
12 davon mit widersprechendem `display`
6 davon ohne `display: none` -> geprueft
Mit Gegenprobe, die aus den Dateien ABGELEITET wird (die erste, fest
abgeschriebene Fassung fand nichts, weil die gewaehlte Klasse dort gar
kein `display` setzt -- eine Gegenprobe, die selbst danebenliegt,
beweist nichts).
pruef-kopf-messen: 3 -> 16 Messungen, und drei eigene Fehler behoben,
die alle dieselbe Form hatten -- zu frueh hingesehen:
1. Sie mass NUR uebersicht.html. Die laedt bereich.css nicht und war
fuer diesen Fehler blind.
2. Sie mass nur 320/390/430px. Unter 720px versteckt gate.css das
Wort "Teilen"; der Knopf bleibt klein, auch falsch angeordnet.
Filipes Bild war 1366px breit.
3. Sie wartete 300ms. kopf.js haengt Teile erst nach `/api/ich` ein
und hat ein Netz bei 1200ms. Zweiter Versuch: warten, bis `#wer`
Text hat -- SOFORT wahr, dort steht `…` als Platzhalter. Dritter:
auf Stabilitaet warten -- nach 0ms und 500ms gleich gross, also
"fertig". Erst die Mindestwartezeit (1200 aus kopf.js plus Luft)
davor machte die Messung echt.
Bewiesen an der Gegenprobe: mit dem alten Fehler meldet sie jetzt
"kopf-teilen ist 77px -- die anderen im Schnitt 43px", vorher blieb sie
gruen.
Statt einer festen Hoehe wird gefragt, ob EIN Teil aus der Reihe faellt
(> 1,6x der Schnitt seiner Nachbarn). Das waechst mit, wenn die Leiste
groesser wird, und muss bei keinem neuen Knopf nachgezogen werden.
Gruen: namen, kopf-messen, sicht, css-klassen, struktur.
Co-Authored-By: Claude Opus 5 <[email protected]>
111 lines
4.5 KiB
HTML
111 lines
4.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>Entwicklung · Spicy & 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=202609171858" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609171858" />
|
||
</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 Dogi</a> · Entwicklung</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 & Nachwuchs</p>
|
||
<h1 class="titel" id="titel">Entwicklung</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/wahl.js?v=202609171858" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609171858" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609171858" defer></script>
|
||
<script src="assets/js/entwicklung.js?v=202609171858" defer></script>
|
||
</body>
|
||
</html>
|