Merge branch 'various-css-fixes' into 'develop'
Various css fixes Closes #992 See merge request pleroma/pleroma-fe!1267
This commit is contained in:
commit
590f8e1754
21 changed files with 539 additions and 459 deletions
51
src/App.js
51
src/App.js
|
@ -1,7 +1,6 @@
|
||||||
import UserPanel from './components/user_panel/user_panel.vue'
|
import UserPanel from './components/user_panel/user_panel.vue'
|
||||||
import NavPanel from './components/nav_panel/nav_panel.vue'
|
import NavPanel from './components/nav_panel/nav_panel.vue'
|
||||||
import Notifications from './components/notifications/notifications.vue'
|
import Notifications from './components/notifications/notifications.vue'
|
||||||
import SearchBar from './components/search_bar/search_bar.vue'
|
|
||||||
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
||||||
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
||||||
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
||||||
|
@ -11,6 +10,7 @@ import MediaModal from './components/media_modal/media_modal.vue'
|
||||||
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
||||||
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
|
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
|
||||||
import MobileNav from './components/mobile_nav/mobile_nav.vue'
|
import MobileNav from './components/mobile_nav/mobile_nav.vue'
|
||||||
|
import DesktopNav from './components/desktop_nav/desktop_nav.vue'
|
||||||
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
|
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
|
||||||
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
|
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
|
||||||
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
|
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
|
||||||
|
@ -22,7 +22,6 @@ export default {
|
||||||
UserPanel,
|
UserPanel,
|
||||||
NavPanel,
|
NavPanel,
|
||||||
Notifications,
|
Notifications,
|
||||||
SearchBar,
|
|
||||||
InstanceSpecificPanel,
|
InstanceSpecificPanel,
|
||||||
FeaturesPanel,
|
FeaturesPanel,
|
||||||
WhoToFollowPanel,
|
WhoToFollowPanel,
|
||||||
|
@ -31,21 +30,14 @@ export default {
|
||||||
SideDrawer,
|
SideDrawer,
|
||||||
MobilePostStatusButton,
|
MobilePostStatusButton,
|
||||||
MobileNav,
|
MobileNav,
|
||||||
|
DesktopNav,
|
||||||
SettingsModal,
|
SettingsModal,
|
||||||
UserReportingModal,
|
UserReportingModal,
|
||||||
PostStatusModal,
|
PostStatusModal,
|
||||||
GlobalNoticeList
|
GlobalNoticeList
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
mobileActivePanel: 'timeline',
|
mobileActivePanel: 'timeline'
|
||||||
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')
|
|
||||||
)
|
|
||||||
}),
|
}),
|
||||||
created () {
|
created () {
|
||||||
// Load the locale from the storage
|
// Load the locale from the storage
|
||||||
|
@ -61,28 +53,6 @@ export default {
|
||||||
background () {
|
background () {
|
||||||
return this.currentUser.background_image || this.$store.state.instance.background
|
return this.currentUser.background_image || this.$store.state.instance.background
|
||||||
},
|
},
|
||||||
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 },
|
|
||||||
bgStyle () {
|
bgStyle () {
|
||||||
return {
|
return {
|
||||||
'background-image': `url(${this.background})`
|
'background-image': `url(${this.background})`
|
||||||
|
@ -93,9 +63,7 @@ export default {
|
||||||
'--body-background-image': `url(${this.background})`
|
'--body-background-image': `url(${this.background})`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sitename () { return this.$store.state.instance.name },
|
|
||||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
||||||
hideSitename () { return this.$store.state.instance.hideSitename },
|
|
||||||
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
||||||
showInstanceSpecificPanel () {
|
showInstanceSpecificPanel () {
|
||||||
return this.$store.state.instance.showInstanceSpecificPanel &&
|
return this.$store.state.instance.showInstanceSpecificPanel &&
|
||||||
|
@ -112,19 +80,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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')
|
|
||||||
},
|
|
||||||
updateMobileState () {
|
updateMobileState () {
|
||||||
const mobileLayout = windowWidth() <= 800
|
const mobileLayout = windowWidth() <= 800
|
||||||
const layoutHeight = windowHeight()
|
const layoutHeight = windowHeight()
|
||||||
|
|
135
src/App.scss
135
src/App.scss
|
@ -359,119 +359,10 @@ i[class*=icon-], .svg-inline--fa {
|
||||||
padding: 0 10px 0 10px;
|
padding: 0 10px 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
line-height: 50px;
|
|
||||||
height: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.nav-icon {
|
|
||||||
margin-left: 0.2em;
|
|
||||||
width: 2em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto-size {
|
.auto-size {
|
||||||
flex: 1
|
flex: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-bar {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
position: fixed;
|
|
||||||
height: 50px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
button {
|
|
||||||
&, i[class*=icon-], 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 {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
align-items: stretch;
|
|
||||||
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;
|
|
||||||
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 {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
display: block;
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner-nav {
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-basis: 970px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
a, a i, a svg {
|
|
||||||
color: $fallback--link;
|
|
||||||
color: var(--topBarLink, $fallback--link);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main-router {
|
main-router {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
@ -781,16 +672,6 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 800px) {
|
|
||||||
.logo {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item.right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-notice {
|
.visibility-notice {
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
border: 1px solid $fallback--faint;
|
border: 1px solid $fallback--faint;
|
||||||
|
@ -943,22 +824,6 @@ nav {
|
||||||
background-color: var(--panel, $fallback--fg);
|
background-color: var(--panel, $fallback--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.unread-chat-count {
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: bolder;
|
|
||||||
font-style: normal;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6rem;
|
|
||||||
padding: 0 0.3em;
|
|
||||||
min-width: 1.3rem;
|
|
||||||
min-height: 1.3rem;
|
|
||||||
max-height: 1.3rem;
|
|
||||||
line-height: 1.3rem;
|
|
||||||
max-width: 10em;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-layout {
|
.chat-layout {
|
||||||
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
|
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
75
src/App.vue
75
src/App.vue
|
@ -9,80 +9,7 @@
|
||||||
:style="bgStyle"
|
:style="bgStyle"
|
||||||
/>
|
/>
|
||||||
<MobileNav v-if="isMobileLayout" />
|
<MobileNav v-if="isMobileLayout" />
|
||||||
<nav
|
<DesktopNav v-else />
|
||||||
v-else
|
|
||||||
id="nav"
|
|
||||||
class="nav-bar container"
|
|
||||||
@click="scrollToTop()"
|
|
||||||
>
|
|
||||||
<div class="inner-nav">
|
|
||||||
<div
|
|
||||||
class="logo"
|
|
||||||
:style="logoBgStyle"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="mask"
|
|
||||||
:style="logoMaskStyle"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
:src="logo"
|
|
||||||
:style="logoStyle"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<router-link
|
|
||||||
v-if="!hideSitename"
|
|
||||||
class="site-name"
|
|
||||||
:to="{ name: 'root' }"
|
|
||||||
active-class="home"
|
|
||||||
>
|
|
||||||
{{ sitename }}
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
<div class="item right">
|
|
||||||
<search-bar
|
|
||||||
v-if="currentUser || !privateMode"
|
|
||||||
class="mobile-hidden"
|
|
||||||
@toggled="onSearchBarToggled"
|
|
||||||
@click.stop.native
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="mobile-hidden 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="mobile-hidden 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="mobile-hidden 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>
|
|
||||||
<div class="app-bg-wrapper app-container-wrapper" />
|
<div class="app-bg-wrapper app-container-wrapper" />
|
||||||
<div
|
<div
|
||||||
id="content"
|
id="content"
|
||||||
|
|
|
@ -130,6 +130,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
|
||||||
? 0
|
? 0
|
||||||
: config.logoMargin
|
: config.logoMargin
|
||||||
})
|
})
|
||||||
|
copyInstanceOption('logoLeft')
|
||||||
store.commit('authFlow/setInitialStrategy', config.loginMethod)
|
store.commit('authFlow/setInitialStrategy', config.loginMethod)
|
||||||
|
|
||||||
copyInstanceOption('redirectRootNoLogin')
|
copyInstanceOption('redirectRootNoLogin')
|
||||||
|
|
89
src/components/desktop_nav/desktop_nav.js
Normal file
89
src/components/desktop_nav/desktop_nav.js
Normal file
|
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
112
src/components/desktop_nav/desktop_nav.scss
Normal file
112
src/components/desktop_nav/desktop_nav.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
79
src/components/desktop_nav/desktop_nav.vue
Normal file
79
src/components/desktop_nav/desktop_nav.vue
Normal file
|
@ -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>
|
|
@ -1,55 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div
|
||||||
|
class="MobileNav"
|
||||||
|
>
|
||||||
<nav
|
<nav
|
||||||
id="nav"
|
id="nav"
|
||||||
class="nav-bar container"
|
class="mobile-nav"
|
||||||
:class="{ 'mobile-hidden': isChat }"
|
:class="{ 'mobile-hidden': isChat }"
|
||||||
|
@click="scrollToTop()"
|
||||||
>
|
>
|
||||||
<div
|
<div class="item">
|
||||||
class="mobile-inner-nav"
|
<a
|
||||||
@click="scrollToTop()"
|
href="#"
|
||||||
>
|
class="mobile-nav-button"
|
||||||
<div class="item">
|
@click.stop.prevent="toggleMobileSidebar()"
|
||||||
<a
|
>
|
||||||
href="#"
|
<FAIcon
|
||||||
class="mobile-nav-button"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@click.stop.prevent="toggleMobileSidebar()"
|
icon="bars"
|
||||||
>
|
/>
|
||||||
<FAIcon
|
<div
|
||||||
class="fa-scale-110 fa-old-padding"
|
v-if="unreadChatCount"
|
||||||
icon="bars"
|
class="alert-dot"
|
||||||
/>
|
/>
|
||||||
<div
|
</a>
|
||||||
v-if="unreadChatCount"
|
<router-link
|
||||||
class="alert-dot"
|
v-if="!hideSitename"
|
||||||
/>
|
class="site-name"
|
||||||
</a>
|
:to="{ name: 'root' }"
|
||||||
<router-link
|
active-class="home"
|
||||||
v-if="!hideSitename"
|
>
|
||||||
class="site-name"
|
{{ sitename }}
|
||||||
:to="{ name: 'root' }"
|
</router-link>
|
||||||
active-class="home"
|
</div>
|
||||||
>
|
<div class="item right">
|
||||||
{{ sitename }}
|
<a
|
||||||
</router-link>
|
v-if="currentUser"
|
||||||
</div>
|
class="mobile-nav-button"
|
||||||
<div class="item right">
|
href="#"
|
||||||
<a
|
@click.stop.prevent="openMobileNotifications()"
|
||||||
v-if="currentUser"
|
>
|
||||||
class="mobile-nav-button"
|
<FAIcon
|
||||||
href="#"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@click.stop.prevent="openMobileNotifications()"
|
icon="bell"
|
||||||
>
|
/>
|
||||||
<FAIcon
|
<div
|
||||||
class="fa-scale-110 fa-old-padding"
|
v-if="unseenNotificationsCount"
|
||||||
icon="bell"
|
class="alert-dot"
|
||||||
/>
|
/>
|
||||||
<div
|
</a>
|
||||||
v-if="unseenNotificationsCount"
|
|
||||||
class="alert-dot"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div
|
<div
|
||||||
|
@ -93,100 +91,113 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.mobile-inner-nav {
|
.MobileNav {
|
||||||
width: 100%;
|
.mobile-nav {
|
||||||
display: flex;
|
display: grid;
|
||||||
align-items: center;
|
line-height: 50px;
|
||||||
}
|
height: 50px;
|
||||||
|
grid-template-rows: 50px;
|
||||||
.mobile-nav-button {
|
grid-template-columns: 2fr auto;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
margin: 0 1em;
|
position: fixed;
|
||||||
position: relative;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-dot {
|
|
||||||
border-radius: 100%;
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 4px);
|
|
||||||
top: calc(50% - 4px);
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-top: -6px;
|
|
||||||
background-color: $fallback--cRed;
|
|
||||||
background-color: var(--badgeNotification, $fallback--cRed);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-notifications-drawer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
|
||||||
box-shadow: var(--panelShadow);
|
|
||||||
transition-property: transform;
|
|
||||||
transition-duration: 0.25s;
|
|
||||||
transform: translateX(0);
|
|
||||||
z-index: 1001;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
&.closed {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-notifications-header {
|
.mobile-inner-nav {
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
color: var(--topBarText);
|
|
||||||
background-color: $fallback--fg;
|
|
||||||
background-color: var(--topBar, $fallback--fg);
|
|
||||||
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
|
||||||
box-shadow: var(--topBarShadow);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.3em;
|
|
||||||
margin-left: 0.6em;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-notifications {
|
.mobile-nav-button {
|
||||||
margin-top: 50px;
|
text-align: center;
|
||||||
width: 100vw;
|
margin: 0 1em;
|
||||||
height: calc(100vh - 50px);
|
position: relative;
|
||||||
overflow-x: hidden;
|
cursor: pointer;
|
||||||
overflow-y: scroll;
|
}
|
||||||
|
|
||||||
color: $fallback--text;
|
.alert-dot {
|
||||||
color: var(--text, $fallback--text);
|
border-radius: 100%;
|
||||||
background-color: $fallback--bg;
|
height: 8px;
|
||||||
background-color: var(--bg, $fallback--bg);
|
width: 8px;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 4px);
|
||||||
|
top: calc(50% - 4px);
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-top: -6px;
|
||||||
|
background-color: $fallback--cRed;
|
||||||
|
background-color: var(--badgeNotification, $fallback--cRed);
|
||||||
|
}
|
||||||
|
|
||||||
.notifications {
|
.mobile-notifications-drawer {
|
||||||
padding: 0;
|
width: 100%;
|
||||||
border-radius: 0;
|
height: 100vh;
|
||||||
box-shadow: none;
|
overflow-x: hidden;
|
||||||
.panel {
|
position: fixed;
|
||||||
border-radius: 0;
|
top: 0;
|
||||||
margin: 0;
|
left: 0;
|
||||||
box-shadow: none;
|
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
|
||||||
|
box-shadow: var(--panelShadow);
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
transform: translateX(0);
|
||||||
|
z-index: 1001;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
&.closed {
|
||||||
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
.panel:after {
|
}
|
||||||
border-radius: 0;
|
|
||||||
|
.mobile-notifications-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
color: var(--topBarText);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--topBar, $fallback--fg);
|
||||||
|
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
||||||
|
box-shadow: var(--topBarShadow);
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin-left: 0.6em;
|
||||||
}
|
}
|
||||||
.panel .panel-heading {
|
}
|
||||||
|
|
||||||
|
.mobile-notifications {
|
||||||
|
margin-top: 50px;
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 50px);
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
|
||||||
|
.notifications {
|
||||||
|
padding: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.panel:after {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.panel .panel-heading {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,6 +91,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
position: relative;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: $fallback--border;
|
border-color: $fallback--border;
|
||||||
border-color: var(--border, $fallback--border);
|
border-color: var(--border, $fallback--border);
|
||||||
|
@ -154,5 +155,22 @@
|
||||||
.fa-scale-110 {
|
.fa-scale-110 {
|
||||||
margin-right: 0.8em;
|
margin-right: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.unread-chat-count {
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-style: normal;
|
||||||
|
position: absolute;
|
||||||
|
right: 0.6rem;
|
||||||
|
top: 1.25em;
|
||||||
|
padding: 0 0.3em;
|
||||||
|
min-width: 1.3rem;
|
||||||
|
min-height: 1.3rem;
|
||||||
|
max-height: 1.3rem;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
max-width: 10em;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -18,6 +18,8 @@ import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
|
||||||
library.add(
|
library.add(
|
||||||
faCircleNotch
|
faCircleNotch
|
||||||
)
|
)
|
||||||
|
|
||||||
|
export default {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -85,11 +85,16 @@
|
||||||
{{ $t('post_status.preview') }}
|
{{ $t('post_status.preview') }}
|
||||||
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
|
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
|
||||||
</a>
|
</a>
|
||||||
<FAIcon
|
<div
|
||||||
v-show="previewLoading"
|
v-show="previewLoading"
|
||||||
spin
|
class="preview-spinner"
|
||||||
icon="circle-notch"
|
>
|
||||||
/>
|
<FAIcon
|
||||||
|
class="fa-old-padding"
|
||||||
|
spin
|
||||||
|
icon="circle-notch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="showPreview"
|
v-if="showPreview"
|
||||||
|
@ -383,12 +388,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-heading {
|
.preview-heading {
|
||||||
padding-left: 0.5em;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-toggle {
|
.preview-toggle {
|
||||||
|
flex: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
<div class="reaction-picker-filter">
|
<div class="reaction-picker-filter">
|
||||||
<input
|
<input
|
||||||
v-model="filterWord"
|
v-model="filterWord"
|
||||||
|
size="1"
|
||||||
:placeholder="$t('emoji.search_emoji')"
|
:placeholder="$t('emoji.search_emoji')"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,46 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div
|
||||||
<div class="search-bar-container">
|
class="SearchBar"
|
||||||
<a
|
:class="{ '-expanded': !hidden }"
|
||||||
v-if="hidden"
|
>
|
||||||
href="#"
|
<a
|
||||||
class="nav-icon"
|
v-if="hidden"
|
||||||
:title="$t('nav.search')"
|
href="#"
|
||||||
><FAIcon
|
class="nav-icon"
|
||||||
fixed-width
|
:title="$t('nav.search')"
|
||||||
class="fa-scale-110 fa-old-padding"
|
><FAIcon
|
||||||
icon="search"
|
fixed-width
|
||||||
@click.prevent.stop="toggleHidden"
|
class="fa-scale-110 fa-old-padding"
|
||||||
/></a>
|
icon="search"
|
||||||
<template v-else>
|
@click.prevent.stop="toggleHidden"
|
||||||
<input
|
/></a>
|
||||||
id="search-bar-input"
|
<template v-else>
|
||||||
ref="searchInput"
|
<input
|
||||||
v-model="searchTerm"
|
id="search-bar-input"
|
||||||
class="search-bar-input"
|
ref="searchInput"
|
||||||
:placeholder="$t('nav.search')"
|
v-model="searchTerm"
|
||||||
type="text"
|
class="search-bar-input"
|
||||||
@keyup.enter="find(searchTerm)"
|
:placeholder="$t('nav.search')"
|
||||||
>
|
type="text"
|
||||||
<button
|
@keyup.enter="find(searchTerm)"
|
||||||
class="btn search-button"
|
>
|
||||||
@click="find(searchTerm)"
|
<button
|
||||||
>
|
class="btn search-button"
|
||||||
<FAIcon
|
@click="find(searchTerm)"
|
||||||
fixed-width
|
>
|
||||||
icon="search"
|
<FAIcon
|
||||||
/>
|
fixed-width
|
||||||
</button>
|
icon="search"
|
||||||
<span>
|
/>
|
||||||
<FAIcon
|
</button>
|
||||||
fixed-width
|
<span>
|
||||||
icon="times"
|
<FAIcon
|
||||||
class="cancel-icon fa-scale-110 fa-old-padding"
|
fixed-width
|
||||||
@click.prevent.stop="toggleHidden"
|
icon="times"
|
||||||
/>
|
class="cancel-icon fa-scale-110 fa-old-padding"
|
||||||
</span>
|
@click.prevent.stop="toggleHidden"
|
||||||
</template>
|
/>
|
||||||
</div>
|
</span>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -49,21 +50,23 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.search-bar-container {
|
.SearchBar {
|
||||||
max-width: 100%;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
&.-expanded {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.search-bar-input,
|
.search-bar-input,
|
||||||
.search-button {
|
.search-button {
|
||||||
height: 29px;
|
height: 29px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar-input {
|
.search-bar-input {
|
||||||
// TODO: do this properly without a rough guesstimate of 2 icons + paddings
|
flex: 1 0 auto;
|
||||||
max-width: calc(100% - 30px - 30px - 20px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-icon {
|
.cancel-icon {
|
||||||
|
|
|
@ -126,6 +126,8 @@ library.add(
|
||||||
faRetweet,
|
faRetweet,
|
||||||
faReply
|
faReply
|
||||||
)
|
)
|
||||||
|
|
||||||
|
export default {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -7,8 +7,9 @@ $status-margin: 0.75em;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
--still-image-img: visible;
|
--_still-image-img-visibility: visible;
|
||||||
--still-image-canvas: hidden;
|
--_still-image-canvas-visibility: hidden;
|
||||||
|
--_still-image-label-visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-focused {
|
&.-focused {
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
visibility: var(--still-image-canvas, visible);
|
visibility: var(--_still-image-canvas-visibility, visible);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -66,16 +66,19 @@
|
||||||
border-radius: $fallback--tooltipRadius;
|
border-radius: $fallback--tooltipRadius;
|
||||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
visibility: var(--still-image-label-visibility, visible);
|
visibility: var(--_still-image-label-visibility, visible);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover canvas {
|
&:hover canvas {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::before,
|
&:hover::before {
|
||||||
|
visibility: var(--_still-image-label-visibility, hidden);
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
visibility: var(--still-image-img, hidden);
|
visibility: var(--_still-image-img-visibility, hidden);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover img {
|
&:hover img {
|
||||||
|
|
|
@ -4,8 +4,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.tab-icon {
|
.tab-icon {
|
||||||
width: 100%;
|
margin: 0.2em auto;
|
||||||
margin: 0.2em 0;
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,11 +20,14 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.Avatar {
|
.Avatar {
|
||||||
--still-image-label-visibility: hidden;
|
--_avatarShadowBox: var(--avatarStatusShadow);
|
||||||
|
--_avatarShadowFilter: var(--avatarStatusShadowFilter);
|
||||||
|
--_avatarShadowInset: var(--avatarStatusShadowInset);
|
||||||
|
--_still-image-label-visibility: hidden;
|
||||||
|
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
box-shadow: var(--avatarStatusShadow);
|
box-shadow: var(--_avatarShadowBox);
|
||||||
border-radius: $fallback--avatarRadius;
|
border-radius: $fallback--avatarRadius;
|
||||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||||
|
|
||||||
|
@ -34,8 +37,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.better-shadow {
|
&.better-shadow {
|
||||||
box-shadow: var(--avatarStatusShadowInset);
|
box-shadow: var(--_avatarShadowInset);
|
||||||
filter: var(--avatarStatusShadowFilter)
|
filter: var(--_avatarShadowFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.animated::before {
|
&.animated::before {
|
||||||
|
|
|
@ -282,6 +282,11 @@
|
||||||
.user-card {
|
.user-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&:hover .Avatar {
|
||||||
|
--_still-image-img-visibility: visible;
|
||||||
|
--_still-image-canvas-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-heading {
|
.panel-heading {
|
||||||
padding: .5em 0;
|
padding: .5em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -382,20 +387,17 @@
|
||||||
max-height: 56px;
|
max-height: 56px;
|
||||||
|
|
||||||
.Avatar {
|
.Avatar {
|
||||||
|
--_avatarShadowBox: var(--avatarShadow);
|
||||||
|
--_avatarShadowFilter: var(--avatarShadowFilter);
|
||||||
|
--_avatarShadowInset: var(--avatarShadowInset);
|
||||||
|
|
||||||
flex: 1 0 100%;
|
flex: 1 0 100%;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
|
|
||||||
box-shadow: var(--avatarShadow);
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .Avatar {
|
|
||||||
--still-image-img: visible;
|
|
||||||
--still-image-canvas: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-avatar-link {
|
&-avatar-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -30,6 +30,7 @@ const defaultState = {
|
||||||
logo: '/static/logo.png',
|
logo: '/static/logo.png',
|
||||||
logoMargin: '.2em',
|
logoMargin: '.2em',
|
||||||
logoMask: true,
|
logoMask: true,
|
||||||
|
logoLeft: false,
|
||||||
minimalScopesMode: false,
|
minimalScopesMode: false,
|
||||||
nsfwCensorImage: undefined,
|
nsfwCensorImage: undefined,
|
||||||
postContentType: 'text/plain',
|
postContentType: 'text/plain',
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
"logo": "/static/logo.png",
|
"logo": "/static/logo.png",
|
||||||
"logoMargin": ".1em",
|
"logoMargin": ".1em",
|
||||||
"logoMask": true,
|
"logoMask": true,
|
||||||
|
"logoLeft": false,
|
||||||
"minimalScopesMode": false,
|
"minimalScopesMode": false,
|
||||||
"nsfwCensorImage": "",
|
"nsfwCensorImage": "",
|
||||||
"postContentType": "text/plain",
|
"postContentType": "text/plain",
|
||||||
|
|
Loading…
Reference in a new issue