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

