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/components/desktop_nav/desktop_nav.scss

@@ -1,15 +1,20 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  display: grid;
   height: 50px;
-  grid-template-rows: 50px;
-  grid-template-columns: 2fr auto 2fr;
-  grid-template-areas: "sitename logo actions";
   width: 100%;
   position: fixed;
-  box-sizing: border-box;
+
-  padding: 0 1.2em;
+  .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;
@@ -17,7 +22,7 @@
   }
 
   button {
-    &, i[class*=icon-], svg {
+    &, svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
     }

src/components/desktop_nav/desktop_nav.vue

@@ -5,71 +5,73 @@
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
     >
-    <div class="item sitename">
+    <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
-        v-if="!hideSitename"
+        class="logo"
-        class="site-name"
         :to="{ name: 'root' }"
-        active-class="home"
+        :style="logoBgStyle"
         >
-        {{ sitename }}
+        <div
-      </router-link>
+          class="mask"
-    </div>
+          :style="logoMaskStyle"
-    <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>
+        <img
-      <a
+          :src="logo"
-        v-if="currentUser && currentUser.role === 'admin'"
+          :style="logoStyle"
-        href="/pleroma/admin/#/login-pleroma"
+          >
-        class="nav-icon"
+      </router-link>
-        target="_blank"
+      <div class="item right actions">
-        ><FAIcon
+        <search-bar
-           fixed-width
+          v-if="currentUser || !privateMode"
-           class="fa-scale-110 fa-old-padding"
+          @toggled="onSearchBarToggled"
-           icon="tachometer-alt"
+          @click.stop.native
-           :title="$t('nav.administration')"
+          />
-           /></a>
+        <a
-      <a
+          href="#"
-        v-if="currentUser"
+          class="nav-icon"
-        href="#"
+          @click.stop="openSettingsModal"
-        class="nav-icon"
+          >
-        @click.prevent="logout"
+          <FAIcon
-        ><FAIcon
+            fixed-width
-           fixed-width
+            class="fa-scale-110 fa-old-padding"
-           class="fa-scale-110 fa-old-padding"
+            icon="cog"
-           icon="sign-out-alt"
+            :title="$t('nav.preferences')"
-           :title="$t('login.logout')"
+            />
-           /></a>
+        </a>
-    </div>
+        <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>