commit: 590f8e17544969b1fc2456b3724e85b16cf81bdd
parent 148789767a28a988751af9635cd53fe6d85a4c75
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 1 Nov 2020 20:50:02 +0000
Merge branch 'various-css-fixes' into 'develop'
Various css fixes
Closes #992
See merge request pleroma/pleroma-fe!1267
Diffstat:
21 files changed, 536 insertions(+), 456 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,6 @@
import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.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 FeaturesPanel from './components/features_panel/features_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 MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.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 PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
@@ -22,7 +22,6 @@ export default {
UserPanel,
NavPanel,
Notifications,
- SearchBar,
InstanceSpecificPanel,
FeaturesPanel,
WhoToFollowPanel,
@@ -31,21 +30,14 @@ export default {
SideDrawer,
MobilePostStatusButton,
MobileNav,
+ DesktopNav,
SettingsModal,
UserReportingModal,
PostStatusModal,
GlobalNoticeList
},
data: () => ({
- 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')
- )
+ mobileActivePanel: 'timeline'
}),
created () {
// Load the locale from the storage
@@ -61,28 +53,6 @@ export default {
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 () {
return {
'background-image': `url(${this.background})`
@@ -93,9 +63,7 @@ export default {
'--body-background-image': `url(${this.background})`
}
},
- sitename () { return this.$store.state.instance.name },
chat () { return this.$store.state.chat.channel.state === 'joined' },
- hideSitename () { return this.$store.state.instance.hideSitename },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel &&
@@ -112,19 +80,6 @@ export default {
}
},
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 () {
const mobileLayout = windowWidth() <= 800
const layoutHeight = windowHeight()
diff --git a/src/App.scss b/src/App.scss
@@ -359,119 +359,10 @@ i[class*=icon-], .svg-inline--fa {
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 {
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 {
flex: 1;
}
@@ -781,16 +672,6 @@ nav {
}
}
-@media all and (min-width: 800px) {
- .logo {
- opacity: 1 !important;
- }
-}
-
-.item.right {
- text-align: right;
-}
-
.visibility-notice {
padding: .5em;
border: 1px solid $fallback--faint;
@@ -943,22 +824,6 @@ nav {
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 {
// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
overflow: hidden;
diff --git a/src/App.vue b/src/App.vue
@@ -9,80 +9,7 @@
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" />
- <nav
- 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>
+ <DesktopNav v-else />
<div class="app-bg-wrapper app-container-wrapper" />
<div
id="content"
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -130,6 +130,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
? 0
: config.logoMargin
})
+ copyInstanceOption('logoLeft')
store.commit('authFlow/setInitialStrategy', config.loginMethod)
copyInstanceOption('redirectRootNoLogin')
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
@@ -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')
+ }
+ }
+}
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
@@ -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;
+ }
+ }
+}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
@@ -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>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
@@ -1,55 +1,53 @@
<template>
- <div>
+ <div
+ class="MobileNav"
+ >
<nav
id="nav"
- class="nav-bar container"
+ class="mobile-nav"
:class="{ 'mobile-hidden': isChat }"
+ @click="scrollToTop()"
>
- <div
- class="mobile-inner-nav"
- @click="scrollToTop()"
- >
- <div class="item">
- <a
- href="#"
- class="mobile-nav-button"
- @click.stop.prevent="toggleMobileSidebar()"
- >
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="bars"
- />
- <div
- v-if="unreadChatCount"
- class="alert-dot"
- />
- </a>
- <router-link
- v-if="!hideSitename"
- class="site-name"
- :to="{ name: 'root' }"
- active-class="home"
- >
- {{ sitename }}
- </router-link>
- </div>
- <div class="item right">
- <a
- v-if="currentUser"
- class="mobile-nav-button"
- href="#"
- @click.stop.prevent="openMobileNotifications()"
- >
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="bell"
- />
- <div
- v-if="unseenNotificationsCount"
- class="alert-dot"
- />
- </a>
- </div>
+ <div class="item">
+ <a
+ href="#"
+ class="mobile-nav-button"
+ @click.stop.prevent="toggleMobileSidebar()"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="bars"
+ />
+ <div
+ v-if="unreadChatCount"
+ class="alert-dot"
+ />
+ </a>
+ <router-link
+ v-if="!hideSitename"
+ class="site-name"
+ :to="{ name: 'root' }"
+ active-class="home"
+ >
+ {{ sitename }}
+ </router-link>
+ </div>
+ <div class="item right">
+ <a
+ v-if="currentUser"
+ class="mobile-nav-button"
+ href="#"
+ @click.stop.prevent="openMobileNotifications()"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ icon="bell"
+ />
+ <div
+ v-if="unseenNotificationsCount"
+ class="alert-dot"
+ />
+ </a>
</div>
</nav>
<div
@@ -93,100 +91,113 @@
<style lang="scss">
@import '../../_variables.scss';
-.mobile-inner-nav {
- width: 100%;
- display: flex;
- align-items: center;
-}
+.MobileNav {
+ .mobile-nav {
+ display: grid;
+ line-height: 50px;
+ height: 50px;
+ grid-template-rows: 50px;
+ grid-template-columns: 2fr auto;
+ width: 100%;
+ position: fixed;
+ box-sizing: border-box;
+ }
-.mobile-nav-button {
- text-align: center;
- margin: 0 1em;
- position: relative;
- cursor: pointer;
-}
+ .mobile-inner-nav {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ }
-.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-nav-button {
+ text-align: center;
+ margin: 0 1em;
+ position: relative;
+ 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;
+ .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%);
+ &.closed {
+ transform: translateX(100%);
+ }
}
-}
-.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);
+ .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;
+ .title {
+ font-size: 1.3em;
+ margin-left: 0.6em;
+ }
}
-}
-.mobile-notifications {
- margin-top: 50px;
- width: 100vw;
- height: calc(100vh - 50px);
- overflow-x: hidden;
- overflow-y: scroll;
+ .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);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ background-color: $fallback--bg;
+ background-color: var(--bg, $fallback--bg);
- .notifications {
- padding: 0;
- border-radius: 0;
- box-shadow: none;
- .panel {
- border-radius: 0;
- margin: 0;
- box-shadow: none;
- }
- .panel:after {
- border-radius: 0;
- }
- .panel .panel-heading {
+ .notifications {
+ padding: 0;
border-radius: 0;
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;
+ }
}
}
}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -91,6 +91,7 @@
}
li {
+ position: relative;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
@@ -154,5 +155,22 @@
.fa-scale-110 {
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>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
@@ -18,6 +18,8 @@ import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch
)
+
+export default {}
</script>
<style lang="scss">
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -85,11 +85,16 @@
{{ $t('post_status.preview') }}
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
</a>
- <FAIcon
+ <div
v-show="previewLoading"
- spin
- icon="circle-notch"
- />
+ class="preview-spinner"
+ >
+ <FAIcon
+ class="fa-old-padding"
+ spin
+ icon="circle-notch"
+ />
+ </div>
</div>
<div
v-if="showPreview"
@@ -383,12 +388,12 @@
}
.preview-heading {
- padding-left: 0.5em;
display: flex;
- width: 100%;
+ padding-left: 0.5em;
}
.preview-toggle {
+ flex: 1;
cursor: pointer;
user-select: none;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
@@ -12,6 +12,7 @@
<div class="reaction-picker-filter">
<input
v-model="filterWord"
+ size="1"
:placeholder="$t('emoji.search_emoji')"
>
</div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
@@ -1,46 +1,47 @@
<template>
- <div>
- <div class="search-bar-container">
- <a
- v-if="hidden"
- href="#"
- class="nav-icon"
- :title="$t('nav.search')"
- ><FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="search"
- @click.prevent.stop="toggleHidden"
- /></a>
- <template v-else>
- <input
- id="search-bar-input"
- ref="searchInput"
- v-model="searchTerm"
- class="search-bar-input"
- :placeholder="$t('nav.search')"
- type="text"
- @keyup.enter="find(searchTerm)"
- >
- <button
- class="btn search-button"
- @click="find(searchTerm)"
- >
- <FAIcon
- fixed-width
- icon="search"
- />
- </button>
- <span>
- <FAIcon
- fixed-width
- icon="times"
- class="cancel-icon fa-scale-110 fa-old-padding"
- @click.prevent.stop="toggleHidden"
- />
- </span>
- </template>
- </div>
+ <div
+ class="SearchBar"
+ :class="{ '-expanded': !hidden }"
+ >
+ <a
+ v-if="hidden"
+ href="#"
+ class="nav-icon"
+ :title="$t('nav.search')"
+ ><FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="search"
+ @click.prevent.stop="toggleHidden"
+ /></a>
+ <template v-else>
+ <input
+ id="search-bar-input"
+ ref="searchInput"
+ v-model="searchTerm"
+ class="search-bar-input"
+ :placeholder="$t('nav.search')"
+ type="text"
+ @keyup.enter="find(searchTerm)"
+ >
+ <button
+ class="btn search-button"
+ @click="find(searchTerm)"
+ >
+ <FAIcon
+ fixed-width
+ icon="search"
+ />
+ </button>
+ <span>
+ <FAIcon
+ fixed-width
+ icon="times"
+ class="cancel-icon fa-scale-110 fa-old-padding"
+ @click.prevent.stop="toggleHidden"
+ />
+ </span>
+ </template>
</div>
</template>
@@ -49,21 +50,23 @@
<style lang="scss">
@import '../../_variables.scss';
-.search-bar-container {
- max-width: 100%;
+.SearchBar {
display: inline-flex;
align-items: baseline;
vertical-align: baseline;
justify-content: flex-end;
+ &.-expanded {
+ width: 100%;
+ }
+
.search-bar-input,
.search-button {
height: 29px;
}
.search-bar-input {
- // TODO: do this properly without a rough guesstimate of 2 icons + paddings
- max-width: calc(100% - 30px - 30px - 20px);
+ flex: 1 0 auto;
}
.cancel-icon {
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -126,6 +126,8 @@ library.add(
faRetweet,
faReply
)
+
+export default {}
</script>
<style lang="scss">
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -7,8 +7,9 @@ $status-margin: 0.75em;
min-width: 0;
&:hover {
- --still-image-img: visible;
- --still-image-canvas: hidden;
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ --_still-image-label-visibility: hidden;
}
&.-focused {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
@@ -42,7 +42,7 @@
width: 100%;
height: 100%;
object-fit: contain;
- visibility: var(--still-image-canvas, visible);
+ visibility: var(--_still-image-canvas-visibility, visible);
}
img {
@@ -66,16 +66,19 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
- visibility: var(--still-image-label-visibility, visible);
+ visibility: var(--_still-image-label-visibility, visible);
}
&:hover canvas {
display: none;
}
- &:hover::before,
+ &:hover::before {
+ visibility: var(--_still-image-label-visibility, hidden);
+ }
+
img {
- visibility: var(--still-image-img, hidden);
+ visibility: var(--_still-image-img-visibility, hidden);
}
&:hover img {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
@@ -4,8 +4,7 @@
display: flex;
.tab-icon {
- width: 100%;
- margin: 0.2em 0;
+ margin: 0.2em auto;
display: block;
}
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
@@ -20,11 +20,14 @@
@import '../../_variables.scss';
.Avatar {
- --still-image-label-visibility: hidden;
+ --_avatarShadowBox: var(--avatarStatusShadow);
+ --_avatarShadowFilter: var(--avatarStatusShadowFilter);
+ --_avatarShadowInset: var(--avatarStatusShadowInset);
+ --_still-image-label-visibility: hidden;
width: 48px;
height: 48px;
- box-shadow: var(--avatarStatusShadow);
+ box-shadow: var(--_avatarShadowBox);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
@@ -34,8 +37,8 @@
}
&.better-shadow {
- box-shadow: var(--avatarStatusShadowInset);
- filter: var(--avatarStatusShadowFilter)
+ box-shadow: var(--_avatarShadowInset);
+ filter: var(--_avatarShadowFilter);
}
&.animated::before {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -282,6 +282,11 @@
.user-card {
position: relative;
+ &:hover .Avatar {
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ }
+
.panel-heading {
padding: .5em 0;
text-align: center;
@@ -382,20 +387,17 @@
max-height: 56px;
.Avatar {
+ --_avatarShadowBox: var(--avatarShadow);
+ --_avatarShadowFilter: var(--avatarShadowFilter);
+ --_avatarShadowInset: var(--avatarShadowInset);
+
flex: 1 0 100%;
width: 56px;
height: 56px;
- box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
- box-shadow: var(--avatarShadow);
object-fit: cover;
}
}
- &:hover .Avatar {
- --still-image-img: visible;
- --still-image-canvas: hidden;
- }
-
&-avatar-link {
position: relative;
cursor: pointer;
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -30,6 +30,7 @@ const defaultState = {
logo: '/static/logo.png',
logoMargin: '.2em',
logoMask: true,
+ logoLeft: false,
minimalScopesMode: false,
nsfwCensorImage: undefined,
postContentType: 'text/plain',
diff --git a/static/config.json b/static/config.json
@@ -13,6 +13,7 @@
"logo": "/static/logo.png",
"logoMargin": ".1em",
"logoMask": true,
+ "logoLeft": false,
"minimalScopesMode": false,
"nsfwCensorImage": "",
"postContentType": "text/plain",
