diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css index 9137f4a0..16f95d0d 100644 --- a/workspace/assets/css/kalender.css +++ b/workspace/assets/css/kalender.css @@ -1205,3 +1205,46 @@ } .tagdialog__kopf .titel { margin: 0; font-size: 1.24rem; } .wecker-hinweis { margin: 0 0 14px; } + +/* =================================================================== + ANLAESSE UND WIEDERHOLUNGEN IN EINER KACHEL (08.09.2026) + + Filipe: "ich will dass das alles in einer geilen kachel ist wie die + kacheln in der start seite. und noch geiler." + + Drei Abschnitte standen frei auf dem Hintergrundbild: was als + Naechstes ansteht, was in diesem Monat liegt, was von allein + weiterlaeuft. Drei Ueberschriften ohne Fassung lesen sich als drei + lose Listen -- zusammen sind sie EINE Auskunft: was ausser den + Terminen im Raster sonst noch kommt. + + DAS FORMULAR "NEUER TERMIN" GEHOERT NICHT HINEIN. Es stand im + Quelltext zwischen den Abschnitten; der Umschlag haette es + mitgenommen. Der Wiederholungs-Abschnitt ist deshalb nach oben zu + den anderen beiden gewandert, das Formular steht jetzt hinter der + Kachel. Inhaltlich ist das ohnehin die bessere Ordnung: erst lesen, + was kommt, dann etwas anlegen. + + VERSCHWINDET, WENN NICHTS DRIN IST. Alle drei Abschnitte tragen + `hidden`, solange sie leer sind -- eine leere Kachel mit drei + unsichtbaren Kindern waere ein Kasten um nichts. `:has()` fragt + genau das ab, ohne eine Zeile JavaScript. */ +.k-anlasskachel { + position: relative; + margin: 0 0 24px; + padding: 18px 20px 6px; + clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px)); + background: + var(--raster), + linear-gradient(178deg, rgba(19, 26, 38, .82), rgba(10, 14, 22, .88)); + box-shadow: + inset 0 1px 0 rgba(160, 195, 230, .10), + inset 7px 7px 14px -10px rgba(0, 0, 0, .9), + 0 10px 26px -18px rgba(0, 0, 0, .9); +} +.k-anlasskachel:not(:has(> section:not([hidden]))) { display: none; } +/* Die Abschnitte darin tragen nur noch ihre Ueberschrift -- die + Fassung kommt jetzt von aussen. Der letzte ohne Abstand nach unten, + sonst steht die Kachel unten leer. */ +.k-anlasskachel > .k-leiste { margin-bottom: 18px; } +.k-anlasskachel > .k-leiste:last-of-type { margin-bottom: 12px; } diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css index 61f9a9f3..d80d9a6c 100644 --- a/workspace/assets/css/report.css +++ b/workspace/assets/css/report.css @@ -85,3 +85,91 @@ @media (max-width: 620px) { .entscheidung__raster { grid-template-columns: 1fr; } } + +/* =================================================================== + JEDER ABSCHNITT IST EINE GROSSE KACHEL (08.09.2026) + + Filipe, mit Bildschirmfoto: "die ganzen kacheln sollen viel geiler + aussehen und spezieller. mach auch vielleicht 2 größere kacheln wo + die anderen kleineren drin sind und richtig geil angepasst." + + `.block` war bisher ein reiner Behaelter -- eine Ueberschrift und ein + Rand nach unten, sonst nichts. Die kleinen Zahlenkarten standen damit + frei auf dem Hintergrundbild, und bei vier Abschnitten hintereinander + verlor man, welche Karte zu welcher Frage gehoert. Genau das zeigt + Filipes Bild: siebzehn Karten in einer Flaeche, ohne sichtbare + Zugehoerigkeit. + + Jetzt traegt jeder Abschnitt eine eigene Kachel in derselben Sprache + wie die Startseite: gefraeste Fase, Rasterhintergrund, Innenschatten. + Die kleinen Karten liegen sichtbar DARIN. + + NICHT ueber die Modulliste in module.css, obwohl es dieselbe Optik + ist: `.block` gibt es auch auf automation.html, und dort sind es + Formularbloecke, keine Sammelkacheln. Die Regel steht deshalb in + report.css -- diese Datei wird nur von report.html geladen, die + Datei selbst ist die Bedingung. */ +.block { + position: relative; + margin-bottom: 20px; + padding: 16px 18px 18px; + clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px)); + background: + var(--raster), + linear-gradient(178deg, rgba(19, 26, 38, .82), rgba(10, 14, 22, .88)); + box-shadow: + inset 0 1px 0 rgba(160, 195, 230, .10), + inset 7px 7px 14px -10px rgba(0, 0, 0, .9), + 0 10px 26px -18px rgba(0, 0, 0, .9); +} +/* Die Ueberschrift wird zum Kopf der Kachel: eine Linie darunter statt + nur Abstand. Sie trennt die Frage von ihren Antworten. */ +.block__titel { + margin: 0 0 12px; + padding-bottom: 9px; + border-bottom: 1px solid transparent; + border-image: linear-gradient(90deg, + color-mix(in srgb, var(--akzent) 45%, transparent), transparent 68%) 1; +} + +/* ---- Die kleinen Karten bekommen Luft ---------------------------- + + Gemessen: In ALLEN 17 Karten lagen Name und Zahl weniger als sechs + Pixel auseinander, bei langen Namen ("LIVE-Schnitt aus 0 + Bewertung(en)") sah es aus, als ueberlappten sie. Echte Ueberlappung + war es nicht -- knapp genug, um wie eine auszusehen, und das ist + dasselbe Problem. + + Zwei Aenderungen: 180 px Mindestbreite statt 158 (der Name bekommt + eine Zeile mehr, bevor er umbricht) und ein fester Abstand zwischen + Name und Zahl, den kein langer Text aufbrauchen kann. */ +.kacheln { + gap: 12px; + grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); +} +.block .kachel__name { padding-right: 14px; } + +/* DIE ZAHL BRAUCHT PLATZ, DEN DIE KARTE NICHT KENNT (08.09.2026). + + Filipes Bildschirmfoto zeigte abgeschnittene Zahlen: Unter "Was + blockiert?" standen 5, 2, 1 und 0 nur zur oberen Haelfte da, den Rest + verdeckte die Aufgabenliste darunter. + + NACHGEMESSEN, und es war nicht das, wonach es aussah. Die Liste liegt + sauber unter dem Raster (543..594 gegen 594..802, kein Ueberlappen). + Herausgeragt ist die ZAHL SELBST: `.kachel__zahl` ist + `position: absolute` und damit fuer die Hoehenrechnung der Karte + unsichtbar. Bei 27 px Schrift in einer 51 px hohen Karte steht sie + 17 px unten ueber -- und was ueber den Rand steht, verdeckt das + naechste Element. + + Sechs von siebzehn Karten waren betroffen: genau die in Bloecken, in + denen das Raster nur eine Zeile hat und deshalb niedriger ausfaellt. + In den anderen Bloecken war die Zeile hoch genug, dort fiel es nie + auf -- der Fehler war da, aber nur manchmal sichtbar. + + Die Mindesthoehe ist der ehrliche Weg: Sie sagt der Karte, wie viel + Platz ihr Inhalt WIRKLICH braucht. Die Zahl kleiner zu machen waere + die bequemere Antwort und die falsche -- sie ist die Aussage der + Karte. */ +.block .kachel { min-height: 74px; } diff --git a/workspace/kalender.html b/workspace/kalender.html index c5dce752..158401b5 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -65,6 +65,22 @@ beim Blättern "Im September" beschreibt den Monat, den man gerade ansieht Ohne Überschriften wären zwei gleich aussehende Reihen verwirrend. --> + +
+ + + + +
+ - - + +