Improve rendering banner about sleeping in the inn

See #10695

website/client/app.vue

@@ -17,8 +17,9 @@ div
       template(v-if="isUserLoaded")
         div.resting-banner(v-if="showRestingBanner")
           span.content
-            span.label {{ $t('innCheckOutBanner') }}
-            span.separator |
+            span.label(v-if="!isNarrowScreen") {{ $t('innCheckOutBanner') }}
+            span.label(v-if="isNarrowScreen") {{ $t('innCheckOutBannerShort') }}
+            span.separator  |
             span.resume(@click="resumeDamage()") {{ $t('resumeDamage') }}
           div.closepadding(@click="hideBanner()")
             span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close")
@@ -102,7 +103,7 @@ div
 
 <style lang='scss'>
   @import '~client/assets/scss/colors.scss';
-  
+
   /* @TODO: The modal-open class is not being removed. Let's try this for now */
   .modal {
     overflow-y: scroll !important;
@@ -118,20 +119,9 @@ div
     z-index: 1600 !important; /* Must stay above nav bar */
   }
 
-  .restingInn {
-    .navbar {
-      top: 40px;
-    }
-
-    #app-header {
-      margin-top: 40px !important;
-    }
-
-  }
-
   .resting-banner {
     width: 100%;
-    height: 40px;
+    min-height: 40px;
     background-color: $blue-10;
     position: fixed;
     top: 0;
@@ -139,11 +129,10 @@ div
     display: flex;
 
     .content {
-      height: 24px;
       line-height: 1.71;
       text-align: center;
       color: $white;
-
+      padding: 8px 38px 8px 8px;
       margin: auto;
     }
 
@@ -160,6 +149,13 @@ div
       }
     }
 
+    @media only screen and (max-width: 600px) {
+      .content {
+        font-size: 12px;
+        line-height: 1.4;
+      }
+    }
+
     .separator {
       color: $blue-100;
       margin: 0px 15px;
@@ -168,6 +164,7 @@ div
     .resume {
       font-weight: bold;
       cursor: pointer;
+      white-space:nowrap;
     }
   }
 </style>
@@ -246,6 +243,9 @@ export default {
     showRestingBanner () {
       return !this.bannerHidden && this.user.preferences.sleep;
     },
+    isNarrowScreen () {
+      return screen.width <= 600;
+    },
   },
   created () {
     this.$root.$on('playSound', (sound) => {
@@ -414,6 +414,10 @@ export default {
       document.title = title;
     });
 
+    this.$store.watch(state => state.isUserLoaded, () => {
+      this.setBannerOffset();
+    });
+
     this.$nextTick(() => {
       // Load external scripts after the app has been rendered
       Analytics.load();
@@ -442,6 +446,8 @@ export default {
           // Load external scripts after the app has been rendered
           setupPayments();
         });
+
+        this.setBannerOffset();
       }).catch((err) => {
         console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
       });
@@ -463,6 +469,9 @@ export default {
     const loadingScreen = document.getElementById('loading-screen');
     if (loadingScreen) document.body.removeChild(loadingScreen);
   },
+  updated () {
+    this.setBannerOffset();
+  },
   methods: {
     checkForBannedUser (error) {
       const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
@@ -615,10 +624,33 @@ export default {
     },
     hideBanner () {
       this.bannerHidden = true;
+      this.setBannerOffset();
     },
     resumeDamage () {
       this.$store.dispatch('user:sleep');
     },
+    setBannerOffset () {
+      let restingBanner = document.getElementsByClassName('resting-banner')[0];
+      let contentPlacement = '0px';
+      if (!this.bannerHidden && restingBanner !== undefined) {
+        contentPlacement = `${restingBanner.clientHeight  }px`;
+      }
+      let topMenu = document.getElementsByClassName('restingInn')[0];
+      if (topMenu !== undefined) {
+        let navbar = topMenu.getElementsByClassName('navbar')[0];
+        if (navbar !== undefined) {
+          navbar.style.top = contentPlacement;
+        }
+      }
+      let appHeader = document.getElementById('app-header');
+      if (appHeader !== undefined) {
+        appHeader.style.marginTop = contentPlacement;
+      }
+      let smartBanner = document.getElementsByClassName('smartbanner')[0];
+      if (smartBanner !== undefined) {
+        smartBanner.style.top = contentPlacement;
+      }
+    },
   },
 };
 </script>

website/common/locales/en/groups.json

@@ -6,6 +6,7 @@
   "innText": "You're resting in the Inn! While checked-in, your Dailies won't hurt you at the day's end, but they will still refresh every day. Be warned: If you are participating in a Boss Quest, the Boss will still damage you for your Party mates' missed Dailies unless they are also in the Inn! Also, your own damage to the Boss (or items collected) will not be applied until you check out of the Inn.",
   "innTextBroken": "You're resting in the Inn, I guess... While checked-in, your Dailies won't hurt you at the day's end, but they will still refresh every day...  If you are participating in a Boss Quest, the Boss will still damage you for your Party mates' missed Dailies... unless they are also in the Inn... Also, your own damage to the Boss (or items collected) will not be applied until you check out of the Inn... so tired...",
   "innCheckOutBanner": "You are currently checked into the Inn. Your Dailies won't damage you and you won't make progress towards Quests.",
+  "innCheckOutBannerShort": "You are checked into the Inn.",
   "resumeDamage": "Resume Damage",
   "helpfulLinks": "Helpful Links",
   "communityGuidelinesLink": "Community Guidelines",