diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-02-01 10:59:50 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-02-01 10:59:50 -1000 |
| commit | d310d7d2135b3203ccb55489fe335b855c745630 (patch) | |
| tree | aa24f2dc4279e40ece10b21494b31431d144af9e | |
| parent | 1c6552117038cb7c01e016dbf1ac062e1d9f9c73 (diff) | |
Add debounced hover effect to timeline events
Delays the highlight/raise effect by 100ms, allowing users to move
their mouse across overlapping events without the first one blocking
access to others underneath.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
| -rw-r--r-- | web/templates/partials/timeline-tab.html | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html index bdf2007..6775808 100644 --- a/web/templates/partials/timeline-tab.html +++ b/web/templates/partials/timeline-tab.html @@ -61,7 +61,7 @@ backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } - .calendar-event:hover { + .calendar-event.hover-active { z-index: 10; background: rgba(0,0,0,0.7); } @@ -253,6 +253,16 @@ el.style.left = (8 + ev.column * 16) + 'px'; el.style.display = 'block'; + // Debounced hover effect (100ms delay) + let hoverTimeout; + el.addEventListener('mouseenter', function() { + hoverTimeout = setTimeout(() => el.classList.add('hover-active'), 100); + }); + el.addEventListener('mouseleave', function() { + clearTimeout(hoverTimeout); + el.classList.remove('hover-active'); + }); + const url = el.dataset.url; if (url) { el.style.cursor = 'pointer'; @@ -418,6 +428,16 @@ el.style.left = (8 + ev.column * 16) + 'px'; el.style.display = 'block'; + // Debounced hover effect (100ms delay) + let hoverTimeout; + el.addEventListener('mouseenter', function() { + hoverTimeout = setTimeout(() => el.classList.add('hover-active'), 100); + }); + el.addEventListener('mouseleave', function() { + clearTimeout(hoverTimeout); + el.classList.remove('hover-active'); + }); + const url = el.dataset.url; if (url) { el.style.cursor = 'pointer'; |