Team-Lage: fuenf Stufen mit eigener Farbe, Karten neu gebaut, 404 wirft nicht mehr hinaus
B7 -- "wenn ich auf diese sachen drücke werd ich auf die startseite geschickt" und "ich will das es ein zwei kategorien mehr gibt und das soll geiler aussehen und jede seine eigene farbe, stark erkennbar" 1. DER RAUSWURF. Ein Druck auf einen Stufen-Knopf schickte auf die Startseite. Ursache: `hole()` stand ACHTMAL Zeichen fuer Zeichen gleich in acht Dateien, und darin warf JEDER 404 hinaus -- auch der auf eine blosse Handlung. Jetzt eine gemeinsame `assets/js/holen.js` mit der engeren, abgeleiteten Regel: Ein 404 wirft nur, solange die Seite noch gar nichts bekommen hat. 2. ZWEI STUFEN MEHR, und keine davon erfunden: "Fortgeschritten" gibt es im Entwicklungs-Katalog laengst (ENTWICKLUNG_ERWARTUNG), hier fehlte genau diese Mitte; "Vertretung" stand bis heute IN der Beschreibung von Senior. Keine Datenbankaenderung noetig -- die Spalte ist absichtlich ein TEXT ohne CHECK. 3. DIE FARBEN SIND GERECHNET. Nachgemessen lagen "Probe" und "Standard" bei 0,0576 OKLab-Abstand; MINDEST_ABSTAND ist 0,090 -- die beiden waren nebeneinander dieselbe Farbe, und alle drei lagen unter MINDEST_BUNTHEIT. Die neuen fuenf sind ein Faecher aus fuenf Farbwinkeln im Abstand von 72 Grad; der Versatz ist der, bei dem der kleinste Abstand am groessten wird. Ergebnis: 0,1531 untereinander, 0,1108 zur Rollenmarke daneben, Kontrast 7,4 bis 8,6. B8 -- "die sollen viel krasser geiler und übersichtlicher sein ... und die kacheln sollen viel krass geiler und spezieller aussehen auch der hintergrund, veränder das komplett" 4. DIE KARTE IST NEU: Kopfband in der Farbe der Stufe bis an die Kanten, Zeichen von 44 auf 52 px mit Ring, Zahlenband als eigene Flaeche, neuer Hintergrund (Farbschein unter dem Kopfband, feine Schraffur, dunklere Platte). 781 px hoch gemessen, danach 746. 5. DIE ROLLE STEHT JETZT DA -- als Marke auf der Karte und als Ueberschrift ueber jeder Gruppe. Sortiert war schon vorher nach Rolle; man konnte es nur nicht sehen. DREI FEHLER, DIE DABEI AUFFIELEN * `auto-fit` liess die einzelne Karte der rechten Hand ueber die ganze Bildschirmbreite laufen, sobald gruppiert wurde. `auto-fill` haelt die leeren Spalten offen. * Der Name der Person trug `tperson__namen` statt `tperson__name` -- ein Buchstabe, und damit die Klasse fuer graues Kleingedrucktes. Auf einer Seite ueber Personen war der Name kleiner als die Beschriftung darunter. Gefunden hat es die neue Pruefung, die ueberall "?" las. * `stufeSetzen()` suchte das Stufen-Schild mit `[class*="tmerkmal--"]:not(...)` -- einer Aufzaehlung dessen, was es NICHT ist. Sobald die Rollenmarke davorstand, traf die Suche sie: Ein Druck auf "Standard" haette aus "Modi" das Wort "Standard" gemacht. Und die Karte faerbte sich beim Setzen nicht mit um. DREI PRUEFUNGEN, ALLE MIT GEGENPROBE * pruef-holen.mjs (NEU, 14): fuehrt die echte Datei aus und misst fuenf Wege; dieselben fuenf noch einmal an der ALTEN Fassung, die bei genau zwei durchfallen muss. Dazu: laedt jede der acht Seiten holen.js, und zwar VOR ihrem Skript. * pruef-teamlage-karten.mjs (NEU, 22): im Browser. Gruppen, Rollenwort, Stufenknoepfe nur bei Modis, der Druck selbst (kein Sprung, ein Abruf, Schild und Kartenfarbe ziehen mit), Gegenprobe mit dem zweiten Druck, und die neuen Baender auf 390 px. * pruef-team-stufen.mjs (28 -> 47): die abgeschriebene Liste ["probe","standard","senior"] ist raus -- geprueft werden jetzt Eigenschaften und die Farbabstaende, gelesen aus team.css. Gegenprobe ist der Stand von gestern, der durch dieselbe Messung faellt. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1015,7 +1015,7 @@
|
||||
}
|
||||
/* Der Name darf hier etwas mehr Gewicht haben -- es ist die Karte, die
|
||||
man zuerst ansieht. */
|
||||
.tperson[data-rolle="hand"] .tperson__namen { color: #f7e3ac; }
|
||||
.tperson[data-rolle="hand"] :is(.tperson__name, .tperson__namen) { color: #f7e3ac; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.tperson { border: 1px solid CanvasText; }
|
||||
|
||||
+390
-18
@@ -353,6 +353,78 @@
|
||||
Frage, sie gibt nur Zusammenhang. */
|
||||
.tmerkmal--leise { opacity: .78; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE ROLLE (22.09.2026)
|
||||
---------------------------------------------------------------------
|
||||
Filipe: „und auch den rollen entsprechend reihenfolge. nicht einfach
|
||||
so sondern die rolle soll die reihenfolge ausmachen."
|
||||
|
||||
Gemessen war die Reihenfolge schon nach Rolle sortiert -- man konnte
|
||||
es nur nicht sehen: Auf der Karte stand die STUFE („Probe"), nie die
|
||||
Rolle. Eine Ordnung, die man nicht sehen kann, sieht aus wie Zufall.
|
||||
|
||||
DIE ROLLENMARKE IST DIE ERSTE UND DIE KRAEFTIGSTE. Sie steht vor der
|
||||
Stufe, weil sie die groessere Frage beantwortet: WAS jemand ist,
|
||||
nicht wie weit er darin ist. Gefuellt statt umrandet -- die anderen
|
||||
Marken sind Auskunft, diese ist Einordnung.
|
||||
--------------------------------------------------------------------- */
|
||||
.tmerkmal--rolle {
|
||||
color: #0a0f18;
|
||||
background: color-mix(in srgb, var(--rm, #9fb6c6) 82%, #ffffff);
|
||||
border-color: color-mix(in srgb, var(--rm, #9fb6c6) 60%, transparent);
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
/* Jede Rolle ihr Ton. Die rechte Hand behaelt ihr Gold -- es ist
|
||||
dasselbe, das die Karte schon traegt; ein zweiter Ton daneben waere
|
||||
eine zweite Sprache fuer dieselbe Sache. */
|
||||
.tmerkmal--r-hand { --rm: #f0c14b; }
|
||||
.tmerkmal--r-linke { --rm: #d8a7f5; }
|
||||
.tmerkmal--r-modi { --rm: #8fd6ff; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE GRUPPENUEBERSCHRIFT
|
||||
---------------------------------------------------------------------
|
||||
Vier Karten hintereinander sehen gleich aus, egal in welcher
|
||||
Reihenfolge sie stehen. Erst die Zaesur macht aus der Sortierung
|
||||
eine Gliederung.
|
||||
|
||||
Sie steht nur da, wenn es mehr als eine Gruppe gibt -- bei einer
|
||||
waere sie keine Gliederung, sondern eine Zeile, die sagt, was man
|
||||
ohnehin sieht.
|
||||
--------------------------------------------------------------------- */
|
||||
.t-gruppe {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin: 24px 0 10px;
|
||||
font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--tg, #9fb6c6);
|
||||
}
|
||||
.t-gruppe[data-rolle="hand"] { --tg: #f0c14b; }
|
||||
.t-gruppe[data-rolle="linke"] { --tg: #d8a7f5; }
|
||||
.t-gruppe[data-rolle="modi"] { --tg: #8fd6ff; }
|
||||
/* Eine Linie, die bis zum Rand laeuft. Sie traegt die Zaesur; die
|
||||
Schrift allein ginge zwischen den Karten unter. */
|
||||
.t-gruppe::after {
|
||||
content: ""; flex: 1 1 auto; height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--tg) 45%, transparent),
|
||||
transparent 70%);
|
||||
}
|
||||
.t-gruppe__zahl {
|
||||
padding: 1px 9px; border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--tg) 12%, transparent);
|
||||
font-size: .72rem; letter-spacing: 0;
|
||||
}
|
||||
/* Die erste Ueberschrift braucht oben keinen Abstand -- darueber steht
|
||||
schon die Trennung zur Warteliste. */
|
||||
.t-gruppe:first-of-type { margin-top: 6px; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.tmerkmal--rolle { border: 1px solid CanvasText; }
|
||||
.t-gruppe::after { background: CanvasText; }
|
||||
}
|
||||
|
||||
/* PAUSIERT FAELLT AUF, aber warm und nicht alarmierend: Eine Pause ist
|
||||
kein Fehler. Derselbe Ton wie die Warnung daneben, nur ruhiger --
|
||||
sonst liest man "pausiert" als "kaputt". */
|
||||
@@ -362,23 +434,79 @@
|
||||
background: rgba(255, 154, 162, .1);
|
||||
}
|
||||
|
||||
/* DIE DREI STUFEN steigern sich sichtbar, ohne dass eine davon nach
|
||||
Rang aussieht: gleiche Form, nur mehr Farbe. Probe bleibt bewusst
|
||||
das ruhigste Schild -- wer neu ist, soll nicht markiert wirken. */
|
||||
/* =====================================================================
|
||||
DIE FUENF STUFENFARBEN (22.09.2026) -- GERECHNET, NICHT GEWAEHLT
|
||||
=====================================================================
|
||||
|
||||
Filipe: „und ich will das es ein zwei kategorien mehr gibt und das
|
||||
soll geiler aussehen und jede seine eigene farbe, stark erkennbar."
|
||||
|
||||
DER ALTE STAND WAR MESSBAR ZU NAH BEIEINANDER. Nachgerechnet in
|
||||
OKLab, mit denselben Schwellen, die das ganze Haus benutzt
|
||||
(tools/kachelton-regeln.mjs):
|
||||
|
||||
probe #9fb6c6 <-> standard #7fc4e8 Abstand 0,0576
|
||||
probe <-> senior #8fd6a6 Abstand 0,1136
|
||||
standard <-> senior Abstand 0,1202
|
||||
|
||||
MINDEST_ABSTAND ist 0,090. Das erste Paar lag DARUNTER -- „Probe"
|
||||
und „Standard" waren nebeneinander praktisch dieselbe Farbe. Und
|
||||
die Buntheit lag bei 0,034 / 0,086 / 0,099, alle drei unter
|
||||
MINDEST_BUNTHEIT (0,12): blass, genau das, was er gemeldet hat.
|
||||
Der Kommentar, der hier stand, nannte das eine Absicht („Probe
|
||||
bleibt bewusst das ruhigste Schild"). Die Absicht war gut gemeint
|
||||
und hat dazu gefuehrt, dass man zwei Stufen nicht unterscheiden
|
||||
konnte.
|
||||
|
||||
DIE NEUEN FUENF SIND EIN GLEICHMAESSIGER FAECHER: fuenf Farbwinkel
|
||||
im Abstand von 72 Grad, alle auf derselben Helligkeit (OKLab
|
||||
L = 0,74) und jeweils so bunt, wie es bei diesem Winkel gerade noch
|
||||
in sRGB passt. Der Versatz (54 Grad) ist nicht gewaehlt, sondern
|
||||
ausgerechnet: Von allen 72 moeglichen Drehungen ist es die, bei der
|
||||
der KLEINSTE Abstand am groessten wird -- auch zum Babyblau der
|
||||
Rollenmarke „Modi", die direkt daneben steht.
|
||||
|
||||
Gemessen ergibt das:
|
||||
|
||||
kleinster Abstand untereinander 0,1531 (Schwelle 0,090)
|
||||
kleinster Abstand zur Rollenmarke 0,1108
|
||||
kleinster Abstand zu „pausiert" 0,1273
|
||||
Kontrast gegen den Kartengrund 7,3 bis 8,6 (noetig: 4,5)
|
||||
Buntheit 0,126 bis 0,212 (0,12-0,30)
|
||||
|
||||
Die Reihenfolge ist ausserdem KALT NACH WARM -- Probe fliederblau,
|
||||
Vertretung magenta. Damit traegt die Farbe dieselbe Aussage wie die
|
||||
Reihenfolge der Knoepfe: Man sieht die Steigerung, ohne zu lesen.
|
||||
|
||||
Nachgeprueft wird das nicht hier, sondern in pruef-team-stufen.mjs:
|
||||
Die Pruefung liest STUFEN aus dem Server und die Farben aus DIESER
|
||||
Datei und rechnet die Abstaende nach. Ein Kommentar, der eine Zahl
|
||||
behauptet, ist kein Nachweis.
|
||||
===================================================================== */
|
||||
.tmerkmal--probe {
|
||||
color: color-mix(in srgb, #9fb6c6 82%, #ffffff);
|
||||
border-color: rgba(159, 182, 198, .3);
|
||||
background: rgba(159, 182, 198, .08);
|
||||
color: color-mix(in srgb, #8aa5ff 82%, #ffffff);
|
||||
border-color: rgba(138, 165, 255, .42);
|
||||
background: rgba(138, 165, 255, .13);
|
||||
}
|
||||
.tmerkmal--standard {
|
||||
color: color-mix(in srgb, #7fc4e8 82%, #ffffff);
|
||||
border-color: rgba(127, 196, 232, .34);
|
||||
background: rgba(127, 196, 232, .1);
|
||||
color: color-mix(in srgb, #00c2c7 82%, #ffffff);
|
||||
border-color: rgba(0, 194, 199, .42);
|
||||
background: rgba(0, 194, 199, .13);
|
||||
}
|
||||
.tmerkmal--fort {
|
||||
color: color-mix(in srgb, #8dbe00 82%, #ffffff);
|
||||
border-color: rgba(141, 190, 0, .42);
|
||||
background: rgba(141, 190, 0, .13);
|
||||
}
|
||||
.tmerkmal--senior {
|
||||
color: color-mix(in srgb, #8fd6a6 84%, #ffffff);
|
||||
border-color: rgba(143, 214, 166, .38);
|
||||
background: rgba(143, 214, 166, .12);
|
||||
color: color-mix(in srgb, #ff8511 82%, #ffffff);
|
||||
border-color: rgba(255, 133, 17, .42);
|
||||
background: rgba(255, 133, 17, .13);
|
||||
}
|
||||
.tmerkmal--vertretung {
|
||||
color: color-mix(in srgb, #ff6ad0 82%, #ffffff);
|
||||
border-color: rgba(255, 106, 208, .42);
|
||||
background: rgba(255, 106, 208, .13);
|
||||
}
|
||||
|
||||
/* ---------- Die Stufe setzen (nur DogFather) --------------------------- */
|
||||
@@ -465,18 +593,39 @@
|
||||
/* 300 px ist nachgemessen und nicht geraten: Darunter bricht
|
||||
"Community" von der Zahl daneben ab, und die Stufenknoepfe fallen in
|
||||
drei Zeilen. Auf einem Handy bleibt es bei einer Spalte. */
|
||||
/* `auto-fill` UND NICHT `auto-fit` (22.09.2026).
|
||||
---------------------------------------------------------------------
|
||||
Der Unterschied fiel erst auf, als die Karten nach Rolle gruppiert
|
||||
wurden: `auto-fit` laesst leere Spalten zusammenfallen, und die
|
||||
uebrigen Karten ziehen sich ueber die frei gewordene Breite. Solange
|
||||
alle vier Personen in EINER Reihe standen, war das richtig. In einer
|
||||
Gruppe mit genau einer Person -- und die rechte Hand ist immer eine
|
||||
-- wurde daraus eine Karte ueber die gesamte Bildschirmbreite.
|
||||
|
||||
Im Bildschirmfoto vom 22.09. war Rieke damit 1800 px breit und hoeher
|
||||
als der sichtbare Bereich, waehrend die drei Modis darunter normal
|
||||
nebeneinander standen. Es sah aus wie zwei verschiedene Seiten.
|
||||
|
||||
`auto-fill` haelt die leeren Spalten offen. Eine Karte ist dann
|
||||
genauso breit wie jede andere, egal wie viele neben ihr stehen. Auf
|
||||
einem schmalen Schirm bleibt alles wie bisher: `min(300px, 100%)`
|
||||
laesst dort ohnehin nur eine Spalte zu. */
|
||||
.t-wartet, .t-leute {
|
||||
display: grid; gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* 2. DIE STUFE ALS FARBE DER KARTE.
|
||||
Dieselben drei Toene wie die Schilder darin -- ein vierter waere
|
||||
eine zweite Sprache fuer dieselbe Sache. */
|
||||
.tperson[data-stufe="probe"] { --r: #9fb6c6; }
|
||||
.tperson[data-stufe="standard"] { --r: #7fc4e8; }
|
||||
.tperson[data-stufe="senior"] { --r: #8fd6a6; }
|
||||
Dieselben fuenf Toene wie die Schilder darin -- ein sechster
|
||||
waere eine zweite Sprache fuer dieselbe Sache. Sie stehen hier
|
||||
ein zweites Mal, weil CSS keine Zuordnung kennt; dass beide
|
||||
Listen gleich sind, weist pruef-team-stufen.mjs nach. */
|
||||
.tperson[data-stufe="probe"] { --r: #8aa5ff; }
|
||||
.tperson[data-stufe="standard"] { --r: #00c2c7; }
|
||||
.tperson[data-stufe="fort"] { --r: #8dbe00; }
|
||||
.tperson[data-stufe="senior"] { --r: #ff8511; }
|
||||
.tperson[data-stufe="vertretung"] { --r: #ff6ad0; }
|
||||
/* Pausiert wird leiser, nicht ausgegraut: 0,72 statt 0,6 (das ist der
|
||||
Wert fuer GESPERRT). Eine Pause ist kein Entzug. */
|
||||
.tperson[data-pause="ja"] { opacity: .72; }
|
||||
@@ -763,3 +912,226 @@
|
||||
Zeichen; die Grenze steht jetzt am oberen Ende dieses Bereichs und
|
||||
nicht darunter. */
|
||||
.t-kopf__grenze { max-width: 68ch; }
|
||||
|
||||
/* =======================================================================
|
||||
DIE PERSONENKARTE, KOMPLETT ANDERS (22.09.2026)
|
||||
=======================================================================
|
||||
|
||||
Filipe: „was verstehst du nicht wenn ich sage die sollen viel
|
||||
krasser geiler und übersichtlicher sein. […] und die kacheln sollen
|
||||
viel krass geiler und spezieller aussehen auch der hintergrund,
|
||||
veränder das komplett."
|
||||
|
||||
Das „was verstehst du nicht" ist berechtigt: Am 20.09. hatte ich
|
||||
dieselbe Karte schon einmal angefasst und dabei nur die RECHTE HAND
|
||||
besonders gemacht. Die Modi-Karten sahen danach aus wie vorher --
|
||||
dunkles Rechteck, Raster, ein Kantenlicht in einem blassen Ton.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WAS HIER ANDERS IST -- vier Dinge, keine Effekte
|
||||
|
||||
1. EIN KOPFBAND. Bis heute begann die Karte mit einem Kreis und
|
||||
einem Namen auf demselben Grund wie alles darunter. Vier Karten
|
||||
nebeneinander waren dadurch vier gleiche Rechtecke, in denen man
|
||||
den Namen SUCHEN musste. Jetzt traegt der Kopf ein eigenes Band
|
||||
in der Farbe der Stufe, bis an die Kanten der Karte (auch bis in
|
||||
die Fase -- `clip-path` an der Karte schneidet es sauber ab).
|
||||
Damit ist auf zwei Meter Entfernung erkennbar, wessen Karte das
|
||||
ist und wo sie anfaengt.
|
||||
|
||||
2. DER HINTERGRUND IST NICHT MEHR NEUTRAL. Er hatte einen
|
||||
Farbschimmer von 11 % aus einer Ecke; bei den alten, blassen
|
||||
Stufentoenen war davon nichts zu sehen. Jetzt laeuft die Farbe
|
||||
vom Kopfband aus nach unten aus und die Karte steht auf einer
|
||||
DUNKLEREN Grundplatte als zuvor. Beides zusammen: mehr Farbe UND
|
||||
besserer Textkontrast -- das ist kein Widerspruch, weil die Farbe
|
||||
oben liegt und der Text unten.
|
||||
|
||||
3. DER KREIS WIRD EIN ZEICHEN. 44 px ohne Rand waren ein Punkt
|
||||
neben einem Wort. 52 px mit einem Ring in der Stufenfarbe sind
|
||||
ein Abzeichen. Derselbe Ring liegt um das Foto, wenn es eins
|
||||
gibt -- ein Mensch mit Bild und einer ohne sollen gleich viel
|
||||
Platz und dieselbe Form haben.
|
||||
|
||||
4. DIE ZAHLEN STEHEN AUF EINEM SOCKEL. Sie sind der Teil, den man
|
||||
im Vorbeigehen liest. Ein eigener, dunklerer Streifen am Fuss
|
||||
trennt sie von den Balken darueber, statt sie in dieselbe Flaeche
|
||||
zu mischen.
|
||||
|
||||
AUGENSCHONEND BLEIBT ES: keine Bewegung, kein Leuchten, kein
|
||||
Flackern. Die staerkste Farbfaeche der Karte liegt bei 30 % Deckung
|
||||
ueber einem fast schwarzen Grund. Was sich geaendert hat, ist die
|
||||
ANORDNUNG -- und die kostet die Augen nichts.
|
||||
======================================================================= */
|
||||
|
||||
/* ---- 1. Das Kopfband -------------------------------------------------- */
|
||||
/* `z-index: 1` liegt zwischen Raster (::after, 0) und Kantenlicht
|
||||
(::before, 2). Ohne ihn verschwaende das Band unter dem Raster --
|
||||
nicht falsch, aber flau. */
|
||||
.tperson__kopf {
|
||||
position: relative; z-index: 1;
|
||||
margin: -17px -19px 14px;
|
||||
padding: 15px 19px 13px;
|
||||
gap: 13px;
|
||||
background:
|
||||
linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--r) 30%, transparent) 0%,
|
||||
color-mix(in srgb, var(--r) 12%, transparent) 52%,
|
||||
color-mix(in srgb, var(--r) 4%, transparent) 100%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--r) 36%, transparent);
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
/* Die Karte hat auf schmalen Schirmen weniger Polster (14/15 px),
|
||||
also braucht das Band andere Gegenmasse. Eine feste Zahl gehoert
|
||||
dorthin, wo das steht, was sie ausgleicht. */
|
||||
.tperson__kopf { margin: -14px -15px 12px; padding: 13px 15px 11px; }
|
||||
}
|
||||
|
||||
/* ---- 2. Der Grund ----------------------------------------------------- */
|
||||
/* Die deckende Grundfarbe setzt weiterhin module.css (#070b12) -- sie
|
||||
muss decken, weil die Karte auf dem Buehnenbild der Seite liegt.
|
||||
Hier stehen nur die Ebenen DARUEBER. */
|
||||
.tperson {
|
||||
background:
|
||||
/* Der Schein, der unter dem Kopfband hervorkommt und nach etwa
|
||||
einem Drittel der Karte ausgelaufen ist. */
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--r) 13%, transparent) 0%,
|
||||
color-mix(in srgb, var(--r) 4%, transparent) 22%,
|
||||
transparent 38%),
|
||||
/* Eine sehr feine Schraffur -- sie gibt der Flaeche eine Oberflaeche,
|
||||
ohne ein Muster zu sein. 2,2 % Weiss auf Schwarz ist an der
|
||||
Grenze des Sichtbaren, und genau dort soll sie liegen. */
|
||||
repeating-linear-gradient(115deg,
|
||||
rgba(255, 255, 255, .022) 0 1px, transparent 1px 10px),
|
||||
/* Und die Platte darunter, dunkler als vorher. */
|
||||
linear-gradient(178deg, rgba(8, 11, 18, .97), rgba(4, 6, 11, .99));
|
||||
}
|
||||
|
||||
/* ---- 3. Das Zeichen --------------------------------------------------- */
|
||||
.tperson__zeichen,
|
||||
.tperson__bild {
|
||||
width: 52px; height: 52px;
|
||||
box-shadow:
|
||||
0 0 0 2px color-mix(in srgb, var(--r) 55%, transparent),
|
||||
0 0 0 3px rgba(0, 0, 0, .45);
|
||||
}
|
||||
.tperson__zeichen {
|
||||
font-size: 1.24rem;
|
||||
border-color: color-mix(in srgb, var(--r) 20%, transparent);
|
||||
background: color-mix(in srgb, var(--r) 22%, #070a11);
|
||||
}
|
||||
.tperson__bild { border-color: transparent; }
|
||||
|
||||
/* Der Name traegt das Band -- er ist der Grund, warum man hinsieht. */
|
||||
.tperson__kopf .tperson__name {
|
||||
font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
/* ---- 4. Das Zahlenband ------------------------------------------------ */
|
||||
/* EIN BAND, KEIN SOCKEL -- und das ist ein Unterschied, der beinahe
|
||||
danebengegangen waere. Ein Sockel klebt am unteren Rand der Karte;
|
||||
dafuer muesste er das letzte Element sein. Er ist es NICHT: Unter
|
||||
den Zahlen kommen auf der Team-Lage noch die drei Bereichsbalken,
|
||||
und auf team.html noch mehr. Ein negativer Aussenabstand nach unten
|
||||
haette die Balken unter das Band geschoben.
|
||||
|
||||
Gepruefte Reihenfolge in teamlage.js: Kopf, Merkmale, Ampel,
|
||||
Stufen, Schreiben, ZAHLEN, Balken. Also blutet das Band nur zu den
|
||||
Seiten aus und traegt oben wie unten eine Kante -- das funktioniert
|
||||
an jeder Stelle der Karte, auch wenn morgen etwas dazwischen kommt. */
|
||||
.tperson__zahlen {
|
||||
position: relative; z-index: 1;
|
||||
margin: 14px -19px;
|
||||
padding: 13px 19px;
|
||||
/* NUR ANGEDUNKELT, NICHT ZUGEDECKT. Zuerst stand hier schwarz mit
|
||||
34-52 % -- im Bildschirmfoto wurde daraus ein schwarzer Riegel
|
||||
quer durch die Karte, waehrend die Mitte den lila Himmel des
|
||||
Hauses zeigte. Drei verschiedene Flaechen uebereinander sehen
|
||||
nicht nach einer Karte aus, sondern nach drei. 14-22 % dunkelt
|
||||
genug, um die Zahlen abzusetzen, und laesst den Himmel durch. */
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .22));
|
||||
border-top: 1px solid color-mix(in srgb, var(--r) 20%, rgba(255, 255, 255, .06));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .05);
|
||||
}
|
||||
/* Steht es doch einmal ganz unten (keine Balken), soll die Karte nicht
|
||||
mit einer Kante mitten im Polster aufhoeren. */
|
||||
.tperson__zahlen:last-child {
|
||||
margin-bottom: -19px; padding-bottom: 16px; border-bottom: 0;
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.tperson__zahlen { margin: 12px -15px; padding: 12px 15px; }
|
||||
.tperson__zahlen:last-child { margin-bottom: -16px; padding-bottom: 14px; }
|
||||
}
|
||||
|
||||
/* ---- 5. Fuenf Stufenknoepfe statt drei -------------------------------- */
|
||||
/* Bei fuenf Knoepfen auf einer 300 px breiten Karte wird aus einer
|
||||
Reihe eine Wand. Etwas schmaler und ein engerer Abstand halten sie
|
||||
auf zwei Zeilen statt auf drei -- gemessen, nicht geschaetzt. */
|
||||
.tstufen { gap: 5px; }
|
||||
.tstufen__knopf { padding: 6px 10px; font-size: .75rem; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.tperson__kopf { border-bottom: 1px solid CanvasText; }
|
||||
.tperson__zahlen { border-top: 1px solid CanvasText; }
|
||||
.tperson__zeichen, .tperson__bild { box-shadow: none; border: 1px solid CanvasText; }
|
||||
}
|
||||
|
||||
/* ---- 6. Die Karte wird kuerzer --------------------------------------- */
|
||||
/* GEMESSEN, BEVOR ETWAS GEAENDERT WURDE (22.09.2026, 1420 px breit):
|
||||
Karte 781 px hoch, davon Kopf 82, Merkmale 28, Ampel 95,
|
||||
Schreiben-Knopf 60, ZAHLEN 167, BALKEN 276. Die beiden letzten
|
||||
machen mehr als die Haelfte aus -- also wird dort gekuerzt und
|
||||
nicht dort, wo es am leichtesten faellt.
|
||||
|
||||
Filipe zu einer anderen Seite, dieselbe Sache: „es ist alles so
|
||||
lang gezogen, muss ewig scrollen um alles zu sehen das ist uncool."
|
||||
Gekuerzt wird der Leerraum, nicht der Inhalt: Es steht hinterher
|
||||
dasselbe da. */
|
||||
.tperson .tz { padding: 8px 11px; }
|
||||
.tperson .tz__schild { line-height: 1.3; }
|
||||
.tperson .tfort { gap: 7px; margin-top: 12px; padding-top: 11px; }
|
||||
.tperson .tfort__zeile { padding: 9px 11px; gap: 5px; }
|
||||
.tperson .tampel { margin-top: 12px; }
|
||||
.tperson .tschreiben { margin: 2px 0 10px; padding: 9px 14px; }
|
||||
|
||||
/* ---- 7. Die Stufenknoepfe tragen ihre eigene Farbe -------------------- */
|
||||
/* IM BILDSCHIRMFOTO VOM 22.09. WAREN ALLE FUENF BABYBLAU, auch der
|
||||
gewaehlte. Der Knopf "Senior" fuehrte also zu einer orangen Karte,
|
||||
sah selbst aber aus wie "Standard". Filipe: „jede seine eigene
|
||||
farbe, stark erkennbar" -- das gilt fuer die Stelle, an der man die
|
||||
Stufe WAEHLT, mindestens so sehr wie fuer die, an der sie steht.
|
||||
|
||||
Der gewaehlte Knopf ist gefuellt (wie bisher), die uebrigen tragen
|
||||
ihren Ton nur angedeutet: als Schrift und Rand. Fuenf gefuellte
|
||||
Pillen nebeneinander waeren Konfetti; fuenf angedeutete sind eine
|
||||
Leiter, die man von links nach rechts liest.
|
||||
|
||||
`--st` steht je Knopf am `data-stufe`, das Skript setzt es ohnehin.
|
||||
Die Farbwerte sind dieselben fuenf wie oben -- dass sie
|
||||
uebereinstimmen, weist pruef-team-stufen.mjs nach. */
|
||||
.tstufen__knopf[data-stufe="probe"] { --st: #8aa5ff; }
|
||||
.tstufen__knopf[data-stufe="standard"] { --st: #00c2c7; }
|
||||
.tstufen__knopf[data-stufe="fort"] { --st: #8dbe00; }
|
||||
.tstufen__knopf[data-stufe="senior"] { --st: #ff8511; }
|
||||
.tstufen__knopf[data-stufe="vertretung"] { --st: #ff6ad0; }
|
||||
|
||||
.tstufen__knopf[data-stufe] {
|
||||
color: color-mix(in srgb, var(--st) 72%, #e8f1fa);
|
||||
border-color: color-mix(in srgb, var(--st) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--st) 7%, transparent);
|
||||
}
|
||||
.tstufen__knopf[data-stufe]:hover:not([disabled]) {
|
||||
color: color-mix(in srgb, var(--st) 40%, #ffffff);
|
||||
background: color-mix(in srgb, var(--st) 15%, transparent);
|
||||
border-color: color-mix(in srgb, var(--st) 48%, transparent);
|
||||
}
|
||||
.tstufen__knopf[data-an="ja"][data-stufe] {
|
||||
color: #0a121e;
|
||||
background: color-mix(in srgb, var(--st) 84%, #ffffff);
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.tstufen__knopf[data-an="ja"][data-stufe] { border: 2px solid Highlight; }
|
||||
}
|
||||
|
||||
@@ -29,12 +29,12 @@
|
||||
};
|
||||
const melde = (t) => { const f = $('fehler'); if (f) { f.textContent = t; f.hidden = !t; } };
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
let stufen = [];
|
||||
let daten = null;
|
||||
|
||||
@@ -374,12 +374,12 @@
|
||||
return { schluessel: 'laeuft', text: von === bis ? 'heute' : 'läuft bis ' + datum(bis) };
|
||||
}
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
function tuKnopf(text, tu) {
|
||||
const b = el('button', 'schritt', text);
|
||||
|
||||
@@ -51,12 +51,12 @@
|
||||
{ day: 'numeric', month: 'short', year: 'numeric' });
|
||||
};
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
let stufen = [];
|
||||
/* Welche Erwartungsstufe gerade gefiltert ist ('' = alle).
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
/* =====================================================================
|
||||
holen.js — ein Abruf, und was bei 401 und 404 passiert
|
||||
=====================================================================
|
||||
|
||||
ENTSTANDEN AUS EINEM ECHTEN FEHLER (22.09.2026).
|
||||
|
||||
Filipe: „wenn ich auf diese sachen drücke werd ich auf die startseite
|
||||
geschickt, scheck das bitte ab." Gemeint waren die Stufen-Knöpfe auf
|
||||
der Team-Lage. Nachgestellt im Browser:
|
||||
|
||||
Druck auf „Standard"
|
||||
→ PUT /workspace/api/teamlage/stufe 404
|
||||
→ Adresse springt auf /workspace/start.html
|
||||
|
||||
Die Ursache stand in acht Dateien, Zeichen für Zeichen dieselbe:
|
||||
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); … }
|
||||
|
||||
GEMEINT WAR ETWAS ANDERES ALS GESCHRIEBEN STAND. Die Zeile sollte
|
||||
sagen: „Du darfst diese Seite nicht sehen — hier ist der Ausgang."
|
||||
Geschrieben stand: „Irgendein Abruf hat 404 geliefert — raus mit
|
||||
dir." Eine einzelne Handlung, die nicht klappt, wirft damit den
|
||||
Menschen von einer Seite, auf der alles andere in Ordnung ist. Und
|
||||
er sieht nicht einmal, was schiefging: Die Meldung wäre auf der
|
||||
Seite erschienen, die gerade verschwindet.
|
||||
|
||||
DIE REGEL IST JETZT ENGER, UND ZWAR ABGELEITET STATT GEFLAGGT:
|
||||
Ein 404 wirft nur hinaus, solange die Seite noch gar nichts
|
||||
bekommen hat — also beim ersten Abruf, mit dem sie sich aufbaut.
|
||||
Ab dem Moment, in dem etwas Sinnvolles zurückkam, steht die Seite;
|
||||
ein späterer 404 ist die Antwort auf eine Handlung und gehört als
|
||||
Satz auf den Bildschirm, nicht als Sprung.
|
||||
|
||||
Eine Kennzeichnung je Aufrufstelle („dieser hier darf rauswerfen")
|
||||
wäre die Stelle, die beim nächsten neuen Aufruf vergessen wird.
|
||||
|
||||
WARUM EINE GEMEINSAME DATEI: Es waren acht Kopien. Als die Regel
|
||||
sich als falsch herausstellte, hätte man sie achtmal ändern müssen —
|
||||
und beim nächsten Mal wieder. Dieselbe Geschichte wie bei
|
||||
`.knopf-still`, beim Schalter, bei der Filterleiste, bei
|
||||
`.feld-hinweis` und beim Installieren-Knopf.
|
||||
|
||||
401 BLEIBT, WIE ES WAR: Wer abgemeldet ist, kann auf keiner Seite
|
||||
irgendetwas tun. Dort ist der Sprung zur Anmeldung die einzige
|
||||
sinnvolle Antwort, egal wann er kommt.
|
||||
===================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
/* Hat die Seite schon einmal etwas Brauchbares bekommen? Solange
|
||||
nicht, ist ein 404 die Auskunft „hierher gehörst du nicht". */
|
||||
let stehtSchon = false;
|
||||
|
||||
window.holen = async function holen(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
|
||||
if (a.status === 401) {
|
||||
location.assign('/workspace/');
|
||||
throw new Error('abgemeldet');
|
||||
}
|
||||
|
||||
const art = String(optionen.method || 'GET').toUpperCase();
|
||||
if (a.status === 404 && art === 'GET' && !stehtSchon) {
|
||||
location.assign('/workspace/start.html');
|
||||
throw new Error('nicht erlaubt');
|
||||
}
|
||||
|
||||
/* ERST NACH DER PRÜFUNG SETZEN, nicht davor: Sonst gälte schon der
|
||||
erste Abruf als „die Seite steht", und der Rauswurf käme nie. */
|
||||
if (a.ok) stehtSchon = true;
|
||||
return a;
|
||||
};
|
||||
|
||||
/* Nur für Prüfungen: den Zustand zurücksetzen, um beide Wege zu
|
||||
messen. Im Betrieb ruft das niemand — eine Seite wird geladen und
|
||||
fängt dabei von vorn an. */
|
||||
window.holen.zuruecksetzen = () => { stehtSchon = false; };
|
||||
})();
|
||||
@@ -47,12 +47,12 @@
|
||||
|
||||
let daten = null;
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
/* ---- Ein Feld ------------------------------------------------------- */
|
||||
function feld(seite, rolle) {
|
||||
|
||||
@@ -33,12 +33,12 @@
|
||||
const melde = (t) => { $('fehler').textContent = t || ''; };
|
||||
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '—');
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('kein Zugriff'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
/* Vorher/Nachher. `gut` sagt, ob ein Anstieg erfreulich ist -- bei
|
||||
offenen Problemen ist er das nicht. */
|
||||
|
||||
@@ -29,12 +29,12 @@
|
||||
};
|
||||
const melde = (t) => { const f = $('fehler'); if (f) { f.textContent = t; f.hidden = !t; } };
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
/* TAGESDATUM IN ORTSZEIT. Nicht toISOString().slice(0,10) -- das
|
||||
rechnet in UTC und liefert in Deutschland zwischen Mitternacht und
|
||||
|
||||
@@ -34,12 +34,12 @@
|
||||
};
|
||||
const melde = (t) => { $('fehler').textContent = t || ''; };
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('nicht erlaubt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
/* Der Median statt des Mittelwerts: Ein einzelner Ausreisser zieht
|
||||
einen Mittelwert mit sich und macht sich damit selbst unsichtbar.
|
||||
|
||||
+136
-15
@@ -37,12 +37,22 @@
|
||||
const stufenName = (wert) =>
|
||||
STUFEN.find((s) => s.wert === wert)?.name || STUFEN[0]?.name || '';
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('nicht erlaubt'); }
|
||||
return a;
|
||||
}
|
||||
/* Der Abruf steht seit dem 22.09.2026 in assets/js/holen.js.
|
||||
Er stand ACHTMAL da, Zeichen fuer Zeichen gleich -- und als
|
||||
die Regel darin sich als falsch herausstellte (jeder 404
|
||||
warf auf die Startseite, auch bei einer blossen Handlung),
|
||||
haette man sie achtmal aendern muessen. */
|
||||
const hole = (pfad, optionen) => window.holen(pfad, optionen);
|
||||
|
||||
/* DIE ROLLENWOERTER. Sie stehen hier und nicht im Server, weil die
|
||||
Antwort sie nicht mitschickt -- und zwei Woerter nachzuladen waere
|
||||
ein Abruf fuer nichts. Faellt eine Rolle durch, steht ihr
|
||||
technischer Name da: sichtbar falsch ist besser als leer. */
|
||||
const ROLLEN_WORT = {
|
||||
hand: 'Rechte Hand',
|
||||
linke: 'Linke Hand',
|
||||
modi: 'Modi',
|
||||
};
|
||||
|
||||
const tageHer = (iso) => {
|
||||
if (!iso) return null;
|
||||
@@ -142,7 +152,33 @@
|
||||
kopf.append(zeichen);
|
||||
|
||||
const text = el('div', 'tperson__text');
|
||||
text.append(el('p', 'tperson__namen', m.name));
|
||||
/* `tperson__name`, NICHT `tperson__namen` (22.09.2026).
|
||||
|
||||
Zwei Klassen, ein Buchstabe Unterschied, zwei voellig
|
||||
verschiedene Aufgaben:
|
||||
|
||||
.tperson__name der NAME einer Person -- 1,06 rem, kraeftig,
|
||||
volle Textfarbe
|
||||
.tperson__namen eine Aufzaehlung von Namen im Kleingedruckten
|
||||
("Wen genau") -- 0,84 rem, grau, leise
|
||||
|
||||
Hier stand die zweite. Der Name der Person auf einer Seite, die
|
||||
von Personen handelt, war damit kleiner und blasser als die
|
||||
Beschriftung darunter. Aufgefallen ist es nicht beim Lesen des
|
||||
Codes -- dort sieht ein "n" wie ein Tippfehler aus, den man
|
||||
ueberliest --, sondern weil pruef-teamlage-karten.mjs die Namen
|
||||
nicht finden konnte und ueberall "?" meldete.
|
||||
|
||||
Dass jemand es geahnt hat, steht in module.css: Dort faerbt eine
|
||||
Regel ausdruecklich `.tperson[data-rolle="hand"]
|
||||
.tperson__namen` golden. Sie faerbte also den Namen ueber die
|
||||
falsche Klasse nach -- und deckte damit die Ursache zu. Beide
|
||||
Klassen stehen dort jetzt nebeneinander.
|
||||
|
||||
Die beiden anderen Stellen in dieser Datei (Titel einer
|
||||
Rueckmeldung, Titel eines Angebots) bleiben bei
|
||||
`tperson__namen`: Dort IST es Kleingedrucktes. */
|
||||
text.append(el('p', 'tperson__name', m.name));
|
||||
/* WANN ZULETZT DA -- als Tatsache, nicht als Vorwurf. Wer zwei
|
||||
Wochen nicht da war, hat vielleicht Urlaub; die Zahl sagt nur,
|
||||
dass man nachfragen koennte. */
|
||||
@@ -169,8 +205,38 @@
|
||||
darunter -- null Aufgaben sind dann kein Grund nachzufragen. */
|
||||
if (!m.aktiv) merkmale.append(el('span', 'tmerkmal tmerkmal--pause', 'pausiert'));
|
||||
|
||||
merkmale.append(el('span', `tmerkmal tmerkmal--${m.stufe || 'probe'}`,
|
||||
stufenName(m.stufe)));
|
||||
/* DIE ROLLE STEHT JETZT DA (22.09.2026).
|
||||
|
||||
Filipe: „und auch den rollen entsprechend reihenfolge. nicht
|
||||
einfach so sondern die rolle soll die reihenfolge ausmachen."
|
||||
|
||||
GEMESSEN WAR DIE REIHENFOLGE SCHON RICHTIG -- die Abfrage
|
||||
sortiert seit Langem nach ROLLEN_SORTIERUNG. Auf der Karte stand
|
||||
aber nur die STUFE („Probe"), nie die Rolle. Eine Ordnung, die
|
||||
man nicht sehen kann, sieht aus wie Zufall; genau deshalb hat er
|
||||
sie nicht wiedererkannt.
|
||||
|
||||
Dieselbe Sache wie bei der ersten Bewerbung heute frueh: Erst
|
||||
das Wort macht aus einer Reihenfolge eine Auskunft. */
|
||||
merkmale.append(el('span', `tmerkmal tmerkmal--rolle tmerkmal--r-${m.rolle || 'modi'}`,
|
||||
ROLLEN_WORT[m.rolle] || m.rolle || 'Modi'));
|
||||
|
||||
/* Die Stufe nur, wo es eine gibt. Bei der rechten Hand stand
|
||||
bisher „Probe" -- sie hat aber gar keine Stufe, und der Server
|
||||
lehnt jede Aenderung daran mit 404 ab. Ein Wort, das niemand
|
||||
setzen kann, ist keine Auskunft, sondern eine Irrefuehrung. */
|
||||
if (m.stufe_aenderbar) {
|
||||
/* `tmerkmal--stufe` IST DER GRIFF, an dem stufeSetzen() diese
|
||||
Marke spaeter wiederfindet. Bis eben suchte es mit
|
||||
`[class*="tmerkmal--"]:not(...)` -- einer Aufzaehlung dessen,
|
||||
was es NICHT ist. Kaum stand die Rollenmarke davor, traf die
|
||||
Suche sie: Ein Druck auf "Standard" haette aus "Modi" das Wort
|
||||
"Standard" gemacht. Ein Griff, der sagt, was er ist, kann das
|
||||
nicht passieren. */
|
||||
merkmale.append(el('span',
|
||||
`tmerkmal tmerkmal--stufe tmerkmal--${m.stufe || 'probe'}`,
|
||||
stufenName(m.stufe)));
|
||||
}
|
||||
|
||||
if (m.seit) {
|
||||
const tage = tageHer(m.seit);
|
||||
@@ -247,7 +313,17 @@
|
||||
aendert sie aber nicht: Wer im Team auf welcher Stufe steht, ist
|
||||
eine Personalentscheidung (Blueprint 4.1, "Rechte anpassen"
|
||||
liegt beim Owner). Der Server sagt dasselbe noch einmal. */
|
||||
if (ich?.rolle === 'admin') {
|
||||
/* UND NUR DORT, WO ES EINE STUFE GIBT (22.09.2026).
|
||||
|
||||
Bis heute standen die drei Knoepfe an JEDER Karte -- auch an der
|
||||
der rechten Hand, die gar keine Stufe hat. Der Server antwortete
|
||||
mit 404, und der 404 warf von der Seite. Zwei Fehler
|
||||
hintereinander, und der sichtbare war der zweite.
|
||||
|
||||
`stufe_aenderbar` kommt vom Server, aus derselben Funktion, die
|
||||
auch den Weg zum Setzen absichert. Eine Rollenabfrage hier waere
|
||||
die zweite Wahrheit. */
|
||||
if (ich?.rolle === 'admin' && m.stufe_aenderbar) {
|
||||
const wahl = el('div', 'tstufen');
|
||||
wahl.append(el('span', 'tstufen__schild', 'Stufe'));
|
||||
for (const st of STUFEN) {
|
||||
@@ -388,11 +464,21 @@
|
||||
m.stufe = stufe;
|
||||
/* Das Schild oben in derselben Karte zieht mit -- sonst stuende
|
||||
dort die alte Stufe neben der neuen Auswahl. */
|
||||
const schild = wahl.parentElement?.querySelector('[class*="tmerkmal--"]:not(.tmerkmal--pause):not(.tmerkmal--leise)');
|
||||
const schild = wahl.parentElement?.querySelector('.tmerkmal--stufe');
|
||||
if (schild) {
|
||||
schild.className = `tmerkmal tmerkmal--${stufe}`;
|
||||
schild.className = `tmerkmal tmerkmal--stufe tmerkmal--${stufe}`;
|
||||
schild.textContent = stufenName(stufe);
|
||||
}
|
||||
/* UND DIE KARTE SELBST ZIEHT MIT (22.09.2026).
|
||||
|
||||
Die Stufe faerbt seit dem 10.09. die ganze Karte
|
||||
(`[data-stufe]` setzt `--r`, und daraus kommen Kantenlicht,
|
||||
Zeichen und Kopfband). Beim Setzen wurde bisher nur das
|
||||
Schild getauscht -- die Karte blieb in der alten Farbe stehen,
|
||||
bis jemand die Seite neu laedt. Mit drei blassen Toenen fiel
|
||||
das kaum auf; mit fuenf kraeftigen ist es der Unterschied
|
||||
zwischen "gespeichert" und "irgendwas stimmt nicht". */
|
||||
wahl.closest('.tperson')?.setAttribute('data-stufe', stufe);
|
||||
melde('');
|
||||
} catch {
|
||||
zeigen(vorher);
|
||||
@@ -674,9 +760,44 @@
|
||||
wartet.append(angeboteBauen(daten.angebote || []));
|
||||
ziel.append(wartet);
|
||||
|
||||
const runde = el('div', 't-leute');
|
||||
for (const m of leute) runde.append(karte(m));
|
||||
ziel.append(runde);
|
||||
/* ===================================================================
|
||||
NACH ROLLE GRUPPIERT, MIT UEBERSCHRIFT (22.09.2026)
|
||||
|
||||
„die rolle soll die reihenfolge ausmachen."
|
||||
|
||||
Die Reihenfolge kam schon vom Server (ROLLEN_SORTIERUNG). Was
|
||||
fehlte, war die Zaesur: Vier Karten hintereinander sehen
|
||||
gleich aus, egal in welcher Reihenfolge sie stehen. Eine
|
||||
Ueberschrift je Rolle macht aus der Sortierung eine sichtbare
|
||||
Gliederung -- und sagt nebenbei, wie viele es je Rolle gibt.
|
||||
|
||||
DIE GRUPPEN ENTSTEHEN AUS DER LISTE, nicht aus einer
|
||||
Aufzaehlung hier: Wer eine Rolle hinzufuegt, bekommt ihre
|
||||
Gruppe von selbst. Eine feste Liste waere die, die beim
|
||||
naechsten Rollenzuschnitt eine Gruppe verschluckt -- und die
|
||||
Leute darin mit ihr.
|
||||
|
||||
Bei nur EINER Gruppe faellt die Ueberschrift weg: Dann ist sie
|
||||
keine Gliederung, sondern eine Zeile, die sagt, was man sieht. */
|
||||
const nachRolle = [];
|
||||
for (const m of leute) {
|
||||
const letzte = nachRolle[nachRolle.length - 1];
|
||||
if (letzte && letzte.rolle === m.rolle) letzte.leute.push(m);
|
||||
else nachRolle.push({ rolle: m.rolle, leute: [m] });
|
||||
}
|
||||
for (const gruppe of nachRolle) {
|
||||
if (nachRolle.length > 1) {
|
||||
const kopf2 = el('h2', 't-gruppe');
|
||||
kopf2.append(el('span', 't-gruppe__wort',
|
||||
ROLLEN_WORT[gruppe.rolle] || gruppe.rolle || 'Team'));
|
||||
kopf2.append(el('span', 't-gruppe__zahl', String(gruppe.leute.length)));
|
||||
kopf2.dataset.rolle = gruppe.rolle || 'modi';
|
||||
ziel.append(kopf2);
|
||||
}
|
||||
const runde = el('div', 't-leute');
|
||||
for (const m of gruppe.leute) runde.append(karte(m));
|
||||
ziel.append(runde);
|
||||
}
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user