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

25
frontend/index.html
View File

@@ -475,11 +475,26 @@
</div>
</div>
<div class="popup-body">
<div class="popup-time" id="popup-time"></div>
<div class="popup-location" id="popup-location"></div>
<div class="popup-description" id="popup-description"></div>
<div class="popup-calendar" id="popup-calendar"></div>
<div class="popup-creator" id="popup-creator" style="display:none"></div>
<div class="popup-row" id="popup-row-time">
<svg class="popup-row-icon" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
<span id="popup-time"></span>
</div>
<div class="popup-row" id="popup-row-location" style="display:none">
<svg class="popup-row-icon" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z"/></svg>
<span id="popup-location"></span>
</div>
<div class="popup-row popup-row-desc" id="popup-row-description" style="display:none">
<svg class="popup-row-icon" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h12v2H3v-2z"/></svg>
<span id="popup-description"></span>
</div>
<div class="popup-row" id="popup-row-calendar">
<svg class="popup-row-icon" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/></svg>
<span id="popup-calendar"></span>
</div>
<div class="popup-row" id="popup-row-creator" style="display:none">
<svg class="popup-row-icon" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5.33 0-8 2.67-8 6v2h16v-2c0-3.33-2.67-6-8-6z"/></svg>
<span id="popup-creator"></span>
</div>
</div>
<div id="popup-copy-menu" class="popup-copy-menu hidden"></div>
</div>