Am Handy wird aus einer Kalenderpille ein Punkt
GEMESSEN, was dort wirklich stand:
Fenster Zelle Pille Platz fuer Text
360 px 42 px 32 px 16 px -> 1-2 Buchstaben
390 px 46 px 36 px 20 px -> 2-3 Buchstaben
412 px 49 px 39 px 23 px -> 3 Buchstaben
768 px 95 px 85 px 69 px -> lesbar
"Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe kostet
und nichts sagt. Drei Termine an einem Tag waren drei solche Zeilen.
JETZT: ein Punkt je Termin, nebeneinander. Man sieht, DASS an dem Tag
etwas ist und wie viel, und tippt den Tag an, um zu lesen, was. Der
Tagesdialog dafuer steht seit jeher, ist lesbar und hat 44-px-Zeilen;
er war nur schwer zu finden, solange das Raster so tat, als koenne man
dort lesen.
- Zeitraum: bleibt ein durchgehender Balken. Ihn auch zu Punkten zu
machen naehme genau das weg, wofuer er am 21.09. gebaut wurde.
- Anlass (Feiertag u. a.): ein ECKIGES Zeichen, damit man es vom
runden Termin unterscheidet. "DE…" fuer "Tag der Deutschen
Einheit" sagt genauso wenig.
- Erledigtes: hohl statt voll -- sonst saehe ein abgehakter Termin
aus wie ein offener, und der Kalender loege.
- Die Punkte sind NICHT einzeln antippbar (pointer-events: none).
Ein 8-px-Link waere ein Nadeloehr; so faellt jeder Tipp auf die
Zelle. Am Rechner bleibt die Pille ein Link.
DREI DINGE, DIE ERST DAS BILDSCHIRMFOTO GEZEIGT HAT:
(1) Die Zahlen sagten 8 x 8 -- und der Titel lief trotzdem quer ueber
die Nachbarzellen. Ursache: start.css traegt eine Sammelregel
`body.start .k-pille { font-size: .75rem }`, um ein Element
spezifischer als `.k-tag .k-pille` (0,2,1 gegen 0,2,0). Sie
gewinnt, egal welche Datei spaeter laedt. Aufgeklaert hat es die
Frage an den Browser, WELCHE Regeln auf das Element passen.
(2) `.k-tag` traegt `container-type: inline-size` und ist damit der
Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` SELBST in
`@container` wird gegen den naechsten Behaelter darueber geprueft
und greift nie. Die Zelle blieb eine Flex-Spalte, jeder Punkt bekam
eine eigene Zeile. Jetzt fragt die Zelle das Raster -- ein
benannter Behaelter, Schwelle gerechnet: 46 + 8 + 7 x 60 = 474.
(3) Die Kinder der Pille (Uhrzeit, Wiederholzeichen) haben eine eigene
Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein 8 x 26
grosser "Punkt" ist ein Strich.
pruef-kalender: 141/0 -- vorher 135 ok und 6 FEHL.
Die sechs waren KEIN Fehler am Kalender, und nur einer davon war neu:
- Vier kamen von Screen 11 (Termin von-bis): Ein Eintrag ueber fuenf
Tage setzt fuenf Marken, und die Pruefung zaehlte Marken statt
Eintraege. Sie hatte am 17.09. schon gelernt, ihre Erwartung
abzuleiten -- veraltet war diesmal nicht die Erwartung, sondern
das, was gemessen wurde. Gezaehlt wird jetzt ueber den VERWEIS
(`zeigen=eintrag-N`), der an jedem Tag derselbe ist. Der `title`
ginge nicht: Er endet mit "(Tag 3 von 5)".
- Zwei waren meine: Die Pruefung las die Farbe aus der linken Kante
-- die faellt beim Punkt weg, also meldete sie "1 Farbe" statt 5.
Gelesen wird jetzt `--pfarbe`, die Quelle selbst.
Neun neue Zusicherungen, darunter die, die beim Bauen gefehlt hat:
"nichts ragt ueber den Rand seiner Zelle hinaus". Groesse allein
genuegt nicht -- die Pille war bereits 8 x 8 und trug trotzdem Text.
Gegenprobe: Raster auf 1200 px aufziehen, Titel muss zurueckkommen.
Nachbarn gruen: pruef-tippziele 11/0 (sieht die 11 neuen Regeln, zaehlt
den Punkt richtig nicht als Tippziel), pruef-css-klassen 30/0,
pruef-zeitraum 16/0, pruef-terminregel 35/0.
This commit is contained in:
@@ -1714,3 +1714,171 @@
|
||||
.k-strahl .k-pille__brett { display: block; }
|
||||
.k-zeile .k-pille__brett { display: none; }
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
AM HANDY WIRD AUS EINER PILLE EIN PUNKT (21.09.2026)
|
||||
=====================================================================
|
||||
|
||||
GEMESSEN, nicht geschaetzt. Eine Monatszelle und die Pille darin:
|
||||
|
||||
Fenster Zelle Pille Platz fuer Text
|
||||
360 px 42 px 32 px 16 px -> 1-2 Buchstaben
|
||||
390 px 46 px 36 px 20 px -> 2-3 Buchstaben
|
||||
412 px 49 px 39 px 23 px -> 3 Buchstaben
|
||||
768 px 95 px 85 px 69 px -> lesbar
|
||||
1280 px 158 px 140 px 124 px -> lesbar
|
||||
|
||||
Der Platz fuer Text ist die Zellenbreite minus 34 px: 18 px
|
||||
Zellenrand, 14 px Pillenrand, 2 px farbige Kante. Bei 11,5 px
|
||||
Schrift sind das am Handy anderthalb Buchstaben und drei Punkte.
|
||||
"Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe
|
||||
kostet und nichts sagt.
|
||||
|
||||
WAS GROSSE KALENDER AN DIESER STELLE TUN: einen Punkt. Man sieht,
|
||||
DASS an dem Tag etwas ist und wie viel -- und tippt den Tag an, um
|
||||
zu lesen, was. Der Tagesdialog dafuer steht seit jeher (tagOeffnen),
|
||||
er ist lesbar und hat 44-px-Zeilen; er war nur schwer zu finden,
|
||||
solange das Raster so tat, als koenne man dort lesen.
|
||||
|
||||
DIE SCHWELLE IST GERECHNET, NICHT GERATEN: Vier Buchstaben sind das
|
||||
Wenigste, aus dem ein Mensch einen Hinweis zieht. 4 x 6,2 px = 25 px
|
||||
Text + 34 px Rand = 59 px Zelle. Darum 60.
|
||||
|
||||
UND SIE MISST DIE ZELLE, NICHT DAS FENSTER -- wie die Regel fuer den
|
||||
Brettnamen daneben. Eine Fensterschwelle waere wieder die Rechnung
|
||||
von gestern und muesste bei jeder Aenderung am Raster nachgezogen
|
||||
werden.
|
||||
|
||||
EIN ZEITRAUM BLEIBT EIN BALKEN. Ihn auch zu Punkten zu machen wuerde
|
||||
genau das wegnehmen, wofuer er am 21.09. gebaut wurde: dass man
|
||||
sieht, wie weit etwas laeuft. Ohne Text, aber durchgehend.
|
||||
|
||||
DIE PUNKTE SIND NICHT EINZELN ANTIPPBAR (`pointer-events: none`).
|
||||
Ein 7-px-Link waere ein Nadeloehr -- die Hausregel sind 44 px. So
|
||||
faellt jeder Tipp auf die ZELLE, und die oeffnet den Tagesdialog.
|
||||
Am Rechner, wo eine Maus genau zielt, bleibt die Pille ein Link.
|
||||
===================================================================== */
|
||||
@container (max-width: 60px) {
|
||||
/* WARUM HIER UEBERALL `body` DAVORSTEHT -- gemessen, nicht geschmueckt.
|
||||
|
||||
start.css traegt eine Sammelregel fuer schmale Fenster:
|
||||
body.start .k-pille { font-size: .75rem }
|
||||
Die ist um EIN Element spezifischer als `.k-tag .k-pille`
|
||||
(0,2,1 gegen 0,2,0) und gewinnt damit, egal welche Datei spaeter
|
||||
laedt. Folge ohne das `body`: Der Punkt bekam Groesse, Farbe und
|
||||
`pointer-events` aus dieser Regel hier -- die Schriftgroesse aber
|
||||
aus start.css. Er war 8 x 8 gross und trug trotzdem einen Titel,
|
||||
der quer ueber die Nachbarzellen lief.
|
||||
|
||||
Aufgefallen ist das NICHT an den Zahlen (die sagten 8 x 8, alles
|
||||
gut), sondern am Bildschirmfoto. Aufgeklaert hat es die Frage an
|
||||
den Browser, WELCHE Regeln auf das Element passen -- statt zu
|
||||
raten, welche gewinnen sollte.
|
||||
|
||||
`body` hebt auf denselben Wert (0,2,1) und gewinnt dann ueber die
|
||||
Reihenfolge, weil kalender.css nach start.css laedt. Das ist der
|
||||
kleinstmoegliche Schritt; `!important` waere die Tuer, durch die
|
||||
beim naechsten Mal niemand mehr zurueckfindet. */
|
||||
|
||||
/* Die Zelle wird zum Block, damit die Punkte nebeneinander laufen
|
||||
und umbrechen. Als Flex-Spalte saesse jeder Punkt in einer eigenen
|
||||
Zeile -- drei Termine waeren dann hoeher als der ganze Tag. */
|
||||
|
||||
body .k-tag .k-pille {
|
||||
display: inline-block;
|
||||
width: 8px; height: 8px;
|
||||
padding: 0;
|
||||
margin: 0 3px 3px 0;
|
||||
border-left: 0;
|
||||
border-radius: 50%;
|
||||
/* Voll deckend -- die 16-%-Fuellung der Pille waere als Punkt
|
||||
kaum zu sehen. */
|
||||
background: var(--pfarbe);
|
||||
font-size: 0; /* der Text geht, die Farbe bleibt */
|
||||
line-height: 0;
|
||||
min-height: 0;
|
||||
overflow: visible;
|
||||
pointer-events: none; /* der Tipp gehoert der Zelle */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* DIE KINDER AUCH. `font-size: 0` an der Pille nimmt nur den nackten
|
||||
Textknoten mit -- die Uhrzeit und das Wiederholzeichen haben ihre
|
||||
eigene Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein
|
||||
8 x 26 grosser "Punkt" ist ein Strich. Gemessen, nicht vermutet. */
|
||||
body .k-tag .k-pille > * { display: none; }
|
||||
|
||||
/* Erledigtes bleibt erkennbar -- hohl statt voll. Ohne das saehe ein
|
||||
abgehakter Termin aus wie ein offener, und der Kalender loege. */
|
||||
body .k-tag .k-pille.erledigt {
|
||||
background: transparent;
|
||||
border: 2px solid var(--pfarbe);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
/* EIN ANLASS WIRD EIN ECKIGES ZEICHEN -- rund waere er von einem
|
||||
Termin nicht zu unterscheiden, und "DE…" fuer "Tag der Deutschen
|
||||
Einheit" sagt genauso wenig wie "Co…" fuer eine Content-Idee.
|
||||
Ganz weglassen geht nicht: Nur FEIERTAGE faerben die Zelle rosa,
|
||||
andere Anlaesse nicht -- die waeren dann unsichtbar. Den Namen
|
||||
nennt der Tagesdialog. */
|
||||
body .k-tag .k-anlass {
|
||||
display: inline-block;
|
||||
width: 8px; height: 8px;
|
||||
padding: 0; margin: 0 3px 3px 0;
|
||||
border-left: 0;
|
||||
border-radius: 2px;
|
||||
background: var(--afarbe);
|
||||
font-size: 0; line-height: 0; min-height: 0;
|
||||
pointer-events: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body .k-tag .k-anlass > * { display: none; }
|
||||
|
||||
/* Der Zeitraum: durchgehender Balken statt Punkt. */
|
||||
body .k-tag .k-pille[data-spanne] {
|
||||
display: block;
|
||||
width: auto; height: 5px;
|
||||
margin: 0 0 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/* Angeschnitten, wo er weiterlaeuft -- dieselbe Sprache wie in der
|
||||
breiten Ansicht. */
|
||||
body .k-tag .k-pille[data-spanne="mitte"],
|
||||
body .k-tag .k-pille[data-spanne="ende"] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
||||
body .k-tag .k-pille[data-spanne="mitte"],
|
||||
body .k-tag .k-pille[data-spanne="start"] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DIE ZELLE KANN SICH NICHT SELBST ABFRAGEN (21.09.2026)
|
||||
=====================================================================
|
||||
|
||||
`.k-tag` traegt `container-type: inline-size` und ist damit der
|
||||
Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` selbst, die in
|
||||
`@container` steht, wird gegen den naechsten Behaelter DARUEBER
|
||||
geprueft -- also nicht gegen die Zelle. Sie greift nie.
|
||||
|
||||
Genau das ist hier passiert: Die Punktregeln fuer `.k-pille` wirkten
|
||||
(Groesse, Farbe, pointer-events -- alles gemessen), die Regel
|
||||
`.k-tag { display: block }` daneben nicht. Ergebnis: Die Zelle blieb
|
||||
eine Flex-SPALTE, und jeder Punkt bekam eine eigene Zeile.
|
||||
|
||||
Deshalb fragt die Zelle jetzt ihren Behaelter: das Raster.
|
||||
|
||||
DIE SCHWELLE IST GERECHNET. Das Raster ist
|
||||
grid-template-columns: 46px repeat(7, minmax(0, 1fr))
|
||||
mit 1 px Fugen. Eine Tagesspalte ist also
|
||||
(Raster - 46 - 8) / 7
|
||||
und wird bei 60 px schmal genug fuer Punkte (siehe die Rechnung
|
||||
darueber). Umgestellt: Raster = 46 + 8 + 7 x 60 = 474.
|
||||
|
||||
Ein benannter Behaelter, damit die Abfrage nicht versehentlich bei
|
||||
der Zelle haengenbleibt -- unbenannte Abfragen nehmen immer den
|
||||
naechsten, und das waere hier der falsche. */
|
||||
.k-raster { container-type: inline-size; container-name: kalenderraster; }
|
||||
|
||||
@container kalenderraster (max-width: 474px) {
|
||||
.k-tag { display: block; }
|
||||
.k-tag__kopf { margin-bottom: 5px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user