From af4a00dce2a2ceac3e354cf07ce59d3fc5d4cacf Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 18:24:58 +0200 Subject: [PATCH] Die Kopfleiste war nie klebend -- und das Call-Brett hatte eine leere Haelfte DIE LEISTE BLEIBT JETZT OBEN (screen 3) Filipe: "diese leiste soll immer da stehen bleiben, egal ob man die seite runterscrollt oder nicht, auf allen seiten." In start.css steht seit jeher `.kopfleiste { position: sticky; top: 0 }`. Zwanzig Zeilen darueber steht aber body.start > .kopfleiste { position: relative; z-index: 1; } und das ist (0,2,1) gegen (0,1,0) -- die staerkere Regel gewinnt, unabhaengig von der Reihenfolge. Gemessen im Browser: `position: relative`, und bei 600 px Scrollen wanderte die Leiste 600 px aus dem Bild. Sie hat also nie geklebt, obwohl es im Code so dasteht. Das ist heute die VIERTE Spielart derselben Falle: `:where()` zu schwach, `body.start .willkommen` zu stark, die Kachel-Verschachtelung zu stark -- und hier eine Regel, die etwas ganz anderes wollte (den Stapelwert ueber der Buehne) und dabei die Positionierung mitgenommen hat. Merksatz: Wer `position` setzt, nur um `z-index` zu bekommen, greift jedes Mal daneben. Nachgemessen: 700 px gescrollt, Leiste steht bei 0. DAS CALL-BRETT: DREI TAFELN STATT ZWEIER SPALTEN (screen 2) Filipe: "das bewegt sich immer noch mit, das ist so scheissen." DAS PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung. Zwei Spalten, und "Steht an" hatte siebenundzwanzig Karten: Die rechte Spalte lief ueber mehrere Bildschirmhoehen, die linke war nach zwei Koepfen zu Ende. Wer scrollt, sieht dann eine leere halbe Seite mit einer Ueberschrift, die scheinbar mitwandert -- sie steht bloss still, waehrend daneben alles laeuft. Jetzt bekommt jede Tafel DIESELBE Hoehe und einen EIGENEN Lauf. Alle drei Gruppen sind damit immer gleichzeitig zu sehen, egal wie viel in einer steckt, und die Seite selbst scrollt kaum noch. Das ist die Bauart jedes Aufgabenbretts, und sie ist es aus genau diesem Grund. Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer festen Zahl. Unter 900 px stehen die Tafeln untereinander und laufen wieder frei -- auf dem Handy ist ein Kaestchen mit eigenem Balken eine Falle, keine Hilfe. Der Balken ist selbst gestaltet; der Systembalken reisst ein weisses Band in eine dunkle Flaeche. NOCH OFFEN aus derselben Nachricht: der Erinnerungswecker fuer Termine (ein-/ausschaltbar je Eintrag, mehrere Zeitpunkte, von jedem selbst einstellbar) -- dazu will Filipe ausdruecklich Recherche, und der baut sich nicht nebenbei. Zehn Pruefungen gelaufen, alle gruen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/calls.css | 62 ++++++++++++++++++++++++++++++---- workspace/assets/css/start.css | 26 +++++++++++++- workspace/aufgaben.html | 18 +++++----- workspace/automation.html | 20 +++++------ workspace/bereich.html | 28 +++++++-------- workspace/calls.html | 22 ++++++------ workspace/chat.html | 20 +++++------ workspace/content.html | 24 ++++++------- workspace/dateien.html | 20 +++++------ workspace/index.html | 4 +-- workspace/kalender.html | 22 ++++++------ workspace/leistung.html | 20 +++++------ workspace/personen.html | 20 +++++------ workspace/profil.html | 22 ++++++------ workspace/report.html | 22 ++++++------ workspace/scouting.html | 20 +++++------ workspace/start.html | 18 +++++----- workspace/startcheck.html | 22 ++++++------ workspace/steckbrief.html | 20 +++++------ workspace/uebersicht.html | 20 +++++------ workspace/wissen.html | 20 +++++------ 21 files changed, 272 insertions(+), 198 deletions(-) diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css index 3a7ae8f5..e43e3bdc 100644 --- a/workspace/assets/css/calls.css +++ b/workspace/assets/css/calls.css @@ -372,16 +372,66 @@ entscheidet die Breite -- eine im Skript festgeschriebene Spalte waere eine Zahl, die beim naechsten Fenster falsch ist. ===================================================================== */ +/* ===================================================================== + DREI TAFELN NEBENEINANDER, JEDE MIT EIGENEM LAUF (07.09.2026) + + Filipe: "das bewegt sich immer noch mit, das ist so scheissen. + gestalte die 3 kategorien anders, es soll richtig geil sein." + + DAS EIGENTLICHE PROBLEM WAR DIE AUFTEILUNG, nicht die Gestaltung. + Zwei Spalten, und "Steht an" hatte siebenundzwanzig Karten: Die + rechte Spalte lief ueber mehrere Bildschirmhoehen nach unten, die + linke war nach zwei Koepfen zu Ende. Wer scrollt, sieht dann + minutenlang eine leere halbe Seite mit einer Ueberschrift, die + scheinbar "mitwandert" -- sie steht bloss still, waehrend daneben + alles laeuft. + + Ein Brett loest das anders: Jede Tafel bekommt DIESELBE Hoehe und + einen EIGENEN Lauf. Damit sind alle drei Gruppen immer gleichzeitig + zu sehen, egal wie viel in einer steckt, und die Seite selbst + scrollt kaum noch. Das ist die Bauart jedes Aufgabenbretts, und sie + ist es aus genau diesem Grund. + + Die Hoehe haengt am Fenster (`min(62vh, 620px)`) statt an einer + festen Zahl: Auf einem Laptop bleibt unten Luft, auf einem grossen + Schirm nutzt das Brett den Platz. Unter 900 px stehen die Tafeln + untereinander und laufen wieder frei -- auf dem Handy ist ein + Kaestchen mit eigenem Balken eine Falle, keine Hilfe. + ===================================================================== */ .call-brett { display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; - align-items: start; + align-items: stretch; +} +.call-brett .gruppe { + display: flex; flex-direction: column; + min-height: 0; +} +.call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten { + flex: 1 1 auto; + min-height: 0; + max-height: min(62vh, 620px); + overflow-y: auto; + overscroll-behavior: contain; + /* Ein eigener Lauf braucht einen eigenen Balken -- der Systembalken + ist hell und reisst ein weisses Band in eine dunkle Flaeche. */ + scrollbar-width: thin; + scrollbar-color: rgba(150, 186, 220, .35) transparent; +} +.call-brett .gruppe__karten::-webkit-scrollbar { width: 10px; } +.call-brett .gruppe__karten::-webkit-scrollbar-track { background: transparent; } +.call-brett .gruppe__karten::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(150, 186, 220, .42), rgba(150, 186, 220, .22)); + border: 3px solid transparent; background-clip: content-box; + border-radius: 999px; +} +@media (max-width: 900px) { + /* Untereinander und ohne eigenen Lauf -- siehe oben. */ + .call-brett .gruppe:not([data-zu="ja"]) .gruppe__karten { + max-height: none; overflow: visible; + } } -/* Die lange Liste bekommt die erste Spalte und behaelt sie. Ohne diese - Zeile wandert sie je nach Anzahl mal links, mal rechts -- und eine - Oberflaeche, deren Aufbau sich mit dem Inhalt aendert, lernt man nie. */ -.call-brett .gruppe[data-gruppe="anstehend"] { grid-row: span 2; } .call-brett .gruppe { margin: 0; diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index b989f4cc..b1897fec 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -204,7 +204,31 @@ body.start > .schleier { /* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar sichtbar darüber, aber Klicks landeten teils am falschen Ort. */ -body.start > .kopfleiste, +/* DIE KOPFLEISTE BLEIBT OBEN STEHEN (07.09.2026). + + Filipe: "diese leiste soll immer da stehen bleiben, egal ob man die + seite runterscrollt oder nicht, auf allen seiten." + + Sie WAR nie klebend, obwohl es zwanzig Zeilen weiter unten so + dasteht (`.kopfleiste { position: sticky; top: 0 }`). Diese Regel + hier hat es ueberschrieben: `body.start > .kopfleiste` ist (0,2,1), + `.kopfleiste` nur (0,1,0) -- die staerkere gewinnt, unabhaengig von + der Reihenfolge. Gemessen im Browser: `position: relative`, und beim + Scrollen um 600 px wanderte die Leiste um 600 px nach oben aus dem + Bild. + + Das ist heute die VIERTE Spielart derselben Falle: `:where()` war zu + schwach, `body.start .willkommen` zu stark, die Kachel-Verschachtelung + zu stark -- und hier eine Regel, die etwas ganz anderes wollte (den + Stapelwert ueber der Buehne) und dabei die Positionierung mitnahm. + Wer `position` setzt, nur um `z-index` zu bekommen, greift jedes Mal + daneben. + + Der Stapelwert bleibt: 6 statt 1, damit die Leiste ueber den Modulen + liegt -- sie steht ja jetzt auf ihnen. */ +body.start > .kopfleiste { + position: sticky; top: 0; z-index: 6; +} body.start > .inhalt, body.start > main { position: relative; z-index: 1; } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 097374c3..aa114d0d 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index fbba2ac2..cdef305d 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -135,10 +135,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index f9767226..3b9d03f7 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -144,14 +144,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index aed6cfc6..29e2f2c8 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -77,11 +77,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 03a765ed..e10dc01b 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -9,17 +9,17 @@ - - + + - - - + + + @@ -155,10 +155,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index b8125f7b..9c76b0a7 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -167,12 +167,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index 52c0d589..93928856 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -96,10 +96,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index 4f4cfe4a..fca70b80 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -27,7 +27,7 @@ - + @@ -202,6 +202,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 9a07c120..349d0273 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -258,11 +258,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index a8edfc12..81f749c6 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 64e1e6b3..627dddb0 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -157,10 +157,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index c2985542..137bb757 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -202,11 +202,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index b89922f5..a66c0bf0 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -94,11 +94,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 0f4fc703..141e6586 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -127,10 +127,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 6b759fc8..1e7e01a2 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -320,10 +320,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 2d88e4b1..9f273e52 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -73,11 +73,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 0d2c5bd6..f7403f1a 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -114,10 +114,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 4ebacc60..ee5ba53e 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -9,13 +9,13 @@ - - + + - - - + + + @@ -137,11 +137,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index afd8b44d..7f0d914a 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +