From d310d7d2135b3203ccb55489fe335b855c745630 Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Sun, 1 Feb 2026 10:59:50 -1000 Subject: 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 --- web/templates/partials/timeline-tab.html | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'web/templates') 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'; -- cgit v1.2.3