DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die Termine im Tagesfenster sind Karten statt Werkzeugleisten

Browse Source 
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 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-08 00:18:06 +02:00
co-authored by Claude Opus 5
parent e744f22fbc
commit 535d86d3f7
21 changed files with 315 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/kalender.css
+104 -21
View File
@@ -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