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

Web: enhance overflow popup with styled all-day bars and continuation arrows

Browse Source 
All-day events in the "+N weitere" popup now render as colored bars matching
the month-grid style: continues-left/right arrows when the event spans beyond
the selected day. Timed events keep dot+time+title format. Version bump v50.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-11 20:02:04 +02:00
parent 900abcdb7a
commit 70aaec3401
3 changed files with 66 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/css/app.css
View File

@@ -742,6 +742,7 @@ a { color: var(--primary); text-decoration: none; }
box-shadow: var(--shadow-lg);
padding: 10px 0;
min-width: 220px; max-width: 300px;
overflow: hidden;
user-select: none;
}
.mop-header {
@@ -769,6 +770,27 @@ a { color: var(--primary); text-decoration: none; }
font-size: 12px; font-weight: 500; color: var(--text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* All-day event bars in overflow popup */
.mop-bar {
position: relative; display: block;
margin: 2px 8px; padding: 3px 8px;
border-radius: 4px;
font-size: 11px; font-weight: 500; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer;
}
.mop-bar:hover { filter: brightness(1.15); }
.mop-bar.continues-left { border-radius: 0 4px 4px 0; margin-left: 0; padding-left: 14px; }
.mop-bar.continues-right { border-radius: 4px 0 0 4px; margin-right: 0; padding-right: 14px; }
.mop-bar.continues-left.continues-right { border-radius: 0; }
.mop-bar.continues-left::before {
content: '‹'; position: absolute; left: 3px; top: 50%;
transform: translateY(-50%); font-size: 12px; opacity: 0.85;
}
.mop-bar.continues-right::after {
content: '›'; position: absolute; right: 3px; top: 50%;
transform: translateY(-50%); font-size: 12px; opacity: 0.85;
}
/* ── Week / Day Views ───────────────────────────────────── */
.week-view, .day-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: scroll; }