better compatibility with search field and simpler CSSexperimental-3-column
parent
0f8a7037ea
commit
633349ddff
@ -0,0 +1,89 @@
|
|||||||
|
import SearchBar from 'components/search_bar/search_bar.vue'
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
faSignInAlt,
|
||||||
|
faSignOutAlt,
|
||||||
|
faHome,
|
||||||
|
faComments,
|
||||||
|
faBell,
|
||||||
|
faUserPlus,
|
||||||
|
faBullhorn,
|
||||||
|
faSearch,
|
||||||
|
faTachometerAlt,
|
||||||
|
faCog,
|
||||||
|
faInfoCircle
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
library.add(
|
||||||
|
faSignInAlt,
|
||||||
|
faSignOutAlt,
|
||||||
|
faHome,
|
||||||
|
faComments,
|
||||||
|
faBell,
|
||||||
|
faUserPlus,
|
||||||
|
faBullhorn,
|
||||||
|
faSearch,
|
||||||
|
faTachometerAlt,
|
||||||
|
faCog,
|
||||||
|
faInfoCircle
|
||||||
|
)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SearchBar
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
searchBarHidden: true,
|
||||||
|
supportsMask: window.CSS && window.CSS.supports && (
|
||||||
|
window.CSS.supports('mask-size', 'contain') ||
|
||||||
|
window.CSS.supports('-webkit-mask-size', 'contain') ||
|
||||||
|
window.CSS.supports('-moz-mask-size', 'contain') ||
|
||||||
|
window.CSS.supports('-ms-mask-size', 'contain') ||
|
||||||
|
window.CSS.supports('-o-mask-size', 'contain')
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
|
||||||
|
logoStyle () {
|
||||||
|
return {
|
||||||
|
'visibility': this.enableMask ? 'hidden' : 'visible'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
logoMaskStyle () {
|
||||||
|
return this.enableMask ? {
|
||||||
|
'mask-image': `url(${this.$store.state.instance.logo})`
|
||||||
|
} : {
|
||||||
|
'background-color': this.enableMask ? '' : 'transparent'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
logoBgStyle () {
|
||||||
|
return Object.assign({
|
||||||
|
'margin': `${this.$store.state.instance.logoMargin} 0`,
|
||||||
|
opacity: this.searchBarHidden ? 1 : 0
|
||||||
|
}, this.enableMask ? {} : {
|
||||||
|
'background-color': this.enableMask ? '' : 'transparent'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
logo () { return this.$store.state.instance.logo },
|
||||||
|
sitename () { return this.$store.state.instance.name },
|
||||||
|
hideSitename () { return this.$store.state.instance.hideSitename },
|
||||||
|
logoLeft () { return this.$store.state.instance.logoLeft },
|
||||||
|
currentUser () { return this.$store.state.users.currentUser },
|
||||||
|
privateMode () { return this.$store.state.instance.private },
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
scrollToTop () {
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
},
|
||||||
|
logout () {
|
||||||
|
this.$router.replace('/main/public')
|
||||||
|
this.$store.dispatch('logout')
|
||||||
|
},
|
||||||
|
onSearchBarToggled (hidden) {
|
||||||
|
this.searchBarHidden = hidden
|
||||||
|
},
|
||||||
|
openSettingsModal () {
|
||||||
|
this.$store.dispatch('openSettingsModal')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,112 @@
|
|||||||
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
|
.DesktopNav {
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
.inner-nav {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 50px;
|
||||||
|
grid-template-columns: 2fr auto 2fr;
|
||||||
|
grid-template-areas: "sitename logo actions";
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 1.2em;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 980px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-logoLeft {
|
||||||
|
grid-template-columns: auto 2fr 2fr;
|
||||||
|
grid-template-areas: "logo sitename actions";
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
&, svg {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnPressedTopBar, $fallback--fg);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnPressedTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnDisabledTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toggled {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnToggledTopBarText, $fallback--text);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnToggledTopBar, $fallback--fg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
grid-area: logo;
|
||||||
|
position: relative;
|
||||||
|
transition: opacity;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
transition-duration: 100ms;
|
||||||
|
|
||||||
|
@media all and (min-width: 800px) {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
mask-size: contain;
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--topBarText, $fallback--fg);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
margin-left: 0.2em;
|
||||||
|
width: 2em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a svg {
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--topBarLink, $fallback--link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitename {
|
||||||
|
grid-area: sitename;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
grid-area: actions;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 50px;
|
||||||
|
height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<nav
|
||||||
|
id="nav"
|
||||||
|
class="DesktopNav"
|
||||||
|
:class="{ '-logoLeft': logoLeft }"
|
||||||
|
@click="scrollToTop()"
|
||||||
|
>
|
||||||
|
<div class="inner-nav">
|
||||||
|
<div class="item sitename">
|
||||||
|
<router-link
|
||||||
|
v-if="!hideSitename"
|
||||||
|
class="site-name"
|
||||||
|
:to="{ name: 'root' }"
|
||||||
|
active-class="home"
|
||||||
|
>
|
||||||
|
{{ sitename }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<router-link
|
||||||
|
class="logo"
|
||||||
|
:to="{ name: 'root' }"
|
||||||
|
:style="logoBgStyle"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mask"
|
||||||
|
:style="logoMaskStyle"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
:src="logo"
|
||||||
|
:style="logoStyle"
|
||||||
|
>
|
||||||
|
</router-link>
|
||||||
|
<div class="item right actions">
|
||||||
|
<search-bar
|
||||||
|
v-if="currentUser || !privateMode"
|
||||||
|
@toggled="onSearchBarToggled"
|
||||||
|
@click.stop.native
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="nav-icon"
|
||||||
|
@click.stop="openSettingsModal"
|
||||||
|
>
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding"
|
||||||
|
icon="cog"
|
||||||
|
:title="$t('nav.preferences')"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
v-if="currentUser && currentUser.role === 'admin'"
|
||||||
|
href="/pleroma/admin/#/login-pleroma"
|
||||||
|
class="nav-icon"
|
||||||
|
target="_blank"
|
||||||
|
><FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding"
|
||||||
|
icon="tachometer-alt"
|
||||||
|
:title="$t('nav.administration')"
|
||||||
|
/></a>
|
||||||
|
<a
|
||||||
|
v-if="currentUser"
|
||||||
|
href="#"
|
||||||
|
class="nav-icon"
|
||||||
|
@click.prevent="logout"
|
||||||
|
><FAIcon
|
||||||
|
fixed-width
|
||||||
|
class="fa-scale-110 fa-old-padding"
|
||||||
|
icon="sign-out-alt"
|
||||||
|
:title="$t('login.logout')"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
<script src="./desktop_nav.js"></script>
|
||||||
|
|
||||||
|
<style src="./desktop_nav.scss" lang="scss"></style>
|
Loading…
Reference in new issue