Anlaesse und Report bekommen Sammelkacheln -- und die Zahlen ragten heraus
Filipe, mit zwei Bildschirmfotos: "ich will dass das alles in einer geilen kachel ist wie die kacheln in der start seite" und "die ganzen kacheln sollen viel geiler aussehen und spezieller. mach auch vielleicht 2 größere kacheln wo die anderen kleineren drin sind". DER KALENDER: 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. Jetzt eine Kachel in der Sprache der Startseite. Das Formular "Neuer Termin" stand im Quelltext ZWISCHEN den Abschnitten und waere mitgenommen worden. Der Wiederholungs-Abschnitt ist deshalb nach oben gewandert, das Formular steht hinter der Kachel -- inhaltlich ohnehin die bessere Ordnung: erst lesen, was kommt, dann etwas anlegen. Sind alle drei Abschnitte leer, verschwindet die Kachel; `:has()` fragt das ab, ohne eine Zeile JavaScript. DER REPORT: Die vier Abschnitte sind jetzt Sammelkacheln, die kleinen Zahlenkarten liegen sichtbar darin. Vorher schwebten siebzehn Karten in einer Flaeche, ohne dass man sah, welche zu welcher Frage gehoert. UND DABEI EIN ECHTER FEHLER, DER NICHT DAS WAR, WONACH ER AUSSAH. In Filipes Bild standen die Zahlen unter "Was blockiert?" nur zur oberen Haelfte da -- die Aufgabenliste darunter schien sie zu ueberdecken. Nachgemessen liegt die Liste 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. Sechs von siebzehn Karten waren betroffen: genau die in Bloecken, deren Raster nur eine Zeile hat und deshalb niedriger ausfaellt. In den anderen war die Zeile hoch genug, dort fiel es nie auf. Der Fehler war immer da und nur manchmal sichtbar. Behoben ueber eine Mindesthoehe -- sie sagt der Karte, wie viel Platz ihr Inhalt WIRKLICH braucht. Die Zahl kleiner zu machen waere die bequemere und die falsche Antwort: Sie ist die Aussage der Karte. Nachgemessen: 6 -> 0 Karten mit herausragendem Inhalt. Dazu mehr Luft: 180 px Mindestbreite statt 158. Gemessen lagen in ALLEN 17 Karten Name und Zahl unter sechs Pixel auseinander. Beide Regeln stehen in report.css bzw. kalender.css, nicht in der Modulliste: `.block` gibt es auch auf automation.html, dort sind es Formularbloecke. Die Datei ist die Bedingung. pruef-kalender EXIT=0 (84), pruef-serien EXIT=0 (69), pruef-css-klassen EXIT=0 (28), pruef-start-ansicht EXIT=0 (143). Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
+29
-8
@@ -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. -->
|
||||
<!-- ==== ALLES DREI 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."
|
||||
|
||||
Die drei Abschnitte -- was als Naechstes ansteht, was in diesem
|
||||
Monat liegt, was von allein weiterlaeuft -- standen frei auf dem
|
||||
Hintergrundbild. Drei Ueberschriften ohne Fassung lesen sich als
|
||||
drei lose Listen; zusammen sind sie EINE Auskunft: was ausser den
|
||||
Terminen im Kalender sonst noch kommt.
|
||||
|
||||
Der Umschlag traegt die Kacheloptik der Startseite (Fase, Raster,
|
||||
Innenschatten), die drei Abschnitte darin nur noch ihre
|
||||
Ueberschrift. Faellt alles drei weg, verschwindet auch die
|
||||
Kachel -- siehe `:has()` in kalender.css. -->
|
||||
<section class="k-anlasskachel">
|
||||
|
||||
<section class="k-leiste" id="saison-block" hidden>
|
||||
<p class="feldschild">Als Nächstes</p>
|
||||
<div class="k-anlassreihe" id="saison"></div>
|
||||
@@ -75,6 +91,17 @@
|
||||
<div class="k-anlassreihe" id="monatsanlaesse"></div>
|
||||
</section>
|
||||
|
||||
<!-- Die laufenden Wiederholungen. Steht bewusst über dem Kalender und
|
||||
nicht in einem Menü versteckt: Was von allein weiterläuft, muss
|
||||
man sehen können, sonst weiß nach drei Monaten niemand mehr,
|
||||
warum jeden Dienstag ein Call im Kalender steht. -->
|
||||
<section class="k-leiste k-serien" id="serien-block" hidden>
|
||||
<p class="feldschild">Läuft von allein</p>
|
||||
<div class="k-serienliste" id="serien"></div>
|
||||
</section>
|
||||
|
||||
</section><!-- /.k-anlasskachel -->
|
||||
|
||||
<form class="neu" id="neu" hidden>
|
||||
<div class="neu__zeile">
|
||||
<label class="feld-schild" for="f-titel">Worum geht es?</label>
|
||||
@@ -182,14 +209,8 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Die laufenden Wiederholungen. Steht bewusst über dem Kalender und
|
||||
nicht in einem Menü versteckt: Was von allein weiterläuft, muss
|
||||
man sehen können, sonst weiß nach drei Monaten niemand mehr,
|
||||
warum jeden Dienstag ein Call im Kalender steht. -->
|
||||
<section class="k-leiste k-serien" id="serien-block" hidden>
|
||||
<p class="feldschild">Läuft von allein</p>
|
||||
<div class="k-serienliste" id="serien"></div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- KALENDER ABONNIEREN (06.09.2026, Stufe 3.2 des Plans).
|
||||
|
||||
|
||||
Reference in New Issue
Block a user