FIX: notifications position with 2nd banner - WIP (#13556)

* FIX: notifications position with 2nd banner

* emit event when worldState is loaded

* fix heights / padding of notifications

website/client/src/components/header/banners/base.vue

@@ -50,6 +50,10 @@ body.modal-open .habitica-top-banner {
 
 <script>
 import closeIcon from '@/assets/svg/close.svg';
+import {
+  clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
+} from '@/libs/banner.func';
+import { EVENTS } from '@/libs/events';
 
 export default {
   props: {
@@ -93,29 +97,30 @@ export default {
     canShow: {
       handler (newVal) {
         const valToSet = newVal === true ? this.height : '0px';
-        document.documentElement.style
-          .setProperty(`--banner-${this.bannerId}-height`, valToSet);
+        updateBannerHeight(this.bannerId, valToSet);
+        this.$root.$emit(EVENTS.BANNER_HEIGHT_UPDATED);
       },
       immediate: true,
     },
     show (newVal) {
       // When the show condition is set to false externally, remove the session storage setting
       if (newVal === false) {
-        window.sessionStorage.removeItem(`hide-banner-${this.bannerId}`);
+        clearBannerSetting(this.bannerId);
         this.hidden = false;
       }
     },
   },
   mounted () {
-    const hideStatus = window.sessionStorage.getItem(`hide-banner-${this.bannerId}`);
-    if (hideStatus === 'true') {
+    if (isBannerHidden(this.bannerId)) {
       this.hidden = true;
     }
   },
   methods: {
     close () {
-      window.sessionStorage.setItem(`hide-banner-${this.bannerId}`, 'true');
+      hideBanner(this.bannerId);
       this.hidden = true;
+
+      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
     },
   },
 };

website/client/src/components/header/notifications/worldBoss.vue

@@ -175,8 +175,12 @@ import BaseNotification from './base';
 
 import health from '@/assets/svg/health.svg';
 import sword from '@/assets/svg/sword.svg';
+import { worldStateMixin } from '@/mixins/worldState';
 
 export default {
+  mixins: [
+    worldStateMixin,
+  ],
   components: {
     BaseNotification,
   },
@@ -203,8 +207,8 @@ export default {
       return this.questData.boss.hp.toLocaleString();
     },
   },
-  async mounted () {
-    await this.$store.dispatch('worldState:getWorldState');
+  mounted () {
+    this.triggerGetWorldState();
   },
   methods: {
     action () {