From ae5da770cf0c2cbfee4d8291bccc64848aa6666e Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Thu, 9 Jan 2020 02:03:47 +0100
Subject: [PATCH] Realigned filter bar for mobile.

---
 assets/components/header/filter-bar.vue | 21 ++++++++++++++-------
 public/css/style.css                    |  5 +++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/assets/components/header/filter-bar.vue b/assets/components/header/filter-bar.vue
index 1da233fc..5f73c972 100644
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@@ -45,16 +45,18 @@
         </span>
 
         <span>
-            <Icon icon="filter" />
+            <span class="filters-container">
+                <Icon icon="filter" />
 
-            <Filters
-                class="filters-container"
-                :filter="filter"
-                @set-filter="setFilter"
-            />
+                <Filters
+                    class="filters-block"
+                    :filter="filter"
+                    @set-filter="setFilter"
+                />
+            </span>
 
             <v-popover class="filters-compact">
-                <div>Filters</div>
+                <Icon icon="filter" />
 
                 <div slot="popover">
                     <Filters
@@ -122,6 +124,7 @@ export default {
     background: $background;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: .5rem 1rem;
     z-index: 1;
     font-size: 0;
@@ -136,6 +139,10 @@ export default {
     display: inline-block;
 }
 
+.filters-block {
+    display: inline-block;
+}
+
 .filters-compact {
     font-size: 1rem;
     font-weight: bold;
diff --git a/public/css/style.css b/public/css/style.css
index f9556a51..dc239ce8 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -48,6 +48,8 @@
   display: flex;
   -webkit-box-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: center;
+          align-items: center;
   padding: .5rem 1rem;
   z-index: 1;
   font-size: 0;
@@ -59,6 +61,9 @@
 .filters-container[data-v-6db17c96] {
   display: inline-block;
 }
+.filters-block[data-v-6db17c96] {
+  display: inline-block;
+}
 .filters-compact[data-v-6db17c96] {
   font-size: 1rem;
   font-weight: bold;