From 1d73e150cc8e574bcd2ed62e25e070a36e1bfc6b Mon Sep 17 00:00:00 2001 From: Bastian Masanek Date: Wed, 5 Nov 2025 03:16:15 +0100 Subject: [PATCH] Enhance Confetti Animation Logic in AreaTabs Component - Updated confetti animation to trigger only on desktop devices, reducing distraction on mobile. - Added media query check to ensure confetti effects are only applied at the md breakpoint and above, improving user experience across different screen sizes. --- app/components/navigation/AreaTabs.vue | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/app/components/navigation/AreaTabs.vue b/app/components/navigation/AreaTabs.vue index 954deda..8293d70 100644 --- a/app/components/navigation/AreaTabs.vue +++ b/app/components/navigation/AreaTabs.vue @@ -146,14 +146,17 @@ watch(visibleAreas, (newAreas, oldAreas) => { newlyAddedAreaIds.value = addedIds // Trigger confetti for each new tab with staggered delay (wave effect) - addedIds.forEach((areaId, index) => { - setTimeout(() => { - const element = tabRefs.value[areaId] - if (element) { - triggerConfetti(element) - } - }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ... - }) + // Only on desktop (md breakpoint and up) - too distracting on mobile + if (window.matchMedia('(min-width: 768px)').matches) { + addedIds.forEach((areaId, index) => { + setTimeout(() => { + const element = tabRefs.value[areaId] + if (element) { + triggerConfetti(element) + } + }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ... + }) + } // Clear all highlights after animation completes // Animation timeline: glow 2x + pulse 2x + opacity fade = 2.0s