Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mini-cal): ein Punkt je Kalender in dessen Farbe pro Tag

Browse Source 
Statt eines einzelnen Punkts in --primary zeigt der Mini-Kalender jetzt fuer
jeden Kalender, der an dem Tag mindestens einen Termin hat, einen Punkt in
dessen Farbe (max. 4, stabil nach erstem Auftreten sortiert). Die Farbquelle
ist dieselbe wie in Monats-/Wochenansicht: ev.color || ev.calendarColor.

Ausserdem laeuft der Mini-Kalender jetzt ueber filterEvents(), damit
ausgeblendete Gruppenmitglieder keinen Punkt mehr erzeugen. Auf dem
"heute"-Kreis bekommen die Punkte einen duennen weissen Ring, damit sie auf
der farbigen Flaeche lesbar bleiben.

Cherry-pick von 7a2085b (master) auf beta; die selected-Day-Regel aus beta
(color-mix) bleibt erhalten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-07 13:07:02 +02:00
co-authored by Claude Opus 5
parent a45bf6ea73
commit a30375aa63
2 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/app.css
+10 -4
View File
@@ -587,11 +587,17 @@ a { color: var(--primary); text-decoration: none; }
color: #fff; font-weight: 700;
}
.mini-day.selected:not(.today) { background: color-mix(in srgb, var(--day-selected-base) 15%, transparent); color: var(--primary); font-weight: 600; }
.mini-day.has-events::after {
content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
/* One dot per calendar with an event that day, in that calendar's colour. */
.mini-dots {
position: absolute; bottom: 1px; left: 0; right: 0;
display: flex; justify-content: center; align-items: center; gap: 2px;
line-height: 0; pointer-events: none;
}
.mini-day.today.has-events::after { background: #fff; }
.mini-dots i {
width: 4px; height: 4px; border-radius: 50%; flex: none;
}
/* Today's cell is a filled circle — ring the dots so they stay readable on it. */
.mini-day.today .mini-dots i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9); }
/* ── Calendar List ──────────────────────────────────────── */
.cal-list { padding: 8px 0; }