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]>
225 lines
8.5 KiB
CSS
225 lines
8.5 KiB
CSS
/* ===================================================================
|
|
Aufgabenbrett. Baut auf gate.css und start.css auf.
|
|
=================================================================== */
|
|
|
|
/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
|
|
start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
|
|
jede Seite laedt diese Datei hier. */
|
|
|
|
/* ---------- Formular -------------------------------------------------- */
|
|
|
|
.neu {
|
|
margin: 0 0 28px;
|
|
padding: 20px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
.neu__zeile { margin-bottom: 14px; }
|
|
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
|
|
Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
|
|
Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
|
|
.neu__raster {
|
|
display: grid; gap: 14px 16px; margin-bottom: 8px;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
|
|
.neu__raster > .feld { grid-column: span 4; min-width: 0; }
|
|
|
|
/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
|
|
deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
|
|
Kategorienamen wurden abgeschnitten. */
|
|
.neu__raster > .feld--breit { grid-column: 1 / -1; }
|
|
.neu__raster > .feld--halb { grid-column: span 6; }
|
|
|
|
@media (max-width: 860px) {
|
|
.neu__raster > .feld { grid-column: span 6; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
|
|
}
|
|
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
|
|
|
.feld-schild {
|
|
display: block; margin-bottom: 6px;
|
|
font-size: .76rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
.neu input, .neu textarea, .neu select {
|
|
width: 100%; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
transition: border-color var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.neu textarea { resize: vertical; min-height: 62px; }
|
|
.neu input:focus, .neu textarea:focus, .neu select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .7);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
|
}
|
|
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
|
|
Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
|
|
wieder verdunkeln. */
|
|
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
|
|
|
/* ---------- Brett ----------------------------------------------------- */
|
|
|
|
.brett {
|
|
display: grid; gap: 14px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.spalte {
|
|
background: rgba(255, 255, 255, .022);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
padding: 14px 12px 16px;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px;
|
|
margin: 0 2px 12px;
|
|
font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
|
.spalte__zahl {
|
|
margin-left: auto; padding: 1px 8px;
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
font-size: .74rem; color: var(--text-still); letter-spacing: normal;
|
|
}
|
|
|
|
.spalte[data-status="offen"] .spalte__punkt { background: #6f89a8; }
|
|
.spalte[data-status="arbeit"] .spalte__punkt { background: var(--akzent); }
|
|
.spalte[data-status="review"] .spalte__punkt { background: #e0a33c; }
|
|
.spalte[data-status="erledigt"] .spalte__punkt { background: #4dab77; }
|
|
|
|
.karte {
|
|
padding: 12px 13px;
|
|
margin-bottom: 9px;
|
|
background: rgba(9, 13, 22, .78);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid transparent;
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.karte[data-prio="hoch"] { border-left-color: #d8656e; }
|
|
.karte[data-prio="mittel"] { border-left-color: #4b6c8a; }
|
|
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }
|
|
|
|
.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
|
|
.karte__text { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }
|
|
|
|
.karte__zeile {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 10px; font-size: .76rem; color: var(--text-still);
|
|
}
|
|
.karte__frist--faellig { color: var(--warn); font-weight: 600; }
|
|
|
|
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
|
|
|
.spalte__leer { margin: 4px 2px; font-size: .82rem; color: var(--text-still); }
|
|
|
|
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
|
|
|
|
/* ---------- Bearbeiten-Dialog ------------------------------------------ */
|
|
|
|
.dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 0; border: 1px solid var(--rand-hell);
|
|
border-radius: var(--radius);
|
|
background: #0b1018;
|
|
color: var(--text);
|
|
box-shadow: var(--schatten);
|
|
}
|
|
.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }
|
|
|
|
.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }
|
|
|
|
.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }
|
|
|
|
.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
|
|
.dialog__knoepfe #b-loeschen { margin-left: auto; }
|
|
|
|
.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
|
|
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
|
|
|
|
/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
|
|
Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
|
|
das Knopf-System in der kleinsten, ruhigsten Groesse. */
|
|
.karte__stift { margin-left: auto; }
|
|
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
|
|
.karte__kopf .karte__titel { flex: 1 1 auto; }
|
|
|
|
/* ===================================================================
|
|
Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).
|
|
|
|
Direkt an der Karte, nicht in einem Fenster: Man liest sie im
|
|
Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
|
|
Hälfte.
|
|
=================================================================== */
|
|
|
|
.karte__rueck {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
margin-top: 10px; padding: 6px 11px; cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
color: var(--text-still); font: inherit; font-size: .76rem;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
|
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
|
|
.karte__rueck[data-hat="ja"] {
|
|
color: var(--akzent);
|
|
border-color: rgba(63, 189, 245, .38);
|
|
background: rgba(63, 189, 245, .08);
|
|
}
|
|
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
|
|
.karte__blase {
|
|
width: 14px; height: 14px; flex: none;
|
|
fill: none; stroke: currentColor; stroke-width: 1.7;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
.rueck {
|
|
margin-top: 11px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
|
|
.rueck__eintrag {
|
|
padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .035);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
|
|
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
|
|
.rueck__wann { font-size: .72rem; color: var(--text-still); }
|
|
.rueck__weg {
|
|
margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
|
|
background: none; border: 0; color: var(--text-still); font-size: 1rem;
|
|
}
|
|
.rueck__weg:hover { color: #ffb4b9; }
|
|
.rueck__text {
|
|
margin: 0; font-size: .85rem; color: var(--text-leise);
|
|
white-space: pre-wrap; line-height: 1.5;
|
|
}
|
|
|
|
.rueck__form { display: grid; gap: 8px; justify-items: start; }
|
|
.rueck__feld {
|
|
width: 100%; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
|
|
}
|
|
.rueck__feld:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }
|