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

feat(web): modernize event popup (glass, colour accent, icon rows, animation)

Browse Source 
The event detail popup looked plainly "HTML". Redesigned it: translucent
glass surface (backdrop-blur), the event's colour as an accent strip + tinted
header + glowing dot, body rows with subtle leading icons (time/location/notes/
calendar/creator), rounded 16px corners, layered shadow, and a soft scale+fade
entrance (respecting prefers-reduced-motion). Body rows restructured to
icon+text; JS now drives row visibility and sets --ev-color. Bumped to v40.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-01 09:06:09 +02:00
parent 7be77da59f
commit f834ae5773
4 changed files with 95 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/js/calendar.js
View File

@@ -1301,6 +1301,7 @@ function showEventPopup(ev, anchor) {
const color = ev.color || ev.calendarColor || '#4285f4';
document.getElementById('popup-color-dot').style.background = color;
popup.style.setProperty('--ev-color', color);
document.getElementById('popup-title').textContent = ev.title;
// Time
@@ -1318,24 +1319,24 @@ function showEventPopup(ev, anchor) {
}
document.getElementById('popup-location').textContent = ev.location || '';
document.getElementById('popup-location').style.display = ev.location ? '' : 'none';
document.getElementById('popup-row-location').style.display = ev.location ? '' : 'none';
document.getElementById('popup-description').textContent = ev.description || '';
document.getElementById('popup-description').style.display = ev.description ? '' : 'none';
document.getElementById('popup-row-description').style.display = ev.description ? '' : 'none';
document.getElementById('popup-calendar').textContent = ev.calendar_name || '';
document.getElementById('popup-row-calendar').style.display = ev.calendar_name ? '' : 'none';
// Creator — only shown when it isn't the current user.
const creatorEl = document.getElementById('popup-creator');
const me = JSON.parse(localStorage.getItem('user') || '{}');
if (ev.creator && ev.creator.display_name && ev.creator.id !== me.id) {
creatorEl.textContent = t('created_by', { name: ev.creator.display_name });
creatorEl.style.display = '';
document.getElementById('popup-creator').textContent = t('created_by', { name: ev.creator.display_name });
document.getElementById('popup-row-creator').style.display = '';
} else {
creatorEl.style.display = 'none';
document.getElementById('popup-row-creator').style.display = 'none';
}
// Position near anchor
const rect = anchor.getBoundingClientRect();
const pw = 300, ph = 200;
const pw = 320, ph = 200;
let left = rect.right + 8;
let top = rect.top;
if (left + pw > window.innerWidth) left = rect.left - pw - 8;