Merge branch 'various-css-fixes' into shigusegubu

* various-css-fixes:
  fix play-on-hover gifs issues
  fix preview spinner
  Refactor desktop navbar into a component, change layout to grid for better compatibility with search field and simpler CSS

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

@@ -67,6 +67,7 @@ export default {
     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 },
   },

src/components/desktop_nav/desktop_nav.scss

@@ -4,10 +4,17 @@
   display: grid;
   height: 50px;
   grid-template-rows: 50px;
-  grid-template-columns: 2fr minmax(min-content, min-content) 2fr;
+  grid-template-columns: 2fr auto 2fr;
+  grid-template-areas: "sitename logo actions";
   width: 100%;
   position: fixed;
   box-sizing: border-box;
+  padding: 0 1.2em;
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
 
   button {
     &, i[class*=icon-], svg {
@@ -36,6 +43,7 @@
   }
 
   .logo {
+    grid-area: logo;
     position: relative;
     transition: opacity;
     transition-timing-function: ease-out;
@@ -75,8 +83,15 @@
     color: var(--topBarLink, $fallback--link);
   }
 
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
   .item {
-    margin: 0 1.2em;
     flex: 1;
     line-height: 50px;
     height: 50px;

src/components/desktop_nav/desktop_nav.vue

@@ -2,9 +2,10 @@
   <nav
     id="nav"
     class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
     >
-    <div class="item">
+    <div class="item sitename">
       <router-link
         v-if="!hideSitename"
         class="site-name"
@@ -14,8 +15,9 @@
         {{ sitename }}
       </router-link>
     </div>
-    <div
+    <router-link
       class="logo"
+      :to="{ name: 'root' }"
       :style="logoBgStyle"
       >
       <div
@@ -26,8 +28,8 @@
         :src="logo"
         :style="logoStyle"
         >
-    </div>
-    <div class="item right mobile-hidden">
+    </router-link>
+    <div class="item right actions">
       <search-bar
         v-if="currentUser || !privateMode"
         @toggled="onSearchBarToggled"

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.svg",
   "logoMargin": ".1em",
   "logoMask": true,
+  "logoLeft": false,
   "minimalScopesMode": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",