hide logo when opening search bar on small screens
This commit is contained in:
parent
e15b9bddbb
commit
ea805bbbe6
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -11,6 +11,7 @@ const UserFinder = {
|
||||||
},
|
},
|
||||||
toggleHidden () {
|
toggleHidden () {
|
||||||
this.hidden = !this.hidden
|
this.hidden = !this.hidden
|
||||||
|
this.$emit('toggled', this.hidden)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue