From 633349ddff2fd96298ce26ac2d3c404edb1ebbf3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Oct 2020 21:13:31 +0200
Subject: Refactor desktop navbar into a component, change layout to grid for
 better compatibility with search field and simpler CSS

---
 src/components/mobile_nav/mobile_nav.vue | 267 ++++++++++++++++---------------
 1 file changed, 139 insertions(+), 128 deletions(-)

(limited to 'src/components/mobile_nav/mobile_nav.vue')

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d2bc65ab..30b15149 100644
--- 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;
+      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 8b1213ea1e75a2d0f824cc71992d4867a4ea0bb5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 1 Nov 2020 16:44:57 +0200
Subject: lint

---
 src/App.js                                         |  2 +-
 src/components/desktop_nav/desktop_nav.js          |  4 +--
 src/components/desktop_nav/desktop_nav.vue         | 42 +++++++++++-----------
 src/components/mobile_nav/mobile_nav.vue           |  2 +-
 .../post_status_form/post_status_form.vue          |  3 +-
 src/components/react_button/react_button.vue       |  2 +-
 src/components/search_bar/search_bar.vue           | 26 +++++++-------
 7 files changed, 41 insertions(+), 40 deletions(-)

(limited to 'src/components/mobile_nav/mobile_nav.vue')

diff --git a/src/App.js b/src/App.js
index 4871b4ac..52700319 100644
--- a/src/App.js
+++ b/src/App.js
@@ -37,7 +37,7 @@ export default {
     GlobalNoticeList
   },
   data: () => ({
-    mobileActivePanel: 'timeline',
+    mobileActivePanel: 'timeline'
   }),
   created () {
     // Load the locale from the storage
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index ee99ec10..e048f53d 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -69,7 +69,7 @@ export default {
     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 },
+    privateMode () { return this.$store.state.instance.private }
   },
   methods: {
     scrollToTop () {
@@ -84,6 +84,6 @@ export default {
     },
     openSettingsModal () {
       this.$store.dispatch('openSettingsModal')
-    },
+    }
   }
 }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index d166be08..3a6e4033 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -4,7 +4,7 @@
     class="DesktopNav"
     :class="{ '-logoLeft': logoLeft }"
     @click="scrollToTop()"
-    >
+  >
     <div class="inner-nav">
       <div class="item sitename">
         <router-link
@@ -12,7 +12,7 @@
           class="site-name"
           :to="{ name: 'root' }"
           active-class="home"
-          >
+        >
           {{ sitename }}
         </router-link>
       </div>
@@ -20,58 +20,58 @@
         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>
+        ><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>
+        ><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>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 30b15149..6651fc8e 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="MobileNav"
-    >
+  >
     <nav
       id="nav"
       class="mobile-nav"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 55cd706e..2b57ea19 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -87,7 +87,8 @@
           </a>
           <div
             v-show="previewLoading"
-            class="preview-spinner">
+            class="preview-spinner"
+          >
             <FAIcon
               class="fa-old-padding"
               spin
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index fa862484..95d95b11 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -11,8 +11,8 @@
     >
       <div class="reaction-picker-filter">
         <input
-          size="1"
           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
index 8d971287..89a601c8 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,19 +1,19 @@
 <template>
-<div
-  class="SearchBar"
-  :class="{ '-expanded': !hidden }"
+  <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>
+    ><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"
@@ -23,15 +23,15 @@
         :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
@@ -39,7 +39,7 @@
           icon="times"
           class="cancel-icon fa-scale-110 fa-old-padding"
           @click.prevent.stop="toggleHidden"
-          />
+        />
       </span>
     </template>
   </div>
-- 
cgit v1.2.3-70-g09d2