From e744f22fbc70b1b2a01e9a0b120b0403a7be5f25 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 00:05:15 +0200 Subject: [PATCH] Vier Tafeln in einer Reihe -- die offene breiter als die Reiter Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann eins drunter. perfektionier das." DER GRUND WAR EINE RECHNUNG, DIE ICH NICHT KONTROLLIERT HABE Dort stand `auto-fit` mit 340 px Mindestbreite -- CSS rechnet sich dann selbst aus, wie viele nebeneinanderpassen. Bei vier Tafeln in einer 1240 px breiten Spalte reichte es fuer drei; die vierte rutschte in eine zweite Zeile. `auto-fit` ist bequem, solange die Anzahl offen ist. Sobald sie feststeht, ist es eine Rechnung, die man aus der Hand gibt. Vier sind es, vier stehen nebeneinander -- und zwar mit `flex` statt `grid`, weil damit die OFFENE Tafel breiter sein kann als die geschlossenen. Es ist immer genau eine offen, und die bekommt den anderthalbfachen Anteil: Dort wird gearbeitet, die anderen sind Reiter. Das ist der Unterschied zwischen vier gleich grossen Kaesten und einem Brett. UND EIN VERSPRECHEN, DAS ERST NACH DEM ERSTEN KLICK GALT Das Akkordeon griff nur beim Klicken. Beim Laden kamen die gemerkten Staende aus der Ablage, und die konnten drei offene Tafeln ergeben -- im Bildschirmfoto standen genau so drei offen nebeneinander. Jetzt bleibt beim Aufbau die erste Tafel offen, die etwas enthaelt; alle weiteren klappen zu, ohne den gemerkten Stand zu ueberschreiben. DREIMAL GEMESSEN STATT GESCHAETZT Nach dem Umbau standen dort "LAEUFT AUTO..." und "FESTGEHALT..." -- 252 px je Reiter, gemessen. Ich habe zweimal an den Pixeln gedreht (Anteil 2,2 -> 1,8 -> 1,5, Sperrung 0,08 -> 0,035 em) und es blieb abgeschnitten. Die richtige Antwort war nicht die dritte Zahl, sondern der Name: Ein Reiter braucht ein Wort. Aus "Laeuft automatisch" wurde "Wiederholungen" -- was es genau heisst, steht im Satz darunter, und den liest man ohnehin erst, wenn die Tafel offen ist. Gemessen am Ende: vier Tafeln, EINE Reihe, EINE offen, KEIN abgeschnittener Titel. Sechs Pruefungen gelaufen, alle gruen. OFFEN, damit es nicht untergeht: pruef-call-kategorien meldet auf Windows sporadisch Rueckgabewert 127 -- NACH "ALLES IN ORDNUNG", also beim Beenden des Prozesses (libuv-Assertion beim Schliessen des noch laufenden Servers). Das Ergebnis stimmt, der Rueckgabewert luegt. Wer nur auf den Code sieht, haelt einen gruenen Lauf fuer rot. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/calls.css | 60 ++++++++++++++++++++++++++++++++-- workspace/assets/js/calls.js | 35 ++++++++++++++++++-- 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, 281 insertions(+), 196 deletions(-) diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css index 32529f2e..568a7445 100644 --- a/workspace/assets/css/calls.css +++ b/workspace/assets/css/calls.css @@ -399,11 +399,65 @@ Kaestchen mit eigenem Balken eine Falle, keine Hilfe. ===================================================================== */ .call-brett { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); - gap: 16px; + /* EINE REIHE, VIER TAFELN (07.09.2026). + + Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann + eins drunter." + + Vorher stand hier `auto-fit` mit 340 px Mindestbreite. Das rechnet + sich selbst aus, wie viele nebeneinanderpassen -- und bei vier + Tafeln in einer 1240 px breiten Spalte reichte es fuer drei. Die + vierte rutschte in eine zweite Zeile, und das Brett sah aus wie + ein Versehen. `auto-fit` ist bequem, solange die Anzahl offen ist; + sobald sie feststeht, ist es eine Rechnung, die man nicht + kontrolliert. + + Vier sind es, vier stehen nebeneinander -- und zwar mit `flex` + statt `grid`, weil damit die OFFENE Tafel breiter sein kann als + die drei geschlossenen. Es ist immer genau eine offen (siehe + calls.js), und die bekommt doppelten Anteil: Dort wird gearbeitet, + die anderen sind Reiter. Das ist der Unterschied zwischen vier + gleich grossen Kaesten und einem Brett. */ + display: flex; + flex-wrap: nowrap; + gap: 14px; align-items: stretch; } +.call-brett .gruppe { flex: 1 1 0; min-width: 0; } +.call-brett .gruppe:not([data-zu="ja"]) { flex: 1.5 1 0; } + +/* DER TITEL MUSS GANZ HINEINPASSEN, nicht abgeschnitten werden. + + Im ersten Anlauf standen dort "LAEUFT AUTO..." und "FESTGEHALT..." -- + gemessen bei 222 px je zugeklappter Tafel. Ein abgeschnittener Name + auf einem Reiter ist das Gegenteil von uebersichtlich: Man muss ihn + aufklappen, um zu wissen, was drin ist. + + Zwei Stellschrauben statt einer: Die offene Tafel nimmt 1,5 Anteile + statt 2,2 (die geschlossenen wachsen dadurch von 222 auf 266 px), und + die Sperrung der Grossbuchstaben faellt von 0,08 auf 0,035 em. Beides + zusammen bringt "LAEUFT AUTOMATISCH" unter -- Punkte bleiben als + letzte Rueckfallebene stehen, falls jemand eine laengere Gruppe + erfindet. */ +.call-brett .stufe__titel { + min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + letter-spacing: .035em; + font-size: .74rem; +} +.call-brett .stufe__kopf { gap: 8px; padding-left: 13px; padding-right: 11px; } +.call-brett .stufe__zahl, .call-brett .gruppe__pfeil { flex: none; } + +@media (max-width: 1100px) { + /* Vier nebeneinander unter 1100 px waeren vier Streifen von 250 px -- + lesbar, aber nicht mehr benutzbar. Ab hier zwei Reihen zu zwei. */ + .call-brett { flex-wrap: wrap; } + .call-brett .gruppe, + .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 calc(50% - 7px); } +} +@media (max-width: 700px) { + .call-brett .gruppe, + .call-brett .gruppe:not([data-zu="ja"]) { flex: 1 1 100%; } +} .call-brett .gruppe { display: flex; flex-direction: column; min-height: 0; diff --git a/workspace/assets/js/calls.js b/workspace/assets/js/calls.js index 2ad4ef0e..d9774e12 100644 --- a/workspace/assets/js/calls.js +++ b/workspace/assets/js/calls.js @@ -403,8 +403,17 @@ { schluessel: 'offen', titel: 'Protokoll fehlt', frage: 'Diese Gespräche sind vorbei, aber noch nicht festgehalten.' }, { schluessel: 'anstehend', titel: 'Steht an', frage: null }, - { schluessel: 'serien', titel: 'Läuft automatisch', - frage: 'Wiederholungen dieses Monats. Was danach kommt, steht im Kalender.' }, + /* "Wiederholungen" und nicht "Laeuft automatisch": Der Kopf ist ein + REITER, und ein Reiter braucht ein Wort. Bei vier Tafeln in einer + Reihe bleiben je 252 Pixel -- gemessen, und "LAEUFT AUTOMATISCH" + passte dort nicht hinein, es stand "LAEUFT AUTO...". Ein + abgeschnittener Name auf einem Reiter ist das Gegenteil von + uebersichtlich: Man muss aufklappen, um zu wissen, was drin ist. + Was es genau bedeutet, steht im Satz darunter -- und den liest + man ohnehin erst, wenn die Tafel offen ist. */ + { schluessel: 'serien', titel: 'Wiederholungen', + frage: 'Läuft automatisch – die Wiederholungen dieses Monats. ' + + 'Was danach kommt, steht im Kalender.' }, { schluessel: 'erledigt', titel: 'Festgehalten', frage: null }, ]; @@ -495,6 +504,21 @@ beim naechsten Fenster falsch ist. */ ziel.className = 'call-brett'; + /* AUCH BEIM LADEN IST NUR EINE OFFEN (07.09.2026). + + Das Akkordeon griff bisher nur beim KLICK. Beim ersten Aufbau + kamen die gemerkten Staende aus der Ablage, und die konnten drei + offene Tafeln ergeben -- im Bildschirmfoto standen genau so drei + nebeneinander offen. Ein Versprechen, das erst nach dem ersten + Klick gilt, ist keines. + + Offen bleibt die ERSTE Tafel, die etwas enthaelt und nicht + ausdruecklich zugeklappt wurde. "Die erste mit Inhalt" ist + dieselbe Regel, nach der auch die Zeitbloecke aufgehen -- alles + zuzuklappen hiesse, dass man nach dem Laden erst klicken muss, + um ueberhaupt etwas zu sehen. */ + let schonOffen = false; + for (const g of GRUPPEN) { /* `|| []` fuer den Fall, dass ein Server ohne die neue Gruppe antwortet -- etwa wenn die Seite noch aus dem Zwischenspeicher @@ -534,6 +558,13 @@ const gemerkt = localStorage.getItem(schluessel); if (gemerkt) zu = gemerkt === 'zu'; } catch { /* ohne Ablage bleibt die Vorgabe */ } + /* Die zweite und jede weitere offene Tafel wird zugeklappt -- + ohne den gemerkten Stand zu ueberschreiben: Wer sie aufklappt, + soll beim naechsten Mal wieder DIESE bekommen und nicht die + erste. */ + if (!zu && !liste.length) zu = true; + if (!zu && schonOffen) zu = true; + if (!zu) schonOffen = true; const stand = (istZu) => { s.dataset.zu = istZu ? 'ja' : 'nein'; kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true'); diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 639ce41d..48efea5e 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 af8a242e..6d9d9d4f 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 8f7edb7a..e7666d9d 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 512df23d..40b810c8 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 0ca259a8..2ff93f4d 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 9f883476..f0a6b5fe 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 0b3934f1..f0be81b6 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 18481ce9..ac19ba82 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -27,7 +27,7 @@ - + @@ -219,6 +219,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index f9bb9014..e6a123af 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -288,11 +288,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index ddc42cc5..1a6b5ceb 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 e6e47964..1da3f983 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 a524d501..5038616d 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 48398971..e8bd438d 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 a286a53a..45a157a8 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 d8c98b27..cecb0f61 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 cbdcfbce..ccf4cc3a 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 ca35e259..169ec68d 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 d7a516db..707227ae 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 0d2bf257..8d2c1ca8 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +