DogFatherGitandClaude Opus 5
49bd4a7cec
Filipe: "wieso greift das in die rechte rein? ist doch ok, die sollen einfach paar leute selber hinzufuegen koennen." Er hat recht, und ich hatte zwei Dinge in einen Topf geworfen: Das hier braucht KEINE Datenbankaenderung -- nur die Rolle "Spicy Media" braucht eine. WARUM EIN EIGENER WEG UND NICHT DIE ALTE TUER Alles unter /workspace/api/verwaltung haengt an EINER Schranke (nurAdmin). Dahinter liegen acht Wege: Rollen aendern, Codes neu setzen, sperren, loeschen, Protokoll lesen. Einen Manager dort hineinzulassen und danach in jedem der acht einzeln zu pruefen, was er darf, ist genau die Bauweise, durch die am 31.08.2026 ein Loch entstanden ist -- zwei von drei Stellen abgesichert, die dritte vergessen. Deshalb bleibt die Tuer zu, und daneben steht eine neue mit genau einem Zweck: POST /workspace/api/creator-anlegen. Sie kann nichts anderes, als einen Creator anzulegen -- nicht weil eine Abfrage es verbietet, sondern weil es hier keinen anderen Weg gibt. Unterschied zwischen "darf nicht" und "kann nicht". DIE ROLLE STEHT NICHT IM AUFRUF, sie wird im Server gesetzt. Ein Feld `rolle` im Koerper waere die naheliegende Loesung und die falsche: Dann muesste eine Abfrage sie pruefen, und eine vergessene Abfrage ist ein zweiter Zugang mit vollen Rechten. Geprueft wird deshalb nicht, dass ein mitgeschicktes `rolle: "admin"` abgelehnt wird, sondern dass es WIRKUNGSLOS ist. DIE ZUTEILUNG PASSIERT SOFORT. Ein Creator ohne Betreuung ist fuer alle ausser DogFather unsichtbar -- der Manager haette ihn angelegt und danach nicht mehr gesehen. Wer anlegt, betreut; ein eigener Scout kann mitgegeben werden. Eine FREMDE Scout-Nummer wird abgelehnt (403) und nicht stillschweigend auf den Anleger zurueckgesetzt: Sonst glaubte der Manager, er haette zugeteilt. Der Knopf sitzt auf dem Dashboard, nicht in der Personenverwaltung -- dort kommt ein Manager gar nicht hinein, und hier sieht er seine Creator ohnehin. Der Zugangscode steht einmal im Dialog und wird nie nachgeladen; deshalb schliesst sich das Fenster NICHT von selbst. pruef-creator-anlegen.mjs, 29 Pruefungen, alle gruen -- und die Haelfte davon prueft, was NICHT geht: Personenverwaltung 404 fuer Manager, Scout und Creator kommen gar nicht erst durch, fremder Scout 403 (und der Creator wird dabei gar nicht erst angelegt), erfundene Nummer 403. Zwei Manager mit je einem eigenen Scout, weil sich "nur die eigenen" mit nur einem Manager gar nicht pruefen laesst. Nebenbei: .feld-hinweis ist von bereich.css nach aufgaben.css gewandert (zu den uebrigen Formularstilen) -- ein Formularbaustein in der Bereichsdatei ist nur so lange richtig, wie ihn keine zweite Seite braucht. Gruen: creator-anlegen (29), personen-liste (33), css-klassen (15), struktur (32), formulare (19). Co-Authored-By: Claude Opus 5 <[email protected]>
367 lines
15 KiB
CSS
367 lines
15 KiB
CSS
/* ===================================================================
|
|
Dashboard -- die Gesamtuebersicht je Creator.
|
|
|
|
Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
|
|
Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
|
|
bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
|
|
und die Augen haetten nichts, worauf sie sich ausruhen koennen.
|
|
=================================================================== */
|
|
|
|
/* ---------- Summen oben ---------------------------------------------------- */
|
|
|
|
.summen {
|
|
display: grid; gap: 8px; margin-bottom: 26px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
|
|
}
|
|
.summe {
|
|
display: grid; gap: 2px; padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.summe[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .32);
|
|
background: rgba(255, 154, 162, .05);
|
|
}
|
|
.summe__zahl {
|
|
font-size: 1.6rem; font-weight: 700; line-height: 1.1;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
|
|
.summe__name {
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Karten --------------------------------------------------------- */
|
|
|
|
.creator-liste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
|
|
}
|
|
.creator {
|
|
position: relative; overflow: hidden;
|
|
padding: 18px 20px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
|
|
sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
|
|
.creator::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--akzent), transparent 85%);
|
|
opacity: .35;
|
|
}
|
|
.creator[data-achtung="ja"] {
|
|
border-color: rgba(255, 154, 162, .26);
|
|
}
|
|
.creator[data-achtung="ja"]::before {
|
|
background: linear-gradient(180deg, var(--warn), transparent 85%);
|
|
opacity: .75;
|
|
}
|
|
|
|
.creator__kopf {
|
|
display: flex; gap: 18px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
.creator__wer { min-width: 0; }
|
|
.creator__name {
|
|
margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
|
|
letter-spacing: -.01em; color: var(--text);
|
|
}
|
|
.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
|
|
.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }
|
|
|
|
.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
|
|
.naechstes__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.naechstes__wert {
|
|
font-size: .92rem; font-weight: 650; color: var(--text);
|
|
text-decoration: none; font-variant-numeric: tabular-nums;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
|
|
.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }
|
|
|
|
/* ---------- Zahlenreihe ---------------------------------------------------- */
|
|
|
|
.werte {
|
|
display: grid; gap: 6px;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.wert {
|
|
display: grid; gap: 1px; padding: 9px 4px 8px;
|
|
text-align: center; text-decoration: none;
|
|
border: 1px solid transparent; border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
|
|
.wert__zahl {
|
|
font-size: 1.22rem; font-weight: 700; line-height: 1.15;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
|
|
Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
|
|
kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
|
|
/* 0,7 rem = 11,2 px statt 9,6. Unter 10 px ist auch auf einem grossen
|
|
Bildschirm keine Beschriftung mehr, sondern ein Muster -- und es sind
|
|
ausgerechnet die Woerter, die den Zahlen darueber ihre Bedeutung
|
|
geben ("ueberfaellig", "dringend", "offen"). Auf dem Handy stand
|
|
laengst eine Ausnahme auf 0,75 rem; nur der Rechner war vergessen
|
|
worden. */
|
|
.wert__name {
|
|
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
|
|
.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
|
|
.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
|
|
.wert[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
|
|
}
|
|
.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
|
|
/* EIN ECHTER FARBWERT, kein halbdurchsichtiges Rosa (06.09.2026).
|
|
|
|
Hier stand `rgba(255, 154, 162, .8)`. Halbdurchsichtige Schrift
|
|
nimmt die Farbe von dem an, was zufaellig dahinterliegt -- sie
|
|
sieht so lange gut aus, wie der Untergrund dunkel bleibt, und
|
|
wird still unlesbar, sobald sich daran etwas aendert. Gemessen
|
|
von pruef-buehne an echten Bildpunkten: 4,05:1 statt der
|
|
noetigen 4,5:1 fuer "Ueberfaellig".
|
|
|
|
Derselbe Fehler steht zwei Dateien weiter schon als Warnung in
|
|
gate.css: "Neutral braucht einen echten Farbwert.
|
|
Halbdurchsichtiges Weiss ergab in der Messung 1,1:1." Es hilft
|
|
offenbar nichts, ihn EINMAL aufzuschreiben. */
|
|
.wert[data-warn="ja"] .wert__name { color: var(--warn); }
|
|
|
|
/* ---------- Start-Check ---------------------------------------------------- */
|
|
|
|
.fortschritt {
|
|
display: block; margin-top: 13px; padding: 11px 13px 12px;
|
|
text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo);
|
|
}
|
|
.fortschritt:hover { border-color: var(--rand-hell); }
|
|
.fortschritt__zeile {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
margin: 0 0 8px;
|
|
}
|
|
.fortschritt__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.fortschritt__warn {
|
|
margin-left: auto; padding: 1px 8px;
|
|
font-size: .7rem; font-weight: 650; color: var(--warn);
|
|
background: rgba(255, 154, 162, .1);
|
|
border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
|
|
}
|
|
.fortschritt__balken {
|
|
display: block; height: 5px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.fortschritt__fuellung {
|
|
display: block; height: 100%; border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
|
transition: width .4s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.fortschritt__fuellung[data-warn="ja"] {
|
|
background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
|
|
}
|
|
.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }
|
|
|
|
.creator__luecke {
|
|
display: block; margin: 10px 0 0; padding: 8px 12px;
|
|
font-size: .78rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
|
|
/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------
|
|
|
|
Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
|
|
abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
|
|
WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
|
|
Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
|
|
die nichts miteinander zu tun haben. */
|
|
.kzahlen {
|
|
display: flex; flex-wrap: wrap; gap: 8px 26px;
|
|
margin: 12px 0 0; padding: 12px 0 0;
|
|
border-top: 1px solid var(--rand);
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
|
|
.kzahlen[data-leer="ja"] { border-top-style: dashed; }
|
|
|
|
.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
|
|
.kzahlen__name {
|
|
font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.kzahlen__wert {
|
|
font-size: 1.05rem; color: var(--text);
|
|
/* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
|
|
Karten untereinander auf derselben Stelle sitzen. */
|
|
font-variant-numeric: tabular-nums;
|
|
transition: color var(--tempo);
|
|
}
|
|
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
|
|
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
|
|
.kzahlen__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
|
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
|
|
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
|
|
|
.kzahlen__leer { font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Die Frühwarnung ------------------------------------------------
|
|
|
|
Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
|
|
kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
|
|
aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
|
|
in den Bereichen, aus demselben Grund. */
|
|
.warnblock { margin: 0 0 26px; }
|
|
|
|
.warnliste {
|
|
display: grid; gap: 12px;
|
|
/* min(320px, 100%) statt 320px. Eine feste Mindestbreite ist auf einem
|
|
320-px-Schirm groesser als der Platz, der nach den Raendern uebrig
|
|
bleibt -- die Karte stand 9 px aus dem Bild (gemessen von
|
|
pruef-breiten). Dieselbe Schreibweise wie bei .creator-liste und
|
|
.summen zwei Abschnitte weiter oben; ich habe sie hier nur nicht
|
|
uebernommen. */
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
}
|
|
|
|
.warnkarte {
|
|
padding: 14px 16px 12px;
|
|
background:
|
|
radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
|
|
var(--flaeche);
|
|
border: 1px solid rgba(217, 164, 65, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
/* min-width: 0 UND umbrechen duerfen (06.09.2026).
|
|
|
|
`minmax(min(320px, 100%), 1fr)` begrenzt die SPALTE -- nicht das, was
|
|
darin steht. Solange die Karte ihren Mindestinhalt nicht unterbieten
|
|
darf, waechst die Spalte trotzdem mit: Bei 320 px stand sie 9 px aus
|
|
dem Bild, weil Name und "Schreiben"-Knopf nebeneinander bleiben
|
|
wollten. Beides zusammen loest es, einzeln keines von beiden. */
|
|
.warnkarte { min-width: 0; }
|
|
.warnkarte__kopf {
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
gap: 12px; margin-bottom: 10px;
|
|
flex-wrap: wrap; min-width: 0;
|
|
}
|
|
/* Ein sehr langer Name ohne Leerzeichen ("SpongBobSchwammKopf") ist
|
|
sonst selbst breiter als der Schirm. */
|
|
.warnkarte__name, .warnsignal__text { overflow-wrap: anywhere; }
|
|
.warnkarte__name {
|
|
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
|
|
/* EIN FINGERZIEL, KEIN WORT. Als schlichter Inline-Link war der Kasten
|
|
genau so gross wie der Name -- bei "Tili" 22 x 25 px. Das Mindestmass
|
|
nach WCAG 2.2 (2.5.8) sind 24 x 24; darunter trifft man mit dem
|
|
Daumen daneben, und zwar ausgerechnet bei kurzen Namen. Gemessen von
|
|
pruef-handy auf allen drei Geraeten.
|
|
|
|
Die negativen Aussenabstaende heben die Polsterung optisch wieder
|
|
auf: Der Name steht danach exakt dort, wo er vorher stand, hat aber
|
|
eine Flaeche, die man trifft. */
|
|
display: inline-flex; align-items: center;
|
|
min-width: 44px; min-height: 32px;
|
|
padding: 4px 8px; margin: -4px -8px;
|
|
border-radius: 8px;
|
|
}
|
|
.warnkarte__name:hover, .warnkarte__name:focus-visible {
|
|
background: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
|
|
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
|
|
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
|
|
.warnkarte__weg {
|
|
flex: none;
|
|
padding: 5px 12px; min-height: 32px;
|
|
display: inline-flex; align-items: center;
|
|
font-size: .8rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
}
|
|
|
|
.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.warnsignal {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
|
padding-left: 14px; position: relative;
|
|
}
|
|
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
|
|
untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
|
|
.warnsignal::before {
|
|
content: ''; position: absolute; left: 0; top: .55em;
|
|
width: 5px; height: 5px; border-radius: 50%;
|
|
background: rgba(217, 164, 65, .75);
|
|
}
|
|
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
|
|
.warnsignal__beleg {
|
|
font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- Rest ----------------------------------------------------------- */
|
|
|
|
.stand {
|
|
margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.creator-liste { grid-template-columns: 1fr; }
|
|
.creator { padding: 16px 15px 14px; }
|
|
/* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
|
|
bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
|
|
.werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.creator__kopf { gap: 10px; }
|
|
.naechstes { justify-items: flex-start; text-align: left; }
|
|
.summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.stand { text-align: left; }
|
|
|
|
/* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
|
|
Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
|
|
dritte darunter. */
|
|
.kzahlen { gap: 10px 20px; }
|
|
.warnliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wert, .fortschritt, .fortschritt__fuellung { transition: none; }
|
|
}
|
|
|
|
/* Der einmalige Zugangscode. Gross, gesperrt, in gleicher Zeichenbreite
|
|
und zum Markieren freigegeben -- er wird abgeschrieben oder kopiert,
|
|
und beides muss auf Anhieb gelingen. `user-select: all` markiert ihn
|
|
mit einem Klick vollstaendig; ein halb markierter Code ist ein Anruf
|
|
am naechsten Tag. */
|
|
.code-anzeige {
|
|
margin: 6px 0 0;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid color-mix(in srgb, var(--k-gold) 34%, transparent);
|
|
background: rgba(0, 0, 0, .34);
|
|
box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .7);
|
|
color: #f0d9a8;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 1.16rem; font-weight: 700; letter-spacing: .1em;
|
|
font-variant-numeric: tabular-nums;
|
|
overflow-wrap: anywhere;
|
|
user-select: all; -webkit-user-select: all;
|
|
}
|