diff --git a/workspace/assets/css/aufgaben.css b/workspace/assets/css/aufgaben.css
index 8f5a19d2..8bc1408e 100644
--- a/workspace/assets/css/aufgaben.css
+++ b/workspace/assets/css/aufgaben.css
@@ -72,13 +72,38 @@
align-items: start;
}
+/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
+ Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
+ Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
+ ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
+
+ Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
+ nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
+ hinsehen), Erledigt gruen (fertig). */
.spalte {
- background: rgba(255, 255, 255, .022);
- border: 1px solid var(--rand);
+ --sfarbe: #6f89a8;
+ position: relative; overflow: hidden;
+ background:
+ linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
+ rgba(255, 255, 255, .022);
+ border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
border-radius: var(--radius);
- padding: 14px 12px 16px;
+ padding: 16px 13px 18px;
min-height: 120px;
}
+/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
+ wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
+.spalte::before {
+ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
+ background: linear-gradient(90deg, var(--sfarbe),
+ color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
+}
+/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
+ ist. "Review" allein sagt einem Neuen nichts. */
+.spalte__unter {
+ margin: 2px 0 12px 17px;
+ font-size: .76rem; color: var(--text-still);
+}
.spalte__kopf {
display: flex; align-items: center; gap: 8px;
@@ -94,10 +119,15 @@
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; }
+.spalte[data-status="offen"] { --sfarbe: #6f89a8; }
+.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; }
+.spalte[data-status="review"] { --sfarbe: #e0a33c; }
+.spalte[data-status="erledigt"] { --sfarbe: #4dab77; }
+.spalte__punkt {
+ background: var(--sfarbe);
+ box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
+}
+.spalte .spalte__zahl { color: var(--sfarbe); }
.karte {
padding: 12px 13px;
@@ -122,7 +152,19 @@
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
-.spalte__leer { margin: 4px 2px; font-size: .82rem; color: var(--text-still); }
+/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
+ Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
+ aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
+ Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
+ ruhigen Flaeche statt im Nichts. */
+.spalte__leer {
+ margin: 4px 0 0; padding: 16px 12px;
+ text-align: center;
+ font-size: .82rem; color: var(--text-still); line-height: 1.5;
+ border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
+ border-radius: var(--radius-klein);
+ background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
+}
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
diff --git a/workspace/assets/css/automation.css b/workspace/assets/css/automation.css
index bbedee07..12278ae0 100644
--- a/workspace/assets/css/automation.css
+++ b/workspace/assets/css/automation.css
@@ -149,10 +149,6 @@
.verlauf__was { color: var(--text); }
.verlauf__wer { color: var(--text-still); overflow: hidden; text-overflow: ellipsis; }
-.leer-hinweis {
- padding: 26px; text-align: center; color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
@media (max-width: 700px) {
.verlauf__zeile { grid-template-columns: 1fr; gap: 2px; }
diff --git a/workspace/assets/css/bereich.css b/workspace/assets/css/bereich.css
index 27a12b0a..14bd8015 100644
--- a/workspace/assets/css/bereich.css
+++ b/workspace/assets/css/bereich.css
@@ -60,11 +60,6 @@
box-shadow: 0 4px 16px -9px var(--f);
}
-.leer-hinweis {
- padding: 26px 20px; text-align: center;
- color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
@media (max-width: 620px) {
.eintrag-knoepfe { margin-left: 0; width: 100%; }
diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css
index 3d14b74d..023ff8d4 100644
--- a/workspace/assets/css/calls.css
+++ b/workspace/assets/css/calls.css
@@ -116,10 +116,6 @@
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}
-.leer-hinweis {
- padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
@media (max-width: 560px) {
.todo { grid-template-columns: minmax(0, 1fr) auto; }
diff --git a/workspace/assets/css/dateien.css b/workspace/assets/css/dateien.css
index edcad35d..cc6616e0 100644
--- a/workspace/assets/css/dateien.css
+++ b/workspace/assets/css/dateien.css
@@ -99,11 +99,6 @@
.marke-status[data-status="review"] { background: rgba(224, 163, 60, .16); color: #e6b45c; }
.marke-status[data-status="freigegeben"] { background: rgba(77, 171, 119, .18); color: #79d1a2; }
-.leer-hinweis {
- padding: 26px 20px; text-align: center;
- color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
@media (max-width: 720px) {
.datei { grid-template-columns: 34px 1fr; }
diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css
index b552ab44..e0c4d737 100644
--- a/workspace/assets/css/report.css
+++ b/workspace/assets/css/report.css
@@ -56,10 +56,6 @@
}
.liste-klein .klein { display: block; margin-top: 2px; font-size: .77rem; color: var(--text-still); }
-.leer-hinweis {
- padding: 22px; text-align: center; color: var(--text-still); font-size: .88rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
/* ---------- Entscheidung ------------------------------------------------ */
diff --git a/workspace/assets/css/scouting.css b/workspace/assets/css/scouting.css
index 80f3de12..34de1184 100644
--- a/workspace/assets/css/scouting.css
+++ b/workspace/assets/css/scouting.css
@@ -145,10 +145,6 @@
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}
-.leer-hinweis {
- padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
/* ---------- Codefenster ---------------------------------------------------- */
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 37b38894..d4cfc164 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -338,6 +338,59 @@ body.start > main { position: relative; z-index: 1; }
.leise { color: var(--text-still); font-weight: 400; }
+/* ---------- Wenn nichts da ist -------------------------------------------
+
+ Diese Regel stand in NEUN Dateien -- neunmal fast dasselbe, mit
+ Abständen von 22, 26 und 30 px, weil beim Kopieren jedes Mal etwas
+ anders wurde. Genau davor warnt der Kommentar weiter oben. Jetzt
+ einmal hier, und jede Seite hat sie.
+
+ Wichtiger als das Aufräumen ist aber, WIE der leere Zustand aussieht.
+ Vorher: ein gestrichelter Kasten mit einem grauen Satz. Gestrichelte
+ Ränder sagen "hier fehlt etwas", und grau auf grau sagt "unwichtig" --
+ zusammen also: eine kaputt wirkende Seite, obwohl gar nichts kaputt
+ ist. Eine leere Liste ist ein normaler Zustand, oft sogar ein guter.
+
+ Jetzt: eine ruhige, geschlossene Fläche im Farbton der Seite (der
+ kommt aus data-ton am body, gesetzt von kopf.js), mit einem
+ leuchtenden Ring darüber. Sie sieht aus wie ein fertiges Bauteil und
+ nicht wie ein Loch. */
+.leer-hinweis {
+ position: relative; overflow: hidden;
+ padding: 34px 26px 32px;
+ text-align: center;
+ color: var(--text-leise); font-size: .92rem; line-height: 1.6;
+ border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 20%, var(--rand));
+ border-radius: var(--radius);
+ background:
+ radial-gradient(120% 90% at 50% -10%,
+ color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent), transparent 68%),
+ rgba(255, 255, 255, .022);
+}
+/* Der Ring: ein Kreis in der Seitenfarbe, hohl, weich leuchtend. Ein
+ Zeichen wäre hier zu laut -- es geht ja gerade darum, dass NICHTS da
+ ist. Der Ring markiert die Stelle, ohne etwas zu behaupten. */
+.leer-hinweis::before {
+ content: "";
+ display: block;
+ width: 34px; height: 34px;
+ margin: 0 auto 14px;
+ border-radius: 50%;
+ border: 1.5px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
+ background: radial-gradient(circle,
+ color-mix(in srgb, var(--ton, var(--akzent)) 22%, transparent), transparent 70%);
+ box-shadow: 0 0 22px -6px color-mix(in srgb, var(--ton, var(--akzent)) 60%, transparent);
+}
+/* Ein zweiter Satz darin ist der Tipp, was man jetzt tun kann. Wenn
+ schon nichts dasteht, soll wenigstens dastehen, wie etwas hinkommt. */
+.leer-hinweis__tipp {
+ display: block; margin-top: 7px;
+ font-size: .82rem; color: var(--text-still);
+}
+@media (forced-colors: active) {
+ .leer-hinweis::before { border-color: CanvasText; background: none; }
+}
+
/* ---------- Auf- und Zuklappen ------------------------------------------
Lange Listen (Protokoll, Verlauf) stehen zugeklappt da und zeigen nur
die neuesten Zeilen. Der Pfeil dreht sich beim Aufklappen -- er zeigt
diff --git a/workspace/assets/css/startcheck.css b/workspace/assets/css/startcheck.css
index 1f8d122d..7c46e8fd 100644
--- a/workspace/assets/css/startcheck.css
+++ b/workspace/assets/css/startcheck.css
@@ -133,10 +133,6 @@
box-shadow: 0 0 0 3px rgba(63, 189, 245, .13);
}
-.leer-hinweis {
- padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
@media (max-width: 620px) {
.punkt__kopf { flex-direction: column; }
diff --git a/workspace/assets/css/uebersicht.css b/workspace/assets/css/uebersicht.css
index 7ccb7e27..8bea5f73 100644
--- a/workspace/assets/css/uebersicht.css
+++ b/workspace/assets/css/uebersicht.css
@@ -168,10 +168,6 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
/* ---------- 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;
}
diff --git a/workspace/assets/css/wissen.css b/workspace/assets/css/wissen.css
index 3a2486d7..dbb4795f 100644
--- a/workspace/assets/css/wissen.css
+++ b/workspace/assets/css/wissen.css
@@ -252,12 +252,6 @@
}
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
-.leer-hinweis {
- display: grid; gap: 12px; justify-items: center;
- padding: 34px 22px; margin-bottom: 26px; text-align: center;
- color: var(--text-still); font-size: .92rem;
- border: 1px dashed var(--rand); border-radius: var(--radius);
-}
.leer-hinweis p { margin: 0; max-width: 52ch; }
@media (max-width: 620px) {
diff --git a/workspace/assets/js/aufgaben.js b/workspace/assets/js/aufgaben.js
index ae27b899..01e7b420 100644
--- a/workspace/assets/js/aufgaben.js
+++ b/workspace/assets/js/aufgaben.js
@@ -12,11 +12,21 @@
macht nur die Personenverwaltung, und die prueft der Server. */
const LEITUNG = new Set(['admin', 'manager']);
+ /* `leer` ist der Satz, der in einer leeren Spalte steht. Vorher stand
+ dort in allen vier Spalten ein Gedankenstrich -- vier graue Striche
+ nebeneinander sehen aus, als sei die Seite kaputt, obwohl gar nichts
+ kaputt ist. Jeder Satz sagt jetzt, was das Leersein BEDEUTET: eine
+ leere Review-Spalte ist etwas anderes als eine leere Erledigt-Spalte.
+ `unter` erklärt die Spalte auch dann, wenn sie voll ist. */
const SPALTEN = [
- { status: 'offen', name: 'Offen' },
- { status: 'arbeit', name: 'In Arbeit' },
- { status: 'review', name: 'Review' },
- { status: 'erledigt', name: 'Erledigt' },
+ { status: 'offen', name: 'Offen', unter: 'Angenommen, noch nicht angefangen',
+ leer: 'Nichts liegt herum.' },
+ { status: 'arbeit', name: 'In Arbeit', unter: 'Läuft gerade',
+ leer: 'Gerade läuft nichts.' },
+ { status: 'review', name: 'Review', unter: 'Wartet auf Freigabe',
+ leer: 'Nichts wartet auf Freigabe.' },
+ { status: 'erledigt', name: 'Erledigt', unter: 'Fertig und abgehakt',
+ leer: 'Hier landet, was fertig ist.' },
];
const WEITER = { offen: 'arbeit', arbeit: 'review', review: 'erledigt' };
const ZURUECK = { arbeit: 'offen', review: 'arbeit', erledigt: 'review' };
@@ -231,8 +241,11 @@
kopf.append(el('span', 'spalte__punkt'), el('span', null, s.name),
el('span', 'spalte__zahl', String(eigene.length)));
spalte.append(kopf);
+ /* Was diese Spalte bedeutet -- steht immer da, nicht nur wenn sie
+ leer ist. "Review" allein sagt einem Neuen nichts. */
+ spalte.append(el('p', 'spalte__unter', s.unter));
- if (!eigene.length) spalte.append(el('p', 'spalte__leer', '—'));
+ if (!eigene.length) spalte.append(el('p', 'spalte__leer', s.leer));
else for (const a of eigene) spalte.append(karte(a));
brett.append(spalte);
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index cd1982b4..d9436c66 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -7,9 +7,9 @@
-
-
-
+
+
+
@@ -139,9 +139,9 @@
-
-
-
-
+
+
+
+