From b953519e2dd1ffc9dbeccf576032e5ce33ce8911 Mon Sep 17 00:00:00 2001
From: Phillip Thelen <viirus@pherth.net>
Date: Wed, 19 Sep 2018 16:38:40 +0200
Subject: [PATCH] Improve rendering banner about sleeping in the inn

See #10695
---
 website/client/app.vue                | 66 ++++++++++++++++++++-------
 website/common/locales/en/groups.json |  1 +
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/website/client/app.vue b/website/client/app.vue
index 7002bdb5c8..b8512d3cb3 100644
--- a/website/client/app.vue
+++ b/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>
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 75bc3e23cd..4a7c0d5c96 100644
--- a/website/common/locales/en/groups.json
+++ b/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",