Entwicklung: „Deine Karte" laesst sich einklappen
VanVan im Support: „Deine Karte im Bereich eure Aufgaben kann man
noch nicht einklappen, was die Seite unnötig lang zieht und
unübersichtlich macht."
GEMESSEN (mess-vanvan-karte, Abschnitt 5). Es ist IHRE eigene Karte,
nicht die eines Modi -- im Bildschirmfoto steht an jedem Punkt „1 ×
Läuft", also eine einzige Antwort. Ueber die rechte Hand urteilt nur
DogFather; bei ihr ist deshalb alles durch und die Karte entsprechend
lang, waehrend ein Modi zwei Stimmen braucht.
vorher nachher
Seite gesamt 7245 px 2945 px
davon „Deine Karte" 6186 px 1886 px (zugeklappt 636 px)
Schalter 0 6 + „Alle"-Knopf
6186 von 7245 px waren eine einzige Karte -- 85 Prozent der Seite,
68 Zeilen am Stueck, kein einziger Schalter.
DERSELBE MECHANISMUS WIE NEBENAN, NICHT EIN ZWEITER. Die Karte der
Leitung klappt seit Langem auf und zu. Die Klassen, der Pfeil, die
Zahl im Kopf und der Knopf „Alle auf-/zuklappen" sind dieselben --
ein zweiter Mechanismus daneben waere der, der beim naechsten Umbau
vergessen wird, und er saehe anders aus, obwohl er dasselbe tut.
Herausgeloest als `klappAbschnitt()`.
WELCHER STEHT OFFEN: Was ich TUN soll („Deine Aufgaben"), und von den
Beobachtungen die erste Kategorie. Alle zu hiesse „jedes Mal erst
suchen", alle auf waere der Zustand von vorher.
DIE ZAHL STEHT IM KOPF (14, 12, 12, 11, 10, 9). Eine zugeklappte
Kategorie, die nicht sagt, wie viel in ihr steckt, klappt man einmal
auf und danach nie wieder zu.
GEPRUEFT
Die Messung ist jetzt selbst die Wache: Sie schlaegt an, wenn es
keine Schalter gibt (so ist der Befund entstanden), wenn Zuklappen
weniger als die Haelfte spart, und wenn es Schalter ohne
„Alle"-Knopf gibt. Alle drei nachgestellt. Ein ANTEIL und keine feste
Pixelzahl -- 68 Punkte heute, vielleicht 90 naechstes Jahr.
pruef-entwicklung 79/0, pruef-werdegang 103/0,
pruef-entwicklung-kacheln 34/0, pruef-css-klassen,
pruef-zwischenspeicher 34/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -2778,12 +2778,9 @@
|
||||
zugetragenen Punkten der Leitung, damit beide Seiten dasselbe
|
||||
meinen, wenn sie dasselbe zeigen. */
|
||||
.e-block--auftrag {
|
||||
padding-left: 16px;
|
||||
border-left: 3px solid color-mix(in srgb, var(--akzent) 70%, transparent);
|
||||
}
|
||||
.e-block--auftrag .e-block__text {
|
||||
margin: 4px 0 14px;
|
||||
font-size: .82rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-still);
|
||||
/* NUR DIE KANTE, kein eigener Abstand: Der Abschnitt ist seit dem
|
||||
30.09.2026 ein ganz normaler `.e-block` mit Kopf und Koerper --
|
||||
er traegt seine Masse schon. Eine zweite Einrueckung daneben
|
||||
haette ihn aus der Reihe geschoben. */
|
||||
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--akzent) 70%, transparent);
|
||||
}
|
||||
|
||||
@@ -2094,6 +2094,76 @@
|
||||
return punkte.filter((pt) => pt.stufe === stufenFilter);
|
||||
}
|
||||
|
||||
/** Welche Abschnitte der eigenen Karte stehen offen?
|
||||
* Im Gedaechtnis und nicht im Speicher des Browsers -- genau wie
|
||||
* bei der Karte der Leitung nebenan. Eine zweite Art, sich etwas
|
||||
* zu merken, waere eine zweite Art, es falsch zu merken. */
|
||||
let offeneEigene = null;
|
||||
|
||||
/** Ein einklappbarer Abschnitt -- Kopf mit Pfeil, Zahl und Koerper.
|
||||
*
|
||||
* DERSELBE BAUSTEIN WIE IN DER KARTE DER LEITUNG (30.09.2026).
|
||||
* VanVan aus dem Support: „Deine Karte … kann man noch nicht
|
||||
* einklappen, was die Seite unnötig lang zieht." Gemessen war die
|
||||
* Karte 6186 px hoch — 85 Prozent der ganzen Seite — und hatte
|
||||
* keinen einzigen Schalter.
|
||||
*
|
||||
* Die Klassen sind dieselben wie nebenan, damit beide Karten
|
||||
* gleich aussehen und gleich bedient werden. Ein zweiter
|
||||
* Mechanismus daneben wäre der, der beim nächsten Umbau vergessen
|
||||
* wird.
|
||||
*
|
||||
* @param {string} schluessel Wofür der offene Zustand gemerkt wird
|
||||
* @param {string} name Die Überschrift
|
||||
* @param {string} zahl Was zugeklappt sichtbar bleibt
|
||||
* @param {boolean} offen Anfangszustand
|
||||
* @returns {{abschnitt: HTMLElement, koerper: HTMLElement,
|
||||
* umschalten: Function}}
|
||||
*/
|
||||
function klappAbschnitt(schluessel, name, zahl, offen) {
|
||||
const abschnitt = el('section', 'e-block');
|
||||
abschnitt.dataset.block = schluessel;
|
||||
abschnitt.dataset.offen = offen ? 'ja' : 'nein';
|
||||
|
||||
const koerper = el('div', 'e-block__koerper');
|
||||
koerper.id = `eigen-${schluessel}`;
|
||||
koerper.hidden = !offen;
|
||||
|
||||
const titel = el('h3', 'e-block__zeile');
|
||||
const schalter = el('button', 'e-block__schalter');
|
||||
schalter.type = 'button';
|
||||
schalter.setAttribute('aria-expanded', String(offen));
|
||||
schalter.setAttribute('aria-controls', koerper.id);
|
||||
schalter.append(pfeil());
|
||||
schalter.append(el('span', 'e-block__name', name));
|
||||
/* DIE ZAHL STEHT IM KOPF, damit man sie ZUGEKLAPPT sieht. Eine
|
||||
zugeklappte Kategorie, die nicht sagt, wie viel in ihr steckt,
|
||||
klappt man einmal auf und danach nie wieder zu. */
|
||||
if (zahl) schalter.append(el('span', 'e-block__stand', zahl));
|
||||
|
||||
const umschalten = (auf) => {
|
||||
abschnitt.dataset.offen = auf ? 'ja' : 'nein';
|
||||
koerper.hidden = !auf;
|
||||
schalter.setAttribute('aria-expanded', String(auf));
|
||||
};
|
||||
schalter.addEventListener('click', () => {
|
||||
const jetztOffen = !offeneEigene.has(schluessel);
|
||||
if (jetztOffen) offeneEigene.add(schluessel);
|
||||
else offeneEigene.delete(schluessel);
|
||||
/* NUR DIESEN ABSCHNITT, kein Neuaufbau: Bei 68 Zeilen sieht
|
||||
man jeden Sprung. */
|
||||
umschalten(jetztOffen);
|
||||
if (eigeneLeisteNachziehen) eigeneLeisteNachziehen();
|
||||
});
|
||||
titel.append(schalter);
|
||||
abschnitt.append(titel);
|
||||
abschnitt.append(koerper);
|
||||
return { abschnitt, koerper, umschalten };
|
||||
}
|
||||
/* Wird beim Zeichnen gesetzt -- der Knopf „Alle" muss nach jedem
|
||||
einzelnen Klick seine Aufschrift pruefen. */
|
||||
let eigeneLeisteNachziehen = null;
|
||||
|
||||
/** Die Antworten zu einem fertigen Punkt.
|
||||
*
|
||||
* ALS EIGENE FUNKTION, seit die Aufgaben oben dieselbe Reihe
|
||||
@@ -2153,11 +2223,61 @@
|
||||
wenn alle Beurteiler gesetzt haben. Eine einzelne Meinung soll
|
||||
bei einem Menschen nicht als Urteil des Teams ankommen. */
|
||||
const meine = r.bloecke.flatMap((b) => b.punkte).filter((pt) => pt.zugetragen);
|
||||
|
||||
/* ==== WELCHE ABSCHNITTE STEHEN OFFEN? (30.09.2026) ============
|
||||
Dieselbe Überlegung wie bei der Karte der Leitung: Alle zu
|
||||
hieße „jedes Mal erst suchen", alle auf wäre der Zustand von
|
||||
vorher — gemessen 6186 px, 85 Prozent der Seite.
|
||||
|
||||
Offen steht, was ich TUN soll, und von den Beobachtungen die
|
||||
erste Kategorie. Man landet dort, wo etwas zu sehen ist. */
|
||||
const mitInhalt = r.bloecke.filter((b) =>
|
||||
b.punkte.some((pt) => !pt.offen && !pt.zugetragen));
|
||||
if (offeneEigene === null) {
|
||||
offeneEigene = new Set(['auftrag']);
|
||||
if (mitInhalt[0]) offeneEigene.add(mitInhalt[0].schluessel);
|
||||
}
|
||||
|
||||
/* Die Leiste mit „Alle auf-/zuklappen" — dieselbe wie nebenan.
|
||||
Sie steht nur da, wenn es überhaupt etwas zu klappen gibt: Ein
|
||||
Knopf, der auf einer leeren Karte „Alle aufklappen" anbietet,
|
||||
ist eine Auskunft über nichts. */
|
||||
const klappbar = [
|
||||
...(meine.length ? ['auftrag'] : []),
|
||||
...mitInhalt.map((b) => b.schluessel),
|
||||
];
|
||||
const umschalter = [];
|
||||
let alleKnopf = null;
|
||||
if (klappbar.length > 1) {
|
||||
const leiste = el('div', 'e-bloecke__leiste');
|
||||
alleKnopf = el('button', 'e-bloecke__alle');
|
||||
alleKnopf.type = 'button';
|
||||
eigeneLeisteNachziehen = () => {
|
||||
const alleAuf = klappbar.every((k) => offeneEigene.has(k));
|
||||
alleKnopf.textContent = alleAuf ? 'Alle zuklappen' : 'Alle aufklappen';
|
||||
};
|
||||
eigeneLeisteNachziehen();
|
||||
alleKnopf.addEventListener('click', () => {
|
||||
const alleAuf = klappbar.every((k) => offeneEigene.has(k));
|
||||
if (alleAuf) for (const k of klappbar) offeneEigene.delete(k);
|
||||
else for (const k of klappbar) offeneEigene.add(k);
|
||||
for (const u of umschalter) u(!alleAuf);
|
||||
eigeneLeisteNachziehen();
|
||||
});
|
||||
leiste.append(alleKnopf);
|
||||
ziel.append(leiste);
|
||||
} else {
|
||||
eigeneLeisteNachziehen = null;
|
||||
}
|
||||
|
||||
if (meine.length) {
|
||||
const auf = el('section', 'e-block e-block--auftrag');
|
||||
auf.append(el('h3', 'e-block__titel',
|
||||
meine.length === 1 ? 'Deine Aufgabe' : `Deine Aufgaben (${meine.length})`));
|
||||
auf.append(el('p', 'e-block__text',
|
||||
const k = klappAbschnitt('auftrag',
|
||||
meine.length === 1 ? 'Deine Aufgabe' : 'Deine Aufgaben',
|
||||
String(meine.length), offeneEigene.has('auftrag'));
|
||||
const auf = k.abschnitt;
|
||||
auf.classList.add('e-block--auftrag');
|
||||
umschalter.push(k.umschalten);
|
||||
k.koerper.append(el('p', 'e-block__satz',
|
||||
'Das ist dir zugetragen. Daran arbeitest du – unabhängig davon, '
|
||||
+ 'ob schon jemand etwas dazu notiert hat.'));
|
||||
for (const pt of meine) {
|
||||
@@ -2175,7 +2295,7 @@
|
||||
} else {
|
||||
zeile.append(antwortReihe(pt));
|
||||
}
|
||||
auf.append(zeile);
|
||||
k.koerper.append(zeile);
|
||||
}
|
||||
ziel.append(auf);
|
||||
}
|
||||
@@ -2205,21 +2325,25 @@
|
||||
+ 'Du siehst die Antworten, nicht wer was gesetzt hat – und nicht, was '
|
||||
+ 'danebengeschrieben steht. Das gehört ins Gespräch: frag danach.';
|
||||
|
||||
for (const b of r.bloecke) {
|
||||
for (const b of mitInhalt) {
|
||||
/* WAS OBEN SCHON STEHT, STEHT NICHT NOCH EINMAL. Eine Aufgabe
|
||||
zweimal auf derselben Seite liest sich wie zwei Aufgaben. */
|
||||
const fertige = b.punkte.filter((pt) => !pt.offen && !pt.zugetragen);
|
||||
if (!fertige.length) continue;
|
||||
const abschnitt = el('section', 'e-block');
|
||||
abschnitt.append(el('h3', 'e-block__titel', b.name));
|
||||
const k = klappAbschnitt(b.schluessel, b.name, String(fertige.length),
|
||||
offeneEigene.has(b.schluessel));
|
||||
umschalter.push(k.umschalten);
|
||||
/* Der erklärende Satz gehört in den Körper, nicht in den Kopf:
|
||||
Zugeklappt will man die Überschrift lesen, nicht einen
|
||||
Absatz. Dieselbe Entscheidung wie bei der Karte nebenan. */
|
||||
if (b.text) k.koerper.append(el('p', 'e-block__satz', b.text));
|
||||
for (const pt of fertige) {
|
||||
const zeile = el('article', 'e-punkt e-punkt--meine');
|
||||
if (pt.einig) zeile.dataset.stufe = pt.antworten[0].stufe;
|
||||
zeile.append(el('h4', 'e-punkt__titel', pt.titel));
|
||||
zeile.append(antwortReihe(pt));
|
||||
abschnitt.append(zeile);
|
||||
k.koerper.append(zeile);
|
||||
}
|
||||
ziel.append(abschnitt);
|
||||
ziel.append(k.abschnitt);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user