diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue index 1a14b79f82..ea6f09fa09 100644 --- a/website/client/src/components/snackbars/notifications.vue +++ b/website/client/src/components/snackbars/notifications.vue @@ -103,7 +103,7 @@ export default { removalIntervalId: null, notificationTopY: '0px', preventMultipleWatchExecution: false, - gemsPromoBannerHeight: null, + eventPromoBannerHeight: null, sleepingBannerHeight: null, }; }, @@ -113,6 +113,9 @@ export default { userSleeping: 'user.data.preferences.sleep', currentEvent: 'worldState.data.currentEvent', }), + isEventActive () { + return Boolean(this.currentEvent?.event); + }, notificationsTopPosClass () { const base = 'notifications-top-pos-'; let modifier = ''; @@ -132,10 +135,8 @@ export default { scrollPosToCheck += this.sleepingBannerHeight; } - if (this.currentEvent - && this.currentEvent.event - ) { - scrollPosToCheck += this.gemsPromoBannerHeight ?? 0; + if (this.isEventActive) { + scrollPosToCheck += this.eventPromoBannerHeight ?? 0; } return scrollPosToCheck; @@ -169,7 +170,7 @@ export default { this.preventMultipleWatchExecution = false; }, currentEvent: function currentEventChanged () { - this.gemsPromoBannerHeight = getBannerHeight('gems-promo'); + this.updateEventBannerHeight(); }, }, async mounted () { @@ -355,10 +356,31 @@ export default { }, 16), updateBannerHeightAndScrollY () { - this.gemsPromoBannerHeight = getBannerHeight('gems-promo'); + this.updateEventBannerHeight(); this.sleepingBannerHeight = getBannerHeight('damage-paused'); this.updateScrollY(); }, + + updateEventBannerHeight () { + if (this.isEventActive) { + this.eventPromoBannerHeight = getBannerHeight(this.currentEventBannerName()); + } + }, + + currentEventBannerName () { + // if there are any other types of promo bars + // this method needs to be updated + + if (this.currentEvent?.promo) { + return 'gift-promo'; + } + + if (this.currentEvent?.gemsPromo) { + return 'gems-promo'; + } + + return ''; + }, }, };