Files
dogfather-universe/workspace/entwicklung.html
T
DogFatherGitandClaude Opus 5 9a30f9e304 Beim Antworten war das Schreibfeld einen Buchstaben breit
Filipes Bildschirmfoto: Die Antwortleiste nimmt die ganze Breite, und
daneben steht ein Schreibfeld, in dem der Text senkrecht laeuft --
"defi / niti / v / hah / a".

DIE ABSICHT STAND DA, DIE REGEL NICHT. `.chat__eingabe` ist eine Reihe
OHNE Umbruch, und die Antwortleiste ist darin ein gleichberechtigtes
Element -- sie nimmt ihren Platz NEBEN dem Schreibfeld. Das
`margin-bottom: 8px` an der Leiste sagt seit jeher, dass sie darueber
gehoert; durchgesetzt wurde es nie.

Dazu stand am Schreibfeld `min-width: 0`. Das ist woertlich die
Erlaubnis, auf nichts zu schrumpfen -- und genau das hat es getan.

BEHOBEN MIT EINER REGEL, NICHT MIT EINER ZAHL: Die Zeile darf jetzt
umbrechen, die Antwortleiste nimmt sich mit `flex-basis: 100%` immer
die ganze Zeile, und das Schreibfeld hat eine Untergrenze von 8rem.
Bricht es darunter, bricht lieber die Zeile um, als dass das Feld
unbenutzbar wird.

Gemessen an der schmalsten Breite, die das Haus kennt:
  320 px: Schreibfeld 166 px, Antwortleiste 670 px (eigene Zeile)
  430 px: Schreibfeld 216 px
Vorher: rund 30 px.

pruef-chat-optik prueft das jetzt mit -- und nicht nur die Breite des
Feldes, sondern auch, dass die Leiste wirklich eine eigene Zeile
nimmt. Ohne die zweite Zeile waere die erste nur zufaellig gruen,
solange der zitierte Text kurz genug ist.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-21 14:11:04 +02:00

118 lines
5.0 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>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=202609211411" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609211411" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609211411" />
<link rel="stylesheet" href="assets/css/start.css?v=202609211411" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609211411" />
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609211411" />
<link rel="stylesheet" href="assets/css/module.css?v=202609211411" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609211411" />
</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=202609211411" defer></script>
<script src="assets/js/nachfrage.js?v=202609211411" defer></script>
<script src="assets/js/wahl.js?v=202609211411" defer></script>
<script src="assets/js/bereiche.js?v=202609211411" defer></script>
<script src="assets/js/kopf.js?v=202609211411" defer></script>
<script src="assets/js/entwicklung.js?v=202609211411" defer></script>
</body>
</html>