DogFatherGitandClaude Opus 5
a06184f24f
Weiter am Rundumcheck, diesmal der Handy-Rundgang. Von sechs Befunden war einer ein echter Layoutfehler, zwei waren zu kleine Schrift, und drei kamen daher, dass die Messung etwas nicht unterscheiden konnte. === AUF DEM HANDY KAPUTT === 1. DER NAME IN DER PERSONENKARTE WAR NULL PIXEL BREIT. Gemessen auf 412 px: `h3.tperson__name` mit `w=0` bzw. `w=15`. Der Name stand als Buchstabensaeule da oder gar nicht -- auf der Seite, die von Menschen handelt. `.tperson__text` trug `flex: 1; min-width: 0`. Das erlaubt dem Textblock, auf null zu schrumpfen, und Flexbox schrumpft lieber, als umzubrechen -- die Pille „zuletzt gesehen" daneben blieb stehen und nahm allen Platz. `min-width: 0` war trotzdem richtig gemeint (ohne sie blaeht ein langes Wort den Kasten auf); es fehlte nur die Untergrenze. Jetzt `min(14ch, 100%)`: vierzehn Zeichen, wenn so viel Platz ist, sonst der ganze Platz, der da ist. Die Pille bricht um -- `flex-wrap: wrap` stand am Kopf ohnehin schon, es fehlte nur der Grund, es zu benutzen. 2. ZWEI BESCHRIFTUNGEN UNTER DER LESBARKEITSGRENZE. `.u-weg__marke` 10,88 px, `.u-weg__aus` 11,2 px -- die Hausgrenze sind 11,5. Der Reflex dahinter: Eine Marke soll leise sein, also macht man sie klein. Leise wird sie aber durch Farbe und Gewicht; eine Schrift, die man nicht lesen kann, ist nicht leise, sondern weg. Derselbe Griff ist mir gestern dreimal an einem Tag passiert. === DREI MESSUNGEN, DIE ETWAS NICHT UNTERSCHEIDEN KONNTEN === 3. `pointer-events: none` IST KEIN BERUEHRZIEL. Die Terminpunkte im Monatsraster des Kalenders sind 8 x 8 px und nehmen ausdruecklich keine Beruehrung an -- angetippt wird die ZELLE. Sie als „zu klein" zu melden ist, als beanstande man die Groesse eines gemalten Knopfs. `pruef-breiten` kennt die Ausnahme seit jeher; im Handy-Rundgang hat sie gefehlt. 4. `font-size: 0` IST KEINE KLEINE SCHRIFT, SONDERN KEINE. Dieselben Punkte: Die Schrift wird auf null gesetzt, die Farbe bleibt. Gemeldet wurde „0px, zu klein". Die Grenze nach unten bleibt scharf -- alles zwischen 0,1 und 11,5 px ist weiterhin ein Befund, nur die glatte Null faellt heraus. Sie ist eine Aussage, keine Nachlaessigkeit. 5. `scrollWidth > clientWidth` SAGT BEI INLINE-ELEMENTEN NICHTS. Chromium liefert dort fuer `clientWidth` glatt null, und damit ist jeder Text breiter als sein Kasten. Der richtige Umgang mit einer unmoeglichen Messung ist, sie nicht zu machen -- nicht, ihr Ergebnis zu glauben. Dazu: Was per `clip-path: inset(50%)` fuer das Auge weggenommen ist (echte <select> unter selbst gebauten Umschaltern, Beschriftungen zu Symbolknoepfen), kann nicht abgeschnitten sein. === UND EINE MELDUNG, DIE JETZT SAGT, WO MAN SUCHEN MUSS === „abgeschnitten: Mara (18>0)" hat mich zwanzig Minuten gekostet -- drei Vermutungen, drei Messungen. Die Meldung nennt jetzt Element, Klasse, Darstellungsart und Breite: „Mara (18>0, h3.tperson__name, block, w=0)". Damit war der Fall in einem Blick klar. Eine Pruefung, die nur sagt DASS etwas ist, ist eine halbe. GEMESSEN: pruef-breiten 0 Fehler (9 Breiten, 38 Seiten), pruef-team 51/0, pruef-tippziele 11/0, pruef-css-klassen 33/0. Im Handy-Rundgang bleiben die Kopfleisten-Befunde bei 360/390/412 px -- die nehme ich mir als Naechstes vor, sie brauchen einen Umbau und keine Korrektur. Co-Authored-By: Claude Opus 5 <[email protected]>
158 lines
6.4 KiB
HTML
158 lines
6.4 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=202609251327" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/werdegang.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609251327" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609251327" />
|
||
</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">
|
||
|
||
<!-- ==================================================================
|
||
ENTWICKLUNG — die Auswertung je Person (19.09.2026)
|
||
|
||
Filipe: „dan perfektionierst du eine neue wo diagramme texte und
|
||
so zu jedem modi gemacht wird und diese kategorie kannst du
|
||
entwicklung nenen."
|
||
|
||
DIESE SEITE HAT ZWEI GESICHTER, und welches man sieht, entscheidet
|
||
der Server:
|
||
|
||
Leitung -> die Karten aller, die eine haben
|
||
Ein Modi -> ausschliesslich die Bewegung in der EIGENEN Karte,
|
||
ohne Namen, ohne Anlass, ohne wer-hat-was
|
||
|
||
WAS HIER NICHT STEHT UND NIE STEHEN WIRD: eine Punktzahl, ein
|
||
Prozentwert, ein Durchschnitt, eine Rangliste, ein Vergleich
|
||
zwischen zwei Menschen. Eine Zahl ueber einen Menschen wird
|
||
gelesen, verglichen und weitererzaehlt — gebraucht wird ein
|
||
Gespraechsanlass.
|
||
============================================================== -->
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Entwicklung & Nachwuchs</p>
|
||
<h1 class="titel" id="titel">Entwicklung</h1>
|
||
<p class="unterzeile" id="unterzeile">
|
||
Wie sich jemand über die Zeit bewegt. Keine Note, kein Vergleich –
|
||
jede Karte nur mit sich selbst.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- ---- Die Liste (nur Leitung) ---------------------------------- -->
|
||
<section id="liste-block" hidden>
|
||
<p class="w-hinweis" id="liste-hinweis"></p>
|
||
<div id="liste" class="w-liste" aria-busy="true">
|
||
<p class="leise">wird geladen …</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---- Eine Karte (nur Leitung) --------------------------------- -->
|
||
<section id="karte-block" hidden>
|
||
<button type="button" class="knopf knopf--still knopf--klein" id="zur-liste">
|
||
← Alle Karten
|
||
</button>
|
||
|
||
<h2 class="w-name" id="karte-name">…</h2>
|
||
<p class="w-satz" id="karte-satz">…</p>
|
||
|
||
<!-- Diagramm 1: Bewegung. Zwei Richtungen um eine Nulllinie —
|
||
vorwaerts und rueckwaerts sind dieselbe Groesse mit
|
||
verschiedenem Vorzeichen, nicht zwei Themen. -->
|
||
<section class="w-teil" id="bewegung-block">
|
||
<h3 class="e-abschnitt">Was sich bewegt hat</h3>
|
||
<p class="w-teil__satz" id="bewegung-satz"></p>
|
||
<div id="bewegung"></div>
|
||
</section>
|
||
|
||
<!-- Diagramm 2: der Streifen. Eine Zeile je Punkt, eine Spalte je
|
||
Monat. Das Zeichen sagt die Stufe, die Farbe verstaerkt nur. -->
|
||
<section class="w-teil" id="streifen-block">
|
||
<h3 class="e-abschnitt">Punkt für Punkt, Monat für Monat</h3>
|
||
<p class="w-teil__satz" id="streifen-satz"></p>
|
||
<div id="streifen" class="w-streifen"></div>
|
||
</section>
|
||
|
||
<!-- Die Texte. Reihenfolge ist Absicht: erst was sich bewegt hat,
|
||
dann was traegt, erst danach was liegt. -->
|
||
<section class="w-teil" id="texte-block">
|
||
<h3 class="e-abschnitt">Was dazu zu sagen ist</h3>
|
||
<div id="texte"></div>
|
||
</section>
|
||
|
||
<p class="w-fuss">
|
||
Auf dieser Seite gibt es keine Punktzahl und keinen Vergleich zwischen
|
||
Personen. Was hier steht, ist ein Gesprächsanlass – kein Zeugnis.
|
||
Einschätzungen setzt und ändert man im Katalog:
|
||
<a href="entwicklung.html">Eure Aufgaben</a>.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ---- Die eigene Sicht (Modi) ---------------------------------- -->
|
||
<!-- ==================================================================
|
||
WAS DER MENSCH SELBST SIEHT.
|
||
|
||
Hier steht kein fremder Name, keine Beobachtung über jemand
|
||
anderen und kein Anlasstext. Nur: ob sich etwas bewegt hat.
|
||
|
||
Die Lesehilfe und die zwei Wege am Ende sind am 19.09.2026
|
||
dazugekommen. Vorher standen hier Balken ohne Erklärung und ein
|
||
„Frag danach" ohne Adressaten – eine Sackgasse mit freundlichem
|
||
Ton.
|
||
============================================================== -->
|
||
<section id="mich-block" hidden>
|
||
<h2 class="e-abschnitt">Deine Entwicklung</h2>
|
||
<p class="w-satz" id="mich-satz">…</p>
|
||
<p class="w-lesehilfe" id="mich-lesehilfe" hidden></p>
|
||
<div id="mich-bewegung"></div>
|
||
<p class="w-fuss" id="mich-hinweis"></p>
|
||
<div class="w-wege" id="mich-wege" hidden></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/nachfrage.js?v=202609251327" defer></script>
|
||
|
||
|
||
<script src="assets/js/wahl.js?v=202609251327" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609251327" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609251327" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609251327" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609251327" defer></script>
|
||
<script src="assets/js/werdegang.js?v=202609251327" defer></script>
|
||
</body>
|
||
</html>
|