From c0cf64787344ef581319872d510430dfaeb612db Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Wed, 31 May 2023 16:55:21 -0500
Subject: [PATCH] fix(banner): only show when relevant

---
 .../components/header/banners/chatBanner.vue  | 20 ++++++++++++++++++-
 website/client/src/components/header/menu.vue |  8 +++++---
 .../components/snackbars/notifications.vue    |  8 +++++++-
 website/client/src/components/static/faq.vue  |  5 +++++
 .../src/components/static/staticWrapper.vue   | 13 +++++++-----
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/website/client/src/components/header/banners/chatBanner.vue b/website/client/src/components/header/banners/chatBanner.vue
index 63af7ab18d..db6d3100fe 100644
--- a/website/client/src/components/header/banners/chatBanner.vue
+++ b/website/client/src/components/header/banners/chatBanner.vue
@@ -1,9 +1,12 @@
 <template>
   <base-banner
-    banner-id="chat-banner"
+    banner-id="chat-warning"
+    banner-class="chat-banner"
     class="chat-banner"
     height="3rem"
+    :show="showChatWarning"
     :can-close="false"
+    :class="{faq: faqPage}"
   >
     <div
       slot="content"
@@ -29,6 +32,11 @@
       color: $orange-1;
       text-decoration: underline;
     }
+
+    &.faq {
+      position: fixed;
+      top: 3.5rem;
+    }
   }
 
 </style>
@@ -40,6 +48,16 @@ export default {
   components: {
     BaseBanner,
   },
+  computed: {
+    faqPage () {
+      return (this.$route.fullPath.indexOf('/faq')) !== -1;
+    },
+    showChatWarning () {
+      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
+      if (this.$route.fullPath.indexOf('/groups') !== -1) return true;
+      return this.faqPage;
+    },
+  },
 };
 
 </script>
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index 87747b7dad..bc9a1d7ead 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -830,9 +830,11 @@ export default {
   async mounted () {
     await this.getUserGroupPlans();
     await this.getUserParty();
-    Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
-      link.addEventListener('click', this.closeMenu);
-    });
+    if (document.getElementById('menu_collapse')) {
+      Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
+        link.addEventListener('click', this.closeMenu);
+      });
+    }
     Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
       link.addEventListener('mouseenter', this.dropdownDesktop);
       link.addEventListener('mouseleave', this.dropdownDesktop);
diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue
index 69490b31dc..e3fc4d9965 100644
--- a/website/client/src/components/snackbars/notifications.vue
+++ b/website/client/src/components/snackbars/notifications.vue
@@ -106,6 +106,7 @@ export default {
       preventMultipleWatchExecution: false,
       eventPromoBannerHeight: null,
       sleepingBannerHeight: null,
+      warningBannerHeight: null,
     };
   },
   computed: {
@@ -133,7 +134,11 @@ export default {
       return `${base}${modifier} scroll-${this.scrollY}`;
     },
     notificationBannerHeight () {
-      let scrollPosToCheck = 104;
+      let scrollPosToCheck = 56;
+
+      if (this.warningBannerHeight) {
+        scrollPosToCheck += this.warningBannerHeight;
+      }
 
       if (this.sleepingBannerHeight) {
         scrollPosToCheck += this.sleepingBannerHeight;
@@ -361,6 +366,7 @@ export default {
 
     updateBannerHeightAndScrollY () {
       this.updateEventBannerHeight();
+      this.warningBannerHeight = getBannerHeight('chat-warning');
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();
     },
diff --git a/website/client/src/components/static/faq.vue b/website/client/src/components/static/faq.vue
index 952112a477..5ac636ddea 100644
--- a/website/client/src/components/static/faq.vue
+++ b/website/client/src/components/static/faq.vue
@@ -94,6 +94,11 @@
     }
   }
 
+  .container-fluid {
+    position: relative;
+    top: 2rem;
+  }
+
   @media only screen and (max-width: 768px) {
     .container-fluid {
       margin: auto;
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index 6de2ec68f0..a7993ac5a4 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
+    <chat-banner />
     <static-header
-      v-if="showContentWrap"
-      :class="{
-        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-        'white-header': this.$route.name === 'plans'
-      }"
+    v-if="showContentWrap"
+    :class="{
+      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+      'white-header': this.$route.name === 'plans'
+    }"
     />
     <div class="static-wrapper">
       <router-view />
@@ -243,11 +244,13 @@
 
 <script>
 import AppFooter from '@/components/appFooter';
+import ChatBanner from '@/components/header/banners/chatBanner';
 import StaticHeader from './header.vue';
 
 export default {
   components: {
     AppFooter,
+    ChatBanner,
     StaticHeader,
   },
   computed: {