From cba46e79e6852b7ea2e6cdbc1da19eedbaf0bd6b Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 16:44:22 +0200 Subject: [PATCH] Jede Rolle sieht dieselben Kategorien -- und die Reiter werden zu Kacheln MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Filipe, mit Bildschirmfoto: "diese beiden kategorien sollen bei jedem in jeder rolle gleich sein ... alles was kacheln ist und so soll gleich sein." ERSTENS: DIE ZAHLENREIHE VERSCHWAND BEI EINER ROLLE. Nachgemessen ueber alle fuenf Rollen sah Spicy Media als EINZIGE keine Zahlenreihe, sondern einen Satz -- die anderen vier sahen sieben Kategorien: spicy 0 Zahlen (Leer-Hinweis statt Zahlen) admin 7 Zahlen manager 7 Zahlen scout 7 Zahlen creator 7 Zahlen Die Ursache war eine gut gemeinte Regel: "Sechs Nullen nebeneinander sind kein Bericht, sondern Rauschen" -- bei Summe null wurde die ganze Reihe geloescht. Der Gedanke stimmt, die Folge nicht: Wer zwischen zwei Rollen wechselt, findet die Seite anders aufgebaut vor und sucht, was fehlt. Jetzt steht die Reihe IMMER, mit denselben sieben Kategorien fuer alle. Ist wirklich nichts offen, wird sie GEDAEMPFT (weniger Deckkraft, kein Warnrot, Zahlen ohne Leuchten) und der Satz steht ZUSAETZLICH darunter statt an ihrer Stelle. Gedaempft ist auch eine Antwort, nur eine leise -- und die Form der Seite bleibt ueber alle Rollen gleich. Nachgemessen: alle fuenf zeigen jetzt dieselben sieben. ZWEITENS: DIE REITER AUF DER CALLS-SEITE WAREN KEINE KACHELN. Gemessen: Eine Kachel traegt `clip-path: polygon(18px 0 …)` -- die gefraeste Fase -- plus Innenschatten. Die Reiter hatten `clip-path: none` und nur einen feinen Lichtrand. Sie standen als einzige Bausteine ausserhalb der gemeinsamen Sprache. Sie sind jetzt in der Modulliste von module.css. Der Selektor ist `.gruppe[data-gruppe]` und nicht `.gruppe`: Auf der Startseite heissen die Bereichsgruppen genauso, sind aber BEHAELTER fuer Kacheln und duerfen selbst keine sein. `data-gruppe` setzt ausschliesslich calls.js -- nachgeprueft, nicht angenommen. DIE MODULLISTE STEHT SIEBENMAL WORTGLEICH in der Datei. Alle sieben wurden ergaenzt; `pruef-css-klassen` prueft genau das ("alle sieben Kopien sind Zeichen fuer Zeichen gleich") und haette einen vergessenen Eintrag gemeldet. UND SIE HAT NOCH ETWAS GEMELDET, einen Fehler von heute Nachmittag: ".rs-funkel -- fehlt auf 1 Seite (index.html)". Beim Verdoppeln des Rollen-Sprites auf die Anmeldeseite hatte ich die Gestaltung dazu nicht mitgenommen; sie lag in personen.css, die index.html gar nicht laedt. Der Manager-Stern stand dort ohne seinen Glanz. Die Regeln liegen jetzt in gate.css -- auf allen 19 Seiten. Derselbe Fehler wie beim Sprite selbst, nur eine Ebene hoeher: Wer etwas verdoppelt, muss alles mitnehmen, was daran haengt. pruef-css-klassen EXIT=0, pruef-start-ansicht EXIT=0 (140), pruef-abbrechen-optik EXIT=0 (27). Co-Authored-By: Claude Opus 5 --- workspace/assets/css/gate.css | 39 +++++++++++++++++++++++++++++++ workspace/assets/css/module.css | 14 +++++------ workspace/assets/css/personen.css | 25 -------------------- workspace/assets/css/start.css | 25 ++++++++++++++++++++ workspace/assets/js/start.js | 34 ++++++++++++++++++--------- 5 files changed, 94 insertions(+), 43 deletions(-) diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 8ea9ebac..7695af5b 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -2136,3 +2136,42 @@ body.gate { drei bis vier Bildpunkten. 27 px sind rund 65 % mehr Flaeche, ohne dass die Zeile ihre Hoehe aendert. */ .rolle__zeichen { width: 27px; height: 27px; } + +/* VON personen.css HIERHER GEZOGEN (08.09.2026). + + Das Rollen-Sprite steht seit heute auf ZWEI Seiten (personen.html und + index.html). Die Gestaltung dazu lag aber nur in personen.css -- die + Anmeldeseite laedt die gar nicht. Der Stern stand dort also ohne + seinen Glanz, und `pruef-css-klassen` hat es gemeldet: ".rs-funkel -- + fehlt auf 1 Seite (index.html)". + + Das ist derselbe Fehler wie beim Sprite selbst, nur eine Ebene + hoeher: Wer etwas verdoppelt, muss auch alles mitnehmen, was daran + haengt. gate.css liegt auf allen 19 Seiten -- hier kann es nicht + wieder auseinanderlaufen. +*/ +/* DAS FUNKELN DES MANAGER-STERNS. + + Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst + langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere + genau die aggressive Optik, die hier nicht sein soll -- und in einer + Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick + dauerhaft von allem anderen ab. + + Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein + Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein + Glitzern. Glanz ist etwas, das sich BEWEGT. */ +.rs-funkel { + -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite; +} +@keyframes rs-glitzer { + 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; } + 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; } +} +/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine. + Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */ +@media (prefers-reduced-motion: reduce) { + .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } +} diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css index 32e90e73..73dae7ce 100644 --- a/workspace/assets/css/module.css +++ b/workspace/assets/css/module.css @@ -89,7 +89,7 @@ } /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { position: relative; clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase)); border-radius: 0; @@ -117,7 +117,7 @@ was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */ /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::before { content: ""; position: absolute; inset: 0; pointer-events: none; @@ -140,7 +140,7 @@ /* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt es nicht, und beides ist reine Optik ohne Klicks. */ /* MODULLISTE */ -:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after { +:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::after { content: ""; position: absolute; inset: 0; pointer-events: none; @@ -224,7 +224,7 @@ /* Dieselbe Form, kleiner -- keine zweite Gestaltung. */ :root { --fase: 12px; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7)); } } @@ -238,15 +238,15 @@ /* Im Kontrastmodus zählt die Kante, und die muss ein echter `border` sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */ /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe]) { filter: none; border: 1px solid CanvasText; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::after { display: none; } /* MODULLISTE */ - :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before { + :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe])::before { display: none; } } diff --git a/workspace/assets/css/personen.css b/workspace/assets/css/personen.css index f5c33e6d..6c2858b0 100644 --- a/workspace/assets/css/personen.css +++ b/workspace/assets/css/personen.css @@ -263,31 +263,6 @@ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } -/* DAS FUNKELN DES MANAGER-STERNS. - - Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst - langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere - genau die aggressive Optik, die hier nicht sein soll -- und in einer - Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick - dauerhaft von allem anderen ab. - - Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein - Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein - Glitzern. Glanz ist etwas, das sich BEWEGT. */ -.rs-funkel { - -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; - mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; - animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite; -} -@keyframes rs-glitzer { - 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; } - 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; } -} -/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine. - Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */ -@media (prefers-reduced-motion: reduce) { - .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } -} /* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist der einzige Unterschied, den es braucht: mehr Licht auf demselben Gegenstand. */ diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index b58eefa0..4a2f98a6 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -4953,3 +4953,28 @@ body[data-fremde-sicht="ja"]::after { color-mix(in srgb, var(--f) 9%, transparent), color-mix(in srgb, var(--f) 4%, transparent)); } + +/* DIE ZAHLENREIHE BLEIBT STEHEN, AUCH WENN ALLES NULL IST (08.09.2026). + + Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle + gleich sein". Vorher wurde die Reihe bei lauter Nullen geloescht -- + nachgemessen sah Spicy Media als einzige Rolle etwas anderes als die + uebrigen vier. Wer die Rolle wechselt, fand die Seite anders gebaut + vor. + + Jetzt bleibt sie und wird nur LEISER: weniger Deckkraft, kein + Warnrot, die Zahlen ohne ihr Leuchten. Die Form der Seite bleibt + damit ueber alle Rollen gleich, und "gerade nichts zu tun" ist + trotzdem auf einen Blick zu sehen -- gedaempft ist auch eine + Antwort, nur eine leise. + + Der Satz darunter steht jetzt ZUSAETZLICH statt an ihrer Stelle. */ +#zahlen-block[data-leer="ja"] .zahl { + opacity: .45; + filter: saturate(.35); +} +#zahlen-block[data-leer="ja"] .zahl__wert { text-shadow: none; } +/* Auch die Warnfarbe verschwindet: Eine rote Null ist ein Widerspruch. */ +#zahlen-block[data-leer="ja"] .zahl[data-warn="ja"] { --warnton: inherit; } +#zahlen-block[data-leer="ja"] .zahl[data-warn="ja"] .zahl__wert { color: inherit; } +#zahlen-block[data-leer="ja"] #zahlen-leer { margin-top: 10px; opacity: .8; } diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 0a6fafd2..5ae45711 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -1120,19 +1120,31 @@ daten = await antwort.json(); } catch { return; } - /* Sechs Nullen nebeneinander sind kein Bericht, sondern Rauschen. - Wenn wirklich nichts offen ist, steht dort ein Satz -- und der - Platz gehört den Bereichen. */ + /* JEDE ROLLE SIEHT DIESELBEN KATEGORIEN (08.09.2026). + + Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle + gleich sein ... alles was kacheln ist und so soll gleich sein." + + Hier stand: Ist die Summe null, wird die ganze Reihe GELÖSCHT und + durch einen Satz ersetzt -- mit der Begründung "sechs Nullen + nebeneinander sind kein Bericht, sondern Rauschen". Der Gedanke + war nicht falsch, die Folge aber schon: Nachgemessen über alle + fünf Rollen sah Spicy Media als EINZIGE keine Zahlenreihe, + sondern einen Satz -- die anderen vier sahen sieben Kategorien. + Wer zwischen zwei Rollen wechselt, findet die Seite dann anders + aufgebaut vor und sucht, was fehlt. + + Jetzt steht die Reihe IMMER, mit denselben sieben Kategorien für + alle. Ist wirklich nichts offen, wird sie GEDÄMPFT (siehe + `[data-leer]` in start.css) und der Satz steht ZUSÄTZLICH + darunter statt an ihrer Stelle. Damit bleibt die Aussage "es ist + gerade nichts zu tun" erhalten, ohne dass die Seite ihre Form + ändert -- gedämpft ist auch eine Antwort, nur eben eine leise. */ const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0); const block = $('zahlen-block'); - if (!summe) { - block.dataset.leer = 'ja'; - $('zahlen').textContent = ''; - $('zahlen-leer').hidden = false; - return; - } - block.removeAttribute('data-leer'); - $('zahlen-leer').hidden = true; + if (!summe) block.dataset.leer = 'ja'; + else block.removeAttribute('data-leer'); + $('zahlen-leer').hidden = !!summe; const liste = $('zahlen'); liste.textContent = '';