jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): reminder widget expands from schedule icon position 

Instead of popping up at fixed top-right, the reminder mini-calendar
now appears at the 📅 icon's location and scales out from it.
Icon hides while widget is open, reappears on close.
Viewport-clamped to prevent off-screen overflow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-20 21:54:50 -07:00
parent ae73e20c28
commit c23d7eb65b
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
website/canvas.html
View File

@ -2316,17 +2316,17 @@
<!-- Reminder mini-calendar widget --> <!-- Reminder mini-calendar widget -->
<style> <style>
#reminder-widget { #reminder-widget {
position: fixed; top: 108px; right: 16px; z-index: 1001; position: fixed; z-index: 1001;
background: var(--rs-toolbar-bg, #1a1a2e); border: 1px solid #333; background: var(--rs-toolbar-bg, #1a1a2e); border: 1px solid #333;
border-radius: 14px; padding: 14px; width: 260px; border-radius: 14px; padding: 14px; width: 260px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
opacity: 0; transform: translateY(-8px) scale(0.96); opacity: 0; transform: scale(0.3); transform-origin: top left;
pointer-events: none; transition: opacity 0.2s, transform 0.2s; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
font-family: system-ui, -apple-system, sans-serif; font-family: system-ui, -apple-system, sans-serif;
color: var(--rs-text, #e0e0e0); color: var(--rs-text, #e0e0e0);
} }
#reminder-widget.visible { #reminder-widget.visible {
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; opacity: 1; transform: scale(1); pointer-events: auto;
} }
.rw-header { font-size: 12px; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .rw-header { font-size: 12px; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rw-header-icon { font-size: 16px; } .rw-header-icon { font-size: 16px; }
@ -3118,7 +3118,17 @@
ev.stopPropagation(); ev.stopPropagation();
if (rwWidget.classList.contains("visible")) { if (rwWidget.classList.contains("visible")) {
rwWidget.classList.remove("visible"); rwWidget.classList.remove("visible");
scheduleIconEl.classList.add("visible");
} else { } else {
// Position widget at the icon, then hide the icon
const iconRect = scheduleIconEl.getBoundingClientRect();
const ww = 260 + 28; // widget width + padding
const wh = 340; // approx widget height
const left = Math.min(iconRect.left, window.innerWidth - ww);
const top = Math.min(Math.max(iconRect.top, 8), window.innerHeight - wh);
rwWidget.style.left = left + "px";
rwWidget.style.top = top + "px";
scheduleIconEl.classList.remove("visible");
updateReminderWidget(); updateReminderWidget();
} }
}); });