Merge branch 'various-css-fixes' into 'develop'

Various css fixes

Closes #992

See merge request pleroma/pleroma-fe!1267
This commit is contained in:
HJ 2020-11-01 20:50:02 +00:00
commit 590f8e1754
21 changed files with 539 additions and 459 deletions

View file

@ -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()

View file

@ -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;

View file

@ -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"

View file

@ -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')

View 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')
}
}
}

View 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;
}
}
}

View 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>

View file

@ -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;
}
} }
} }
} }

View file

@ -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>

View file

@ -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">

View file

@ -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;

View file

@ -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>

View file

@ -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 {

View file

@ -126,6 +126,8 @@ library.add(
faRetweet, faRetweet,
faReply faReply
) )
export default {}
</script> </script>
<style lang="scss"> <style lang="scss">

View file

@ -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 {

View file

@ -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 {

View file

@ -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;
} }

View file

@ -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 {

View file

@ -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;

View file

@ -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',

View file

@ -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",