DogFatherGitandClaude Opus 5
b45de940e8
Filipe: "so eine kategorie wie ueber die creator will ich dass nur fuer
die spicy und dogfather rolle auch ueber manager und scouts gibt ...
ich will dass es so ultra krass gut ist dass die spicy und dogfather
rolle einen kompletten teil haben mit daten ueber die arbeit von den
manager und scout. keine geheimen sachen also termine, chats und
geheime dateien soll auch so bleiben dass keiner."
--- ZUERST DIE KOPFLEISTE ---
Filipe meldete, die Kopfleiste sei bei DogFather "nicht gemacht".
Nachgemessen auf ALLEN 18 Seiten, in allen fuenf Rollen, bei drei
Breiten: einzeilig, Spanne 4 px. Und die neuen Dateien liegen
nachweislich auf dem Server (a70bc4f, `abmelden__zeichen` in der
ausgelieferten kopf.js). Das Bild war vor dem Ausliefern entstanden.
Die Messung hat aber zwei echte Sachen gefunden, die vorher niemand
gesehen hatte -- beide bei 320 px auf UNTERseiten, wo links der
Zurueck-Knopf und rechts zusaetzlich die Glocke steht: 305 px
gebraucht, 294 verfuegbar. Eine Stufe kleiner (34 px je Knopf, 4 px
Abstand) macht 283 und passt; 34 px bleiben weit ueber den 24 px
Mindestmass fuer ein Beruehrziel.
Ausserdem die Auslieferung geordnet: HTML wird immer nachgefragt,
Dateien mit Versionsstempel duerfen ein Jahr liegenbleiben (vorher
bekam ALLES `no-cache`, also auch jede Stilvorlage bei jedem Aufruf).
sw.js ausgenommen -- er wird ohne Stempel geladen, ein Fehler darin
bliebe sonst ein Jahr stehen.
--- DIE NEUE SEITE ---
workspace/team.html, nur fuer `spicy` und `admin`. Aufbau:
DIE LUECKEN ZUERST. Creator ohne Betreuung, Scouts ohne Manager,
Leute ohne einen einzigen Creator -- mit NAMEN, nicht nur als Zahl.
Eine Kennzahl sagt, wie es laeuft; eine Luecke sagt, wo etwas fehlt,
und nur das Zweite kann man heute abstellen.
DANN DIE LAGE in fuenf Zahlen, dann JEDE PERSON EINZELN: betreute
Creator, laufende und ueberfaellige Aufgaben, in 30 Tagen erledigte,
Durchlaufzeit, Startcheck-Fortschritt der betreuten Creator,
LIVE-Tage und Diamanten. Bei Scouts zusaetzlich die Pipeline mit
Uebernahmequote und Zeit bis zur Uebergabe.
EIN MANAGER TRAEGT DIE CREATOR SEINER SCOUTS MIT. Ohne das saehe
einer mit fuenf Scouts aus wie jemand ohne Arbeit.
--- DREI ENTSCHEIDUNGEN, DIE ALLES TRAGEN ---
1. TERMINE, CHATS UND DATEIEN KOMMEN NICHT VOR -- weder Inhalte noch
Zaehlungen. Ausdruecklicher Wunsch, und der richtige: Ein Kalender
verraet, wann jemand nicht da war; ein Chatzaehler, mit wem jemand
oft spricht.
Das ist keine Zusicherung im Kommentar. pruef-team liest den
Quelltext von workspace-team.js und schlaegt an, wenn eine dieser
Tabellen darin auftaucht -- mit Gegenprobe, dass die Suche `aufgaben`
und `leads` auch wirklich findet. Der Weg ueber die Antwort allein
waere schwaecher: Ein leerer Testbestand kann ein Feld verstecken.
2. SEGMENTIEREN, NICHT MITTELN. Aus der Recherche zu
Arbeitslast-Dashboards: Ein Durchschnitt versteckt genau die Person,
bei der es klemmt. Markiert wird gegen den MEDIAN der eigenen Rolle
-- ein Manager traegt naturgemaess mehr als ein Scout, und ihn daran
zu messen waere unfair und nutzlos.
3. ES IST EINE ARBEITSLAGE, KEINE UEBERWACHUNG. Das steht so auf der
Seite, im Kopf, in einem eigenen Kasten. Wer das nicht dazuschreibt,
baut ein Kontrollwerkzeug, auch wenn er es nicht wollte. Deshalb
zeigen die Kennzahlen auf ZUSTAENDE (unbetreute Creator,
liegengebliebene Kontakte) und nicht auf Anwesenheit oder Fleiss.
--- WAS DIE MESSUNG UNTERWEGS GEFUNDEN HAT ---
* Die Lead-Status hiessen anders, als ich angenommen hatte: "kontakt"
gibt es nicht. Die CHECK-Bedingung der Datenbank hat es sofort
abgelehnt -- ohne sie waere "offen" still zu klein gewesen.
* Die Pruefung fand ihr eigenes Hinweisschild: Die Antwort traegt ein
Feld `ausgenommen: ["Termine","Chats","Dateien"]`, aus dem die Seite
den Satz baut. Es wird jetzt herausgenommen UND eigens geprueft --
ignorieren waere bequem gewesen und haette kuenftig jedes Feld unter
diesem Namen durchgelassen.
* Die Lektion vom Vorlagenbrett gleich mitgenommen: alle Karten haben
einen DECKENDEN Grund. Eine Karte mit sieben Prozent Farbe auf
durchsichtigem Grund laesst das Buehnenfoto durch -- dort waren es
3,61:1. Gemessen jetzt: 6,61 bis 14,80:1. Eine der Regeln hatte den
deckenden Grund selbst wieder aufgehoben (zwei Regeln, die spaetere
gewinnt) -- gefunden, bevor es jemand sehen musste.
* "1 Scouts" statt "1 Scout". Eine Kleinigkeit, und das Erste, was
auffaellt: Eine Seite, die ihre eigene Sprache nicht beherrscht, wird
auch bei den Zahlen nicht geglaubt.
--- Pruefung ---
server/pruef-team.mjs, neu, 51 Pruefungen, alle gruen. Darunter: alle
fuenf Rollen an Schnittstelle UND Seite (Manager, Scout und Creator
bekommen 404 bzw. eine Umleitung), Spicy sieht VanVan nicht (mit
Gegenprobe an der Personenliste), die Zahlen an einem gebauten
Bestand, acht Kontrastmessungen an der wirklichen Flaeche, Handy.
server/pruef-zwischenspeicher.mjs, neu, 15 Pruefungen: was liegenbleiben
darf und was nicht -- an echten Kopfzeilen gemessen, nicht am
Quelltext. Sie meldete zuerst drei Fehler, und das war sie selbst: Sie
fragte unangemeldet und bekam Umleitungen. Eine Pruefung braucht ihre
Voraussetzung, bevor sie misst.
Ausserdem gruen: pruef-handy (das Handy fand die 320-px-Sache),
pruef-workspace-seiten, pruef-alle-wege, pruef-sicht, pruef-css-klassen.
Co-Authored-By: Claude Opus 5 <[email protected]>
246 lines
9.2 KiB
CSS
246 lines
9.2 KiB
CSS
/* =====================================================================
|
|
team.css — die Arbeitslage von Managern und Scouts.
|
|
|
|
Wunsch Filipe, 09.09.2026: "so eine kategorie wie über die creator
|
|
will ich dass nur für die spicy und dogfather rolle auch über manager
|
|
und scouts gibt ... ich will dass es so ultra krass gut ist."
|
|
|
|
DIE GESTALTUNG FOLGT EINER ENTSCHEIDUNG, NICHT EINEM GESCHMACK:
|
|
Diese Seite zeigt Zahlen über Kollegen. Sie darf deshalb NICHT
|
|
aussehen wie ein Cockpit mit Warnleuchten. Rot gibt es genau dort,
|
|
wo etwas liegengeblieben ist -- und sonst nirgends. Alles andere ist
|
|
ruhig, damit die wenigen roten Stellen auch etwas heißen.
|
|
===================================================================== */
|
|
|
|
/* ---------- Der Kopf --------------------------------------------------- */
|
|
.t-kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 20px; flex-wrap: wrap;
|
|
margin: 0 0 18px;
|
|
}
|
|
.t-kopf__titel {
|
|
margin: 4px 0 6px;
|
|
font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
|
|
color: var(--text);
|
|
letter-spacing: -.01em;
|
|
}
|
|
.t-kopf__unter { margin: 0; font-size: .96rem; color: var(--text-leise); }
|
|
/* Der Satz über die Grenzen steht in einem eigenen Kasten und nicht als
|
|
Fußnote. Er ist die wichtigste Zeile der Seite: Ohne ihn wird eine
|
|
Arbeitslage als Überwachung gelesen -- und dann arbeitet niemand mehr
|
|
offen damit. */
|
|
.t-kopf__grenze {
|
|
flex: 1 1 300px; max-width: 44ch;
|
|
margin: 0; padding: 12px 15px;
|
|
border-left: 3px solid color-mix(in srgb, var(--scout-haupt) 55%, transparent);
|
|
border-radius: 0 10px 10px 0;
|
|
background: rgba(95, 201, 154, .07);
|
|
font-size: .87rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.t-kopf__grenze strong { color: var(--text); }
|
|
|
|
/* ---------- Die Lücken ------------------------------------------------- */
|
|
.t-luecken {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
|
margin: 0 0 18px;
|
|
}
|
|
/* EINE UNDURCHSICHTIGE FLAECHE, KEIN SCHLEIER.
|
|
|
|
Die Lektion vom Vorlagenbrett heute Mittag, hier gleich mitgenommen:
|
|
Eine Karte mit 7 Prozent Farbe auf transparentem Grund laesst das
|
|
Buehnenfoto durchscheinen -- und dann haengt die Lesbarkeit davon ab,
|
|
ob hinter dem Text gerade eine helle oder eine dunkle Stelle liegt.
|
|
Dort hat es 3,61:1 ergeben, wo 4,5 noetig sind.
|
|
|
|
Deshalb hier von vornherein ein eigener, deckender Grund. Der rote
|
|
Ton liegt darauf, nicht darin. */
|
|
.tl {
|
|
padding: 15px 17px;
|
|
border: 1px solid color-mix(in srgb, var(--warn, #ff9aa2) 34%, transparent);
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(rgba(255, 154, 162, .07), rgba(255, 154, 162, .07)),
|
|
rgba(7, 10, 17, .93);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.tl__titel {
|
|
margin: 0 0 4px; font-size: .98rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 78%, #ffffff);
|
|
}
|
|
.tl__satz { margin: 0 0 8px; font-size: .84rem; color: var(--text-leise); line-height: 1.5; }
|
|
.tl__namen {
|
|
margin: 0; font-size: .86rem; color: var(--text); line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
/* Keine Lücke ist auch eine Auskunft -- und dann grün statt rot. */
|
|
.tl[data-gut="ja"] {
|
|
border-color: color-mix(in srgb, var(--scout-haupt) 34%, transparent);
|
|
background:
|
|
linear-gradient(rgba(95, 201, 154, .07), rgba(95, 201, 154, .07)),
|
|
rgba(7, 10, 17, .93);
|
|
}
|
|
.tl[data-gut="ja"] .tl__titel { color: var(--scout-haupt); }
|
|
|
|
/* ---------- Die Lage in Zahlen ----------------------------------------- */
|
|
.t-lage {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
margin: 0 0 22px;
|
|
}
|
|
|
|
/* ---------- Eine Kennzahl ---------------------------------------------- */
|
|
.tz {
|
|
display: grid; gap: 2px; align-content: start;
|
|
padding: 11px 13px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
/* Ebenfalls deckend -- eine Kennzahl auf einem Foto ist keine
|
|
Kennzahl, sondern ein Ratespiel. */
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .028)),
|
|
rgba(7, 10, 17, .9);
|
|
}
|
|
.tz__wert {
|
|
font-size: 1.28rem; font-weight: 700; color: var(--text);
|
|
font-variant-numeric: tabular-nums; line-height: 1.15;
|
|
}
|
|
.tz__schild {
|
|
font-size: .74rem; color: var(--text-leise); line-height: 1.35;
|
|
}
|
|
/* Rot NUR, wo etwas liegengeblieben ist. */
|
|
.tz[data-art="warn"] {
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 42%, transparent);
|
|
/* Auch hier deckend. Diese Zeile stand zuerst mit einem einzelnen
|
|
rgba-Wert da und hat damit den undurchsichtigen Grund von oben
|
|
wieder aufgehoben -- ausgerechnet an den Karten, auf die es
|
|
ankommt. Zwei Regeln fuer denselben Grund, und die spaetere
|
|
gewinnt: derselbe Fehler wie so oft in diesem Haus. */
|
|
background:
|
|
linear-gradient(rgba(255, 154, 162, .09), rgba(255, 154, 162, .09)),
|
|
rgba(7, 10, 17, .9);
|
|
}
|
|
.tz[data-art="warn"] .tz__wert { color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff); }
|
|
/* Und grün, wenn eine Null eine gute Nachricht ist -- eine Null ohne
|
|
Farbe liest sich wie ein fehlender Wert. */
|
|
.tz[data-art="gut"] { border-color: color-mix(in srgb, var(--scout-haupt) 30%, transparent); }
|
|
.tz[data-art="gut"] .tz__wert { color: var(--scout-haupt); }
|
|
|
|
/* ---------- Die Leute --------------------------------------------------- */
|
|
.t-gruppe { margin: 0 0 26px; }
|
|
.t-gruppe .feldschild { margin: 0 0 10px; }
|
|
.t-liste {
|
|
display: grid; gap: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
|
|
}
|
|
|
|
.tperson {
|
|
--r: var(--text-still);
|
|
position: relative;
|
|
padding: 16px 18px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--r) 6%, transparent), transparent 60%),
|
|
var(--flaeche);
|
|
}
|
|
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
|
|
.tperson[data-rolle="scout"] { --r: var(--scout-haupt); }
|
|
/* Der Streifen in der Rollenfarbe -- dieselbe Sprache wie in der
|
|
Personenliste, damit man beide Seiten als ein Haus liest. */
|
|
.tperson::after {
|
|
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
|
|
width: 3px; border-radius: 999px;
|
|
background: linear-gradient(180deg,
|
|
color-mix(in srgb, var(--r) 80%, transparent),
|
|
color-mix(in srgb, var(--r) 25%, transparent));
|
|
pointer-events: none;
|
|
}
|
|
.tperson[data-gesperrt="ja"] { opacity: .6; }
|
|
|
|
.tperson__kopf {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 14px; flex-wrap: wrap;
|
|
}
|
|
.tperson__bild {
|
|
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
|
|
border: 1px solid color-mix(in srgb, var(--r) 40%, transparent);
|
|
flex: none;
|
|
}
|
|
.tperson__zeichen {
|
|
width: 44px; height: 44px; border-radius: 50%;
|
|
display: grid; place-items: center; flex: none;
|
|
font-size: 1.05rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--r) 75%, #ffffff);
|
|
background: color-mix(in srgb, var(--r) 16%, #070a11);
|
|
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
|
}
|
|
.tperson__text { flex: 1; min-width: 0; }
|
|
/* LANGE NAMEN BRECHEN UM, statt abgeschnitten zu werden.
|
|
"Patrick-Maximilian" braucht 90 px, bei 320 px Bildschirm stehen 56
|
|
zur Verfuegung -- gemeldet von pruef-handy. Ein Name, den man nicht
|
|
lesen kann, ist auf einer Seite ueber Personen der schlechteste
|
|
Platz zum Sparen. */
|
|
.tperson__name {
|
|
margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--text);
|
|
overflow-wrap: anywhere; hyphens: auto;
|
|
}
|
|
.tperson__unter {
|
|
margin: 2px 0 0; font-size: .82rem; color: var(--text-leise); line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.tperson__zuletzt {
|
|
flex: none;
|
|
padding: 4px 10px; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
.tperson__zuletzt[data-warn="ja"] {
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff);
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 40%, transparent);
|
|
background: rgba(255, 154, 162, .1);
|
|
}
|
|
|
|
.tperson__zahlen {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
|
|
}
|
|
|
|
/* ---------- Die Pipeline ------------------------------------------------ */
|
|
.tpipe {
|
|
margin-top: 14px; padding-top: 13px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.tpipe__schild {
|
|
margin: 0 0 8px;
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.tpipe__reihe {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
|
|
}
|
|
|
|
/* ---------- Wen genau --------------------------------------------------- */
|
|
.tperson__wer { margin-top: 12px; }
|
|
.tperson__wer summary {
|
|
cursor: pointer; font-size: .82rem; color: var(--text-leise);
|
|
padding: 4px 0;
|
|
}
|
|
.tperson__wer summary:hover { color: var(--text); }
|
|
.tperson__wer summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.tperson__namen {
|
|
margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); line-height: 1.65;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.t-kopf { flex-direction: column; gap: 14px; }
|
|
.t-kopf__grenze { max-width: none; }
|
|
.tperson { padding: 14px 15px 16px; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.tz, .tl, .tperson { border: 1px solid CanvasText; }
|
|
.tperson::after { background: CanvasText; }
|
|
}
|