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/search_bar/search_bar.vue | 77 +++++++++++++++++---------------
 1 file changed, 40 insertions(+), 37 deletions(-)

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

diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index f1c3fd7a..8d971287 100644
--- 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')"
+<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)"
+        /></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)"
+      <button
+        class="btn search-button"
+        @click="find(searchTerm)"
         >
-          <FAIcon
-            fixed-width
-            icon="search"
+        <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"
+      </button>
+      <span>
+        <FAIcon
+          fixed-width
+          icon="times"
+          class="cancel-icon fa-scale-110 fa-old-padding"
+          @click.prevent.stop="toggleHidden"
           />
-        </span>
-      </template>
-    </div>
+      </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 {
-- 
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/search_bar/search_bar.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