From ea805bbbe6c8920e16da31b2776385021fc13ad5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 3 Dec 2018 07:49:14 +0300
Subject: [PATCH] hide logo when opening search bar on small screens
---
src/App.js | 7 ++++++-
src/App.scss | 8 ++++++++
src/App.vue | 2 +-
src/components/user_finder/user_finder.js | 1 +
4 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/src/App.js b/src/App.js
index 3bfd307f..c5a15cf6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ export default {
},
data: () => ({
mobileActivePanel: 'timeline',
+ finderHidden: true,
supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') ||
@@ -53,7 +54,8 @@ export default {
},
logoBgStyle () {
return Object.assign({
- 'margin': `${this.$store.state.instance.logoMargin} 0`
+ 'margin': `${this.$store.state.instance.logoMargin} 0`,
+ opacity: this.finderHidden ? 1 : 0
}, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent'
})
@@ -75,6 +77,9 @@ export default {
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('logout')
+ },
+ onFinderToggled (hidden) {
+ this.finderHidden = hidden
}
}
}
diff --git a/src/App.scss b/src/App.scss
index 056a235e..6f0ee003 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -248,6 +248,9 @@ nav {
justify-content: center;
flex: 0 0 auto;
z-index: -1;
+ transition: opacity;
+ transition-timing-function: ease-out;
+ transition-duration: 100ms;
.mask {
mask-repeat: no-repeat;
@@ -486,6 +489,11 @@ nav {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
+@media all and (min-width: 959px) {
+ .logo {
+ opacity: 1 !important;
+ }
+}
@media all and (max-width: 959px) {
.mobile-hidden {
diff --git a/src/App.vue b/src/App.vue
index a7c2beda..7284c0d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@
<router-link :to="{ name: 'root'}">{{sitename}}</router-link>
</div>
<div class='item right'>
- <user-finder class="nav-icon"></user-finder>
+ <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link>
<a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
</div>
diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js
index 74f79d1b..55c6c402 100644
--- a/src/components/user_finder/user_finder.js
+++ b/src/components/user_finder/user_finder.js
@@ -11,6 +11,7 @@ const UserFinder = {
},
toggleHidden () {
this.hidden = !this.hidden
+ this.$emit('toggled', this.hidden)
}
}
}