DogFatherGitandClaude Opus 5
299d2a23b3
Die Kachel "Dashboard" fuehrte nirgendwohin -- man stand ja schon auf der
Startseite. Statt sie zu streichen bekommt sie ein Ziel: die
Gesamtuebersicht je Creator, die das Konzept auf Seite 1 als "UEBERSICHT
-- alles zentral" verspricht und die es bisher nirgends gab. Die
Startseite bleibt der Einstieg (was ist dran, wohin gehe ich), das
Dashboard ist der Ueberblick (wie steht es um wen).
Eine Karte je Creator: ueberfaellig, dringend, offen, in Arbeit, im
Review, erledigt in 30 Tagen, dazu der naechste Termin, der Start-Check
als Balken und wie lange die Person nicht mehr da war. Jede Zahl ist ein
Verweis -- eine Zahl ohne Weg dorthin waere nur ein schlechtes Gewissen.
Sortiert nach dem, was Handlung verlangt, nicht alphabetisch.
Sichtbarkeit serverseitig wie ueberall: Creator sieht sich selbst
("Mein Stand"), Scout nur seine zugeteilten, DogFather und Manager alle.
Der naechste Review-Termin faellt fuer alle ausser der Leitung weg.
Nebenbei zwei alte Fehler gefunden und behoben:
1. Die Kopfleiste schob auf einem 390px-Handy 214 px aus dem Bild -- der
Abmelden-Knopf war dort auf JEDER Seite unerreichbar. Ursache: In der
Flex-Zeile fehlte min-width: 0, also konnte nichts schrumpfen. Auf
kleinen Schirmen weicht jetzt die Marke (steht direkt darunter noch
einmal als Ueberschrift) und der Zurueck-Knopf zeigt nur den Pfeil.
Geprueft von 320 bis 1440 px auf 14 Seiten.
2. .inhalt--breit, .kopf-zeile, .zurueck und .leise standen in
aufgaben.css -- einer Datei, die eine neue Seite gar nicht laden muss.
Derselbe Fehler wie frueher bei .knopf-still und .schalter. Jetzt in
start.css, die jede Seite laedt.
Co-Authored-By: Claude Opus 5 <[email protected]>
194 lines
7.3 KiB
CSS
194 lines
7.3 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(140px, 1fr));
|
|
}
|
|
.summe {
|
|
display: grid; gap: 2px; padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .028);
|
|
}
|
|
.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(430px, 1fr));
|
|
}
|
|
.creator {
|
|
position: relative; overflow: hidden;
|
|
padding: 18px 20px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .026);
|
|
}
|
|
/* 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: rgba(255, 255, 255, .03);
|
|
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. */
|
|
.wert__name {
|
|
font-size: .6rem; 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); }
|
|
.wert[data-warn="ja"] .wert__name { color: rgba(255, 154, 162, .8); }
|
|
|
|
/* ---------- 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: rgba(255, 255, 255, .02);
|
|
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); }
|
|
|
|
/* ---------- Rest ----------------------------------------------------------- */
|
|
|
|
.leer-hinweis {
|
|
padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius);
|
|
}
|
|
.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; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wert, .fortschritt, .fortschritt__fuellung { transition: none; }
|
|
}
|