bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhance Confetti Animation Logic in AreaTabs Component

Browse Source 
- 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.
This commit is contained in:
Bastian Masanek
2025-11-05 03:16:15 +01:00
parent 808b62645f
commit 1d73e150cc
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/navigation/AreaTabs.vue
View File

@@ -146,6 +146,8 @@ watch(visibleAreas, (newAreas, oldAreas) => {
newlyAddedAreaIds.value = addedIds newlyAddedAreaIds.value = addedIds
// Trigger confetti for each new tab with staggered delay (wave effect) // Trigger confetti for each new tab with staggered delay (wave effect)
// Only on desktop (md breakpoint and up) - too distracting on mobile
if (window.matchMedia('(min-width: 768px)').matches) {
addedIds.forEach((areaId, index) => { addedIds.forEach((areaId, index) => {
setTimeout(() => { setTimeout(() => {
const element = tabRefs.value[areaId] const element = tabRefs.value[areaId]
@@ -154,6 +156,7 @@ watch(visibleAreas, (newAreas, oldAreas) => {
} }
}, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ... }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
}) })
}
// Clear all highlights after animation completes // Clear all highlights after animation completes
// Animation timeline: glow 2x + pulse 2x + opacity fade = 2.0s // Animation timeline: glow 2x + pulse 2x + opacity fade = 2.0s