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

Various css fixes Closes #992 See merge request pleroma/pleroma-fe!1267
2020-11-01 20:50:02 +00:00 · 2020-11-01 20:50:02 +00:00 · 590f8e1754
parent 148789767a 64da9a8e69
commit 590f8e1754
21 changed files with 539 additions and 459 deletions
--- 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()
--- 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;
--- 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"
--- 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')
--- 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')
+    }
+  }
+}
--- 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;
+    }
+  }
+}
--- 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>
--- 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;
-}
-
-.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;
-
-  &.closed {
-    transform: translateX(100%);
+.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-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;
+  .mobile-inner-nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
  }
-}

-.mobile-notifications {
-  margin-top: 50px;
-  width: 100vw;
-  height: calc(100vh - 50px);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  .mobile-nav-button {
+    text-align: center;
+    margin: 0 1em;
+    position: relative;
+    cursor: pointer;
+  }

-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  .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);
+  }

-  .notifications {
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    .panel {
-      border-radius: 0;
-      margin: 0;
-      box-shadow: none;
+  .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%);
    }
-    .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;
+      }
    }
  }
 }
--- 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>
--- 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">
--- 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;

--- 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>
--- 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 {
--- 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">
--- 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 {
--- 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 {
--- 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;
  }

--- 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 {
--- 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;
--- 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',
--- 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",