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

Various css fixes

Closes #992

See merge request pleroma/pleroma-fe!1267

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',
+    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 () {
     // 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()

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;

src/App.vue

@@ -9,80 +9,7 @@
       :style="bgStyle"
     />
     <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
       id="content"

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

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

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

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>

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
+      <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>
     </nav>
     <div
@@ -93,100 +91,113 @@
 <style lang="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;
       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;
+      }
     }
   }
 }

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>

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

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
+            class="preview-spinner"
-            icon="circle-notch"
+          >
-          />
+            <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;
 

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>

src/components/search_bar/search_bar.vue

@@ -1,46 +1,47 @@
 <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>
 </template>
 
@@ -49,21 +50,23 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.search-bar-container {
+.SearchBar {
-  max-width: 100%;
   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
+    flex: 1 0 auto;
-    max-width: calc(100% - 30px - 30px - 20px);
   }
 
   .cancel-icon {

src/components/settings_modal/tabs/theme_tab/preview.vue

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

src/components/status/status.scss

@@ -7,8 +7,9 @@ $status-margin: 0.75em;
   min-width: 0;
 
   &: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 {

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 {

src/components/tab_switcher/tab_switcher.scss

@@ -4,8 +4,7 @@
   display: flex;
 
   .tab-icon {
-    width: 100%;
+    margin: 0.2em auto;
-    margin: 0.2em 0;
     display: block;
   }
 

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);
+    box-shadow: var(--_avatarShadowInset);
-    filter: var(--avatarStatusShadowFilter)
+    filter: var(--_avatarShadowFilter);
   }
 
   &.animated::before {

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;

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

static/config.json

@@ -13,6 +13,7 @@
   "logo": "/static/logo.png",
   "logoMargin": ".1em",
   "logoMask": true,
+  "logoLeft": false,
   "minimalScopesMode": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",