From 535d86d3f7db113768e54c5ad52ce322de9f7097 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 00:18:06 +0200 Subject: [PATCH] Die Termine im Tagesfenster sind Karten statt Werkzeugleisten MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Filipe: "die sollen viel besser aussehen und viel geiler." WAS WIRKLICH SCHIEFLIEF, WAR KEIN GESCHMACK, SONDERN DER AUFBAU Zeit, Titel, Art und FUENF Knoepfe standen in EINER Zeile. Der Titel bekam damit den Rest -- "BigMatch vs. Beanii" brach auf DREI Zeilen um, waehrend rechts daneben Platz war. Die wichtigste Angabe der Zeile war die gequetschteste, und die Knoepfe waren genauso laut wie der Termin selbst. Jetzt drei Ebenen, wie bei einer Karte: OBEN Zeit und Titel, gross, ueber die ganze Breite -- der Titel hat keinen Wettbewerb mehr MITTE die Nebendaten (Dauer, Ort, Beschreibung) UNTEN die Knoepfe, rechtsbuendig in einer eigenen Reihe, durch eine Haarlinie abgesetzt Die Zeit steht gross am Anfang und mit gleichen Zifferbreiten: Sie ist das, wonach man in einem Tagesfenster sucht, und mehrere Zeilen stehen dadurch in einer Flucht. Die Zeile traegt jetzt dieselbe abgeschnittene Ecke wie alle Module -- ein Eintrag im Tagesfenster ist ein kleines Modul, kein Listenpunkt. ZWEI DINGE, DIE DABEI AN DIE RICHTIGE STELLE GERUECKT SIND * DIE ART GEHOERT ZUM TITEL. Sie stand als erstes Element in der Knopfreihe und sah damit aus wie ein Knopf, der nicht reagiert. Sie ist aber eine ANGABE ueber den Termin, wie Uhrzeit und Titel. Jetzt steht sie neben dem Titel, und die Knopfreihe enthaelt nur noch Dinge, die etwas tun. * DIE NEBENDATEN VOR DIE KNOEPFE. Im Raster bestimmt die Reihenfolge im Dokument, welche Zeile ein Feld bekommt -- die Knopfreihe stand davor und landete zwischen Titel und "30 Min · TikTok". Im ersten Bildschirmfoto stand die Beschreibung UNTER den Knoepfen, als gehoerte sie zu ihnen. Geloest ueber die Reihenfolge im Dokument und nicht ueber `order` im Stil: Sie gilt auch fuer Vorleseprogramme und die Tastatur, `order` verschiebt nur das Bild. Auf dem Handy stehen Zeit und Titel untereinander -- bei 390 px laesst eine 1,06-rem-Uhrzeit daneben keine zwei Woerter uebrig. Zehn Pruefungen gelaufen, alle gruen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/kalender.css | 125 +++++++++++++++++++++++++----- workspace/assets/js/kalender.js | 22 +++++- 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, 315 insertions(+), 214 deletions(-) diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css index c7126326..7f311063 100644 --- a/workspace/assets/css/kalender.css +++ b/workspace/assets/css/kalender.css @@ -423,46 +423,129 @@ } /* ---------- Eine ausführliche Zeile ------------------------------------- */ +/* ===================================================================== + EINE ZEILE IM TAGESFENSTER (07.09.2026 neu gebaut) + + Filipe: "die sollen viel besser aussehen und viel geiler." + + WAS WIRKLICH SCHIEFLIEF, war kein Geschmack, sondern der Aufbau: Zeit, + Titel, Art und FUENF Knoepfe standen in EINER Zeile. Der Titel bekam + damit den Rest, und "BigMatch vs. Beanii" brach auf drei Zeilen um -- + waehrend rechts daneben Platz war. Die wichtigste Angabe der Zeile + war die gequetschteste. + + Jetzt drei Ebenen, wie bei einer Karte: + + OBEN Zeit und Titel, gross, ueber die ganze Breite. Der Titel + hat keinen Wettbewerb mehr. + MITTE die Nebendaten (Dauer, Ort, Beschreibung) + UNTEN die Knoepfe, rechtsbuendig in einer eigenen Reihe + + Die Knoepfe sind damit auch nicht mehr gleich laut wie der Termin -- + sie stehen darunter statt daneben. Und die Zeit steht gross am + Anfang: Sie ist das, wonach man in einem Tagesfenster sucht. + ===================================================================== */ .k-zeile { --zfarbe: var(--akzent); position: relative; display: grid; - grid-template-columns: auto 1fr auto; - align-items: center; gap: 12px; - padding: 9px 12px 9px 14px; - border-radius: 8px; - border: 1px solid var(--rand); + grid-template-columns: auto 1fr; + align-items: baseline; + gap: 4px 14px; + padding: 13px 15px 12px 17px; + border-radius: 0; + border: 0; + /* Dieselbe abgeschnittene Ecke wie ueberall -- eine Zeile im + Tagesfenster ist ein kleines Modul, kein Listenpunkt. */ + clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); background: - linear-gradient(90deg, color-mix(in srgb, var(--zfarbe) 8%, transparent), transparent 50%), - var(--flaeche); + linear-gradient(90deg, + color-mix(in srgb, var(--zfarbe) 13%, transparent) 0%, + transparent 46%), + linear-gradient(180deg, #121a28, #0b111b); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .06), + 0 2px 6px -3px rgba(0, 0, 0, .8); + transition: background var(--tempo); } +.k-zeile:hover { + background: + linear-gradient(90deg, + color-mix(in srgb, var(--zfarbe) 20%, transparent) 0%, + transparent 50%), + linear-gradient(180deg, #16202f, #0d131f); +} +/* Die Farbschiene folgt der Silhouette -- sie beginnt unter der Fase, + sonst schnitte die Ecke sie ab und es bliebe ein Stummel. */ .k-zeile::before { - content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; - border-radius: 0 3px 3px 0; - background: var(--zfarbe); + content: ""; position: absolute; left: 0; top: 12px; bottom: 0; width: 3px; + background: linear-gradient(180deg, + var(--zfarbe), + color-mix(in srgb, var(--zfarbe) 35%, transparent)); } .k-zeile[data-erledigt="ja"] { opacity: .55; } .k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; } + +/* DIE ZEIT IST DIE FRAGE, DIE MAN AN EIN TAGESFENSTER HAT. Deshalb + gross, in der Farbe der Art, mit gleichen Zifferbreiten -- so stehen + mehrere Zeilen untereinander sauber in einer Flucht. */ .k-zeile__zeit { - font-size: .82rem; font-weight: 650; color: var(--zfarbe); + grid-column: 1; + font-size: 1.06rem; font-weight: 700; color: var(--zfarbe); font-variant-numeric: tabular-nums; - min-width: 5.5ch; + letter-spacing: -.01em; + white-space: nowrap; } -.k-zeile__titel { color: var(--text); min-width: 0; } -.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } +.k-zeile__titel { + grid-column: 2; + color: var(--text); + font-size: 1.02rem; font-weight: 650; + min-width: 0; + display: flex; align-items: center; gap: 8px; flex-wrap: wrap; +} + +/* Die Nebendaten stehen unter dem Titel, nicht daneben -- eingerueckt + auf die Titelspalte, damit eine Kante entsteht. */ +.k-zeile__zusatz { + grid-column: 2; + display: flex; flex-wrap: wrap; gap: 3px 12px; + margin-top: 2px; + font-size: .82rem; color: var(--text-leise); +} +.k-zeile__zusatz a { color: var(--akzent); } + +/* DIE KNOEPFE IN EIGENER REIHE, rechtsbuendig. Sie sind das Werkzeug, + nicht der Inhalt: Sie duerfen bereitstehen, aber nicht mit dem + Termin um Platz streiten. */ +.k-zeile__knoepfe { + grid-column: 1 / -1; + display: flex; align-items: center; gap: 7px; flex-wrap: wrap; + justify-content: flex-end; + margin-top: 9px; + padding-top: 9px; + border-top: 1px solid rgba(150, 186, 220, .1); +} +/* Die Art wandert in den Titel: Sie gehoert zum Termin, nicht zum + Werkzeug. */ .k-zeile__art { padding: 2px 9px; border-radius: 999px; - border: 1px solid color-mix(in srgb, var(--zfarbe) 32%, transparent); + border: 1px solid color-mix(in srgb, var(--zfarbe) 34%, transparent); + background: color-mix(in srgb, var(--zfarbe) 12%, transparent); color: var(--zfarbe); - font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; + font-size: .66rem; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; + white-space: nowrap; } -.k-zeile__zusatz { - grid-column: 1 / -1; - display: flex; flex-wrap: wrap; gap: 4px 10px; - font-size: .78rem; color: var(--text-leise); + +@media (max-width: 560px) { + /* Auf dem Handy untereinander: Eine Zeit von 1,06 rem neben einem + Titel laesst dort keine zwei Woerter uebrig. */ + .k-zeile { grid-template-columns: 1fr; } + .k-zeile__zeit, .k-zeile__titel, .k-zeile__zusatz { grid-column: 1; } + .k-zeile__knoepfe { justify-content: flex-start; } } -.k-zeile__zusatz a { color: var(--akzent); } +@media (prefers-reduced-motion: reduce) { .k-zeile { transition: none; } } /* ---------- Zeitstrahl --------------------------------------------------- Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge diff --git a/workspace/assets/js/kalender.js b/workspace/assets/js/kalender.js index b4cc4bb3..9fd6a469 100644 --- a/workspace/assets/js/kalender.js +++ b/workspace/assets/js/kalender.js @@ -927,8 +927,16 @@ if (e.serie_id) titel.append(wiederholZeichen()); k.append(titel); + /* DIE ART GEHOERT ZUM TITEL, NICHT ZU DEN KNOEPFEN (07.09.2026). + + Sie stand bisher als erstes Element in der Knopfreihe -- und sah + damit aus wie ein Knopf, der nicht reagiert. Sie ist aber eine + ANGABE ueber den Termin ("das ist ein Termin, kein Call"), genau + wie Uhrzeit und Titel. Jetzt steht sie neben dem Titel, und die + Knopfreihe enthaelt nur noch Dinge, die etwas tun. */ + titel.append(el('span', 'k-zeile__art', ARTNAME[e.art] || e.art)); + const rechts = el('div', 'k-zeile__knoepfe'); - rechts.append(el('span', 'k-zeile__art', ARTNAME[e.art] || e.art)); if (e.art === 'frist') { const a = el('a', 'schritt', 'zur Aufgabe'); @@ -977,8 +985,17 @@ })); } } - k.append(rechts); + /* DIE NEBENDATEN VOR DEN KNOEPFEN (07.09.2026). + Im Raster bestimmt die Reihenfolge im Dokument, welche Zeile ein + Feld bekommt. Die Knopfreihe stand hier vorher VOR den + Nebendaten -- und landete damit zwischen Titel und "30 Min · + TikTok". Im Bildschirmfoto stand die Beschreibung unter den + Knoepfen, als gehoerte sie zu ihnen. + + Reihenfolge im Dokument statt `order` im Stil: Sie gilt auch fuer + Vorleseprogramme und die Tastatur -- `order` verschiebt nur das + Bild und laesst beide beim alten Weg. */ if (e.zusatz || e.beschreibung) { const z = el('div', 'k-zeile__zusatz'); if (e.ort && /^https?:\/\//i.test(e.ort)) { @@ -995,6 +1012,7 @@ if (e.beschreibung) z.append(el('span', null, e.beschreibung)); k.append(z); } + k.append(rechts); return k; } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 48efea5e..09ddf131 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 6d9d9d4f..7450c170 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 e7666d9d..4dae9b23 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 40b810c8..bba5d2be 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 2ff93f4d..228348cc 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 f0a6b5fe..0fefc28a 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 f0be81b6..d799ccd7 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 ac19ba82..2ff84319 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 e6a123af..3fc2b0d3 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 1a6b5ceb..2bc861fd 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 1da3f983..180ec93b 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 5038616d..d4b936dc 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 e8bd438d..f402433f 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 45a157a8..eb6489b3 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 cecb0f61..6aca796e 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 ccf4cc3a..9d722116 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 169ec68d..cdd552a6 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 707227ae..509f0e14 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 8d2c1ca8..9f31ea7f 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +