From b953519e2dd1ffc9dbeccf576032e5ce33ce8911 Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Wed, 19 Sep 2018 16:38:40 +0200 Subject: [PATCH 1/6] 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 @@ -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; + } + }, }, }; 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", From 6ec23ce7903e2bc7f0eb0bab6f82dda8ee96afec Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Wed, 19 Sep 2018 18:42:35 +0200 Subject: [PATCH 2/6] Display settings in one column --- website/client/components/settings/site.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/client/components/settings/site.vue b/website/client/components/settings/site.vue index 66b7efe19b..26410ec7ef 100644 --- a/website/client/components/settings/site.vue +++ b/website/client/components/settings/site.vue @@ -4,7 +4,7 @@ reset-modal delete-modal h1.col-12 {{ $t('settings') }} - .col-6 + .col-sm-6 .form-horizontal h5 {{ $t('language') }} select.form-control(:value='user.preferences.language', @@ -105,7 +105,7 @@ p(v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})") p(v-html="$t('timezoneInfo')") - .col-6 + .col-sm-6 h2 {{ $t('registration') }} .panel-body div From e24a024091bab1797a690665b7f0ba91c7fcf436 Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Tue, 25 Sep 2018 15:29:55 +0200 Subject: [PATCH 3/6] Position inn banner when window is resized --- website/client/app.vue | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/website/client/app.vue b/website/client/app.vue index b8512d3cb3..65d3e8940b 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -413,11 +413,6 @@ export default { this.$store.watch(state => state.title, (title) => { document.title = title; }); - - this.$store.watch(state => state.isUserLoaded, () => { - this.setBannerOffset(); - }); - this.$nextTick(() => { // Load external scripts after the app has been rendered Analytics.load(); @@ -447,7 +442,6 @@ export default { setupPayments(); }); - this.setBannerOffset(); }).catch((err) => { console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console }); @@ -463,13 +457,13 @@ export default { this.$root.$off('bv::show::modal'); this.$root.$off('buyModal::showItem'); this.$root.$off('selectMembersModal::showItem'); + window.removeEventListener('resize', this.setBannerOffset); }, mounted () { // Remove the index.html loading screen and now show the inapp loading const loadingScreen = document.getElementById('loading-screen'); if (loadingScreen) document.body.removeChild(loadingScreen); - }, - updated () { + window.addEventListener('resize', this.setBannerOffset); this.setBannerOffset(); }, methods: { From 8cc6a96be0d3d0e431c1cae3936e567415678980 Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Wed, 26 Sep 2018 15:59:57 +0200 Subject: [PATCH 4/6] Update inn banner handling --- website/client/app.vue | 46 ++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/website/client/app.vue b/website/client/app.vue index 65d3e8940b..6ac229278e 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -15,16 +15,16 @@ div router-view(v-if="!isUserLoggedIn || isStaticPage") template(v-else) template(v-if="isUserLoaded") - div.resting-banner(v-if="showRestingBanner") + div.resting-banner(v-show="showRestingBanner", ref="restingBanner") span.content - span.label(v-if="!isNarrowScreen") {{ $t('innCheckOutBanner') }} - span.label(v-if="isNarrowScreen") {{ $t('innCheckOutBannerShort') }} + span.label.d-inline.d-sm-none {{ $t('innCheckOutBannerShort') }} + span.label.d-none.d-sm-inline {{ $t('innCheckOutBanner') }} 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") notifications-display - app-menu(:class='{"restingInn": showRestingBanner}') + app-menu(:class='{"restingInn": showRestingBanner}' v-bind:style="{ marginTop: bannerHeight + 'px' }") .container-fluid app-header(:class='{"restingInn": showRestingBanner}') buyModal( @@ -149,7 +149,7 @@ div } } - @media only screen and (max-width: 600px) { + @media only screen and (max-width: 768px) { .content { font-size: 12px; line-height: 1.4; @@ -220,6 +220,7 @@ export default { loading: true, currentTipNumber: 0, bannerHidden: false, + bannerHeight: 0, }; }, computed: { @@ -241,10 +242,18 @@ export default { return this.$t(`tip${tipNumber}`); }, showRestingBanner () { + if (this.user === null) return false; return !this.bannerHidden && this.user.preferences.sleep; }, - isNarrowScreen () { - return screen.width <= 600; + }, + watch: { + showRestingBanner () { + this.$nextTick(() => { + console.log(this.$refs); + console.log(this.$refs.restingBanner); + console.log(this.showRestingBanner); + this.setBannerOffset(); + }); }, }, created () { @@ -441,7 +450,6 @@ export default { // Load external scripts after the app has been rendered setupPayments(); }); - }).catch((err) => { console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console }); @@ -624,25 +632,15 @@ export default { 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 contentPlacement = 0; + if (this.showRestingBanner && this.$refs.restingBanner !== undefined) { + contentPlacement = this.$refs.restingBanner.clientHeight; } + console.log(this.showRestingBanner, contentPlacement); + this.bannerHeight = contentPlacement; let smartBanner = document.getElementsByClassName('smartbanner')[0]; if (smartBanner !== undefined) { - smartBanner.style.top = contentPlacement; + smartBanner.style.top = `${contentPlacement}px`; } }, }, From d9719cdc05af6f7c75e5884e28346db1ca1a5578 Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Wed, 26 Sep 2018 18:10:24 +0200 Subject: [PATCH 5/6] Fix banner offset on initial load --- website/client/app.vue | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/website/client/app.vue b/website/client/app.vue index 6ac229278e..1da32dfb03 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -246,16 +246,6 @@ export default { return !this.bannerHidden && this.user.preferences.sleep; }, }, - watch: { - showRestingBanner () { - this.$nextTick(() => { - console.log(this.$refs); - console.log(this.$refs.restingBanner); - console.log(this.showRestingBanner); - this.setBannerOffset(); - }); - }, - }, created () { this.$root.$on('playSound', (sound) => { let theme = this.user.preferences.sound; @@ -439,6 +429,14 @@ export default { this.hideLoadingScreen(); + window.addEventListener('resize', this.setBannerOffset); + // Adjust the positioning of the header banners + this.$watch('showRestingBanner', () => { + this.$nextTick(() => { + this.setBannerOffset(); + }); + }, {immediate: true}); + // Adjust the timezone offset if (this.user.preferences.timezoneOffset !== this.browserTimezoneOffset) { this.$store.dispatch('user:set', { @@ -471,8 +469,6 @@ export default { // Remove the index.html loading screen and now show the inapp loading const loadingScreen = document.getElementById('loading-screen'); if (loadingScreen) document.body.removeChild(loadingScreen); - window.addEventListener('resize', this.setBannerOffset); - this.setBannerOffset(); }, methods: { checkForBannedUser (error) { @@ -636,7 +632,6 @@ export default { if (this.showRestingBanner && this.$refs.restingBanner !== undefined) { contentPlacement = this.$refs.restingBanner.clientHeight; } - console.log(this.showRestingBanner, contentPlacement); this.bannerHeight = contentPlacement; let smartBanner = document.getElementsByClassName('smartbanner')[0]; if (smartBanner !== undefined) { From d40781ce07277bed6c0cb372a9f51a0b87d9e773 Mon Sep 17 00:00:00 2001 From: Phillip Thelen Date: Thu, 27 Sep 2018 10:34:56 +0200 Subject: [PATCH 6/6] Fix minor issues. --- website/client/app.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/website/client/app.vue b/website/client/app.vue index 1da32dfb03..dbf6de6ce1 100644 --- a/website/client/app.vue +++ b/website/client/app.vue @@ -24,7 +24,7 @@ div div.closepadding(@click="hideBanner()") span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close") notifications-display - app-menu(:class='{"restingInn": showRestingBanner}' v-bind:style="{ marginTop: bannerHeight + 'px' }") + app-menu(:class='{"restingInn": showRestingBanner}' :style="{ marginTop: bannerHeight + 'px' }") .container-fluid app-header(:class='{"restingInn": showRestingBanner}') buyModal( @@ -242,7 +242,6 @@ export default { return this.$t(`tip${tipNumber}`); }, showRestingBanner () { - if (this.user === null) return false; return !this.bannerHidden && this.user.preferences.sleep; }, },