hide logo when opening search bar on small screens

This commit is contained in:
Henry Jameson 2018-12-03 07:49:14 +03:00
parent e15b9bddbb
commit ea805bbbe6
4 changed files with 16 additions and 2 deletions

View File

@ -21,6 +21,7 @@ export default {
}, },
data: () => ({ data: () => ({
mobileActivePanel: 'timeline', mobileActivePanel: 'timeline',
finderHidden: true,
supportsMask: window.CSS && window.CSS.supports && ( supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') || window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') || window.CSS.supports('-webkit-mask-size', 'contain') ||
@ -53,7 +54,8 @@ export default {
}, },
logoBgStyle () { logoBgStyle () {
return Object.assign({ return Object.assign({
'margin': `${this.$store.state.instance.logoMargin} 0` 'margin': `${this.$store.state.instance.logoMargin} 0`,
opacity: this.finderHidden ? 1 : 0
}, this.enableMask ? {} : { }, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent' 'background-color': this.enableMask ? '' : 'transparent'
}) })
@ -75,6 +77,9 @@ export default {
logout () { logout () {
this.$router.replace('/main/public') this.$router.replace('/main/public')
this.$store.dispatch('logout') this.$store.dispatch('logout')
},
onFinderToggled (hidden) {
this.finderHidden = hidden
} }
} }
} }

View File

@ -248,6 +248,9 @@ nav {
justify-content: center; justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
z-index: -1; z-index: -1;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
.mask { .mask {
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -486,6 +489,11 @@ nav {
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
@media all and (min-width: 959px) {
.logo {
opacity: 1 !important;
}
}
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
.mobile-hidden { .mobile-hidden {

View File

@ -10,7 +10,7 @@
<router-link :to="{ name: 'root'}">{{sitename}}</router-link> <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
</div> </div>
<div class='item right'> <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> <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> <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
</div> </div>

View File

@ -11,6 +11,7 @@ const UserFinder = {
}, },
toggleHidden () { toggleHidden () {
this.hidden = !this.hidden this.hidden = !this.hidden
this.$emit('toggled', this.hidden)
} }
} }
} }