DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die Personenkacheln der Entwicklung im Hausstil

Browse Source 
Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese seite
noch nicht im stil und perfektioniert wie die auf screen2 ... aber so
dass ich die leute in einer kachel aussuchen kann alle einzel."

Der Unterschied lag NICHT im Aufbau -- der stimmte -- und auch nicht
am Inhalt: Die 28 Punkte sind laengst ganz auf Modi-Arbeit gebaut (Im
Chat 8, Wenn es eng wird 7, Im Team 7, Wie viel von selbst 6, dazu
sechs Fragen an einen selbst). Es waren zwei andere Dinge:

1. DIE ZAHLEN WAREN GRAUE TEXTZEILEN
Drueben stehen sie als abgesetzte Kaesten mit grosser Ziffer und
eigenem Ton. `bilanz-zahl` liegt in start.css und gehoert dem ganzen
Haus -- es wird jetzt benutzt statt nachgebaut. Ein Nachbau laeuft
auseinander, sobald jemand eins von beiden anfasst.

Aus "0 von 28 angesehen" werden drei Kaesten wie auf der Checkliste:
angesehen / noch offen / verschieden gesehen. Die ersten beiden teilen
dasselbe Ganze, die dritte ist das Ergebnis dieser Seite -- wo zwei
Leute dasselbe sehen, gibt es nichts zu besprechen.

2. EINE ANGEKLICKTE PERSON SAH AUS WIE EINE NICHT ANGEKLICKTE
Die Kachel war ein Knopf ohne Zustand. Man klickte jemanden an, die
Karte ging auf -- und oben blieb alles gleich. Wer scrollte, wusste
nicht mehr, wen er offen hat. Jetzt `aria-pressed`, damit es auch ein
Vorleseprogramm sagen kann, und eine gedaempfte Umrandung. Die Reihe
heisst "Person waehlen" wie auf dem Aufgabenbrett.

Nebenbei: Der Ton des ersten Kastens springt auf gruen, sobald nichts
mehr offen ist -- sonst saehe eine fertig angesehene Person aus wie
eine halbe.

NEU: pruef-entwicklung-kacheln (15 Pruefungen)
Nicht "sieht gleich aus" -- das laesst sich nicht messen -- sondern
was das Aussehen traegt: Benutzt die Kachel den Hausbaustein oder
einen Nachbau (und steht nichts Selbstgebautes daneben)? Ergibt
angesehen + noch offen die Gesamtzahl, die die Auskunft selbst nennt?
Und die Gegenprobe zur Auswahl: VOR dem ersten Klick darf keine
Kachel gewaehlt sein, danach genau eine, und beim naechsten Klick
wandert sie, statt sich zu sammeln.

pruef-entwicklung 43 und pruef-css-klassen unveraendert gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-17 02:41:41 +02:00
co-authored by Claude Opus 5
parent 3a86b13de1
commit fa8e86ad81
33 changed files with 714 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/entwicklung.css
+42 -2
View File
@@ -68,7 +68,10 @@
.e-person {
display: flex; flex-direction: column; gap: 3px;
min-width: 210px; flex: 1 1 210px;
/* Seit die drei Bilanz-Kaesten darin stehen, braucht die Kachel
mehr Grundbreite -- bei 210px wurde jeder Kasten einzeilig
gequetscht und die Ziffer rutschte unter ihr Wort. */
min-width: 260px; flex: 1 1 300px;
padding: 13px 15px; text-align: left; cursor: pointer;
font: inherit;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
@@ -85,7 +88,44 @@
/* Die Abweichung ist das Ergebnis dieser Seite — sie darf als Einzige
auffallen. */
.e-person__zahl--wichtig { color: var(--text); font-weight: 620; }
.e-person__zahl--alt { color: var(--text-still); }
.e-person__zahl--alt { color: var(--text-still); margin-top: 8px; }
/* ---------------------------------------------------------------------
DIE DREI ZAHLEN AUF DER KACHEL (17.09.2026)
Filipe, mit zwei Bildschirmfotos nebeneinander: „wieso ist diese seite
noch nicht im stil und perfektioniert wie die auf screen2". Der
Unterschied lag an den Zahlen: hier graue Textzeilen, drüben die
abgesetzten Kästen mit großer Ziffer.
`.bilanz-zahl` kommt aus start.css und wird hier nur gesetzt — nicht
nachgebaut. Ein zweites Aussehen für dieselbe Sache läuft auseinander,
sobald jemand eins davon anfasst.
AUTO-FIT STATT DREI SPALTEN: Auf dem Handy ist eine Kachel schmal,
am Rechner breit. `minmax` bricht genau dann um, wenn der Platz nicht
reicht — eine feste Spaltenzahl wäre wieder eine Rechnung von gestern.
------------------------------------------------------------------- */
.e-person__bilanz {
display: grid; gap: 8px; margin-top: 10px;
grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
/* Die Kästen sitzen in einem Knopf und dürfen ihn nicht abfangen —
sonst trifft ein Tippen auf die Zahl die Kachel nicht. */
.e-person__bilanz .bilanz-zahl { pointer-events: none; padding: 9px 11px; }
.e-person__bilanz .bilanz-zahl__n { font-size: 1.35rem; }
.e-person__bilanz .bilanz-zahl__text { font-size: .74rem; }
/* WEN HABE ICH GERADE OFFEN? Vorher sah die Kachel nach dem Klick aus
wie vorher; wer scrollte, verlor den Faden. Gedämpft hell statt
grell — die Karte darunter ist die Hauptsache, die Kachel sagt nur,
wozu sie gehört. */
.e-person[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--akzent) 11%, transparent), transparent 62%),
color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
}
/* ---------------------------------------------------------------------
Die Karte
workspace/assets/js/entwicklung.js
+62 -18
View File
@@ -99,7 +99,14 @@
const kopf = document.querySelector('#karte .e-karte__stand');
if (kopf) kopf.textContent = satz;
const kachel = personZahlen.get(letzteKarte.id);
if (kachel) kachel.textContent = satz;
if (kachel) {
/* Zwei Ziffern statt eines Satzes -- und der Ton wechselt auf
gruen, sobald nichts mehr offen ist. Ohne das bliebe eine
fertig angesehene Person blaugrau wie eine halbe. */
kachel.angesehen.textContent = String(gesetzt);
kachel.offen.textContent = String(Math.max(0, r.gesamt - gesetzt));
kachel.kasten.dataset.stufe = gesetzt >= r.gesamt ? 'gut' : 'offen';
}
/* Und die Köpfe der Kategorien -- sonst steht zugeklappt „0 / 7“
über sieben beantworteten Fragen. */
@@ -164,35 +171,65 @@
}
/* ---- Die Personen --------------------------------------------------- */
/* EIN BILANZ-KASTEN, wie ihn die Checkliste benutzt (17.09.2026).
Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese
seite noch nicht im stil und perfektioniert wie die auf screen2".
Der Unterschied war nicht der Aufbau -- der stimmte -- sondern die
Zahlen: Hier standen sie als graue Textzeilen, drueben als
abgesetzte Kaesten mit grosser Ziffer und eigenem Ton. Zwei
Bretter, die dasselbe tun und verschieden aussehen, wirken wie
zwei verschiedene Sachen.
`bilanz-zahl` steht in start.css und gehoert damit dem ganzen Haus,
nicht der Checkliste. Nachbauen waere eine zweite Wahrheit ueber
dasselbe Aussehen gewesen. */
function bilanzZahl(n, text, stufe, hinweis) {
const kasten = el('div', 'bilanz-zahl');
kasten.dataset.stufe = stufe;
if (hinweis) kasten.title = hinweis;
const ziffer = el('span', 'bilanz-zahl__n', String(n));
kasten.append(ziffer);
kasten.append(el('span', 'bilanz-zahl__text', text));
return { kasten, ziffer };
}
function personKarte(p, lage) {
const k = el('button', 'e-person');
k.type = 'button';
/* JEDE PERSON IST EINZELN WAEHLBAR -- UND MAN SIEHT ES.
Vorher war die Kachel ein Knopf ohne Zustand: Man klickte jemanden
an, die Karte ging auf, und die Kachel sah aus wie vorher. Wer
dann scrollte, wusste nicht mehr, wen er offen hat. */
k.setAttribute('aria-pressed', 'false');
k.dataset.person = String(p.id);
k.append(el('span', 'e-person__name', p.name));
k.append(el('span', 'e-person__rolle', p.rolle_name));
const zahlen = el('span', 'e-person__zahlen');
const wieViele = el('span', 'e-person__zahl',
`${p.gesetzt} von ${lage.gesamt_fremd} angesehen`);
/* Die Kachel merkt sich ihr Zahlenfeld -- daran zieht
zaehlerNachziehen() sie nach, ohne die Liste neu zu holen. */
personZahlen.set(p.id, wieViele);
zahlen.append(wieViele);
/* DIE ABWEICHUNG STEHT VORNE UND NICHT IM DETAIL. Sie ist das
Ergebnis dieser Seite: Wo zwei Leute dasselbe sehen, gibt es
const gesamt = Number(lage.gesamt_fremd) || 0;
const gesetzt = Number(p.gesetzt) || 0;
const zahlen = el('div', 'e-person__bilanz');
/* DIESELBEN DREI WIE DRUEBEN, und die ersten beiden teilen dasselbe
Ganze: angesehen + noch offen = alle Punkte. Die dritte ist das
Ergebnis dieser Seite -- wo zwei Leute dasselbe sehen, gibt es
nichts zu besprechen. */
if (p.abweichungen) {
const z = el('span', 'e-person__zahl e-person__zahl--wichtig',
`${p.abweichungen} × verschieden gesehen`);
z.title = 'Hier lohnt das Gespräch – nicht dort, wo ihr einig seid.';
zahlen.append(z);
}
const a = bilanzZahl(gesetzt, 'angesehen',
gesamt && gesetzt >= gesamt ? 'gut' : 'offen');
const o = bilanzZahl(Math.max(0, gesamt - gesetzt), 'noch offen', 'offen');
const v = bilanzZahl(Number(p.abweichungen) || 0, 'verschieden gesehen',
'verbessern', 'Hier lohnt das Gespräch – nicht dort, wo ihr einig seid.');
zahlen.append(a.kasten, o.kasten, v.kasten);
/* Die Kachel merkt sich ihre Ziffern -- daran zieht
zaehlerNachziehen() sie nach, ohne die Liste neu zu holen. */
personZahlen.set(p.id, { angesehen: a.ziffer, offen: o.ziffer, kasten: a.kasten });
k.append(zahlen);
if (p.veraltet) {
const z = el('span', 'e-person__zahl e-person__zahl--alt',
`${p.veraltet} älter als ${lage.verblasst_nach} Tage`);
z.title = 'Eine alte Einschätzung ist keine Einschätzung mehr.';
zahlen.append(z);
k.append(z);
}
k.append(zahlen);
/* NUR HIER WIRD GESPRUNGEN: Wer eine Person anklickt, will zu ihrer
Karte. Überall sonst bleibt die Seite stehen, wo sie steht. */
k.addEventListener('click', () => karte(p.id, true));
@@ -220,6 +257,13 @@
alles darunter weg. */
async function karte(id, springen = false) {
offen = id;
/* WER IST GERADE OFFEN? Die Antwort gehoert auf die Kacheln, nicht
nur in eine Variable. `aria-pressed` sagt es zugleich einem
Vorleseprogramm -- eine Umrandung allein kann das nicht. */
for (const kachel of document.querySelectorAll('#personen .e-person')) {
kachel.setAttribute('aria-pressed',
kachel.dataset.person === String(id) ? 'true' : 'false');
}
const ziel = $('karte');
const vorherY = window.scrollY;
ziel.hidden = false;