From f43bf3880c13069ceb8f76d3147091c4c1be13d6 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 16:23:11 +0200
Subject: [PATCH] Add filters button on mobile and tablet

---
 app/assets/stylesheets/darkswarm/shop.css.scss | 8 ++++++++
 app/assets/stylesheets/darkswarm/ui.css.scss   | 4 ++++
 app/views/shop/products/_searchbar.haml        | 8 +++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 64e11d8b65..25ad072c0f 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -34,6 +34,14 @@
         font-style: italic;
       }
     }
+
+    button {
+      background-color: $grey-600;
+      margin-left: 1em;
+      height: 3em;
+      width: 7em;
+      padding: 0;
+    }
   }
 
   products {
diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss
index 4a50c4a1a0..35400362bb 100644
--- a/app/assets/stylesheets/darkswarm/ui.css.scss
+++ b/app/assets/stylesheets/darkswarm/ui.css.scss
@@ -129,3 +129,7 @@ button.success, .button.success {
     padding: 0;
   }
 }
+
+.flex {
+  display: flex;
+}
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index 26cac7c95d..c9bb311ac0 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -1,7 +1,13 @@
 .shop-searchbar
   .row
-    .small-5.columns
+    .small-12.large-5.columns.flex
       %input#search.text{"ng-model" => "query",
             placeholder: t(:products_search),
             "ng-debounce" => "200",
             "ofn-disable-enter" => true}
+
+      .hide-for-large-up
+        %button{type: 'button'}
+          Filters
+          %span{ng: {show: 'filtersCount()' }}
+            ({{ filtersCount() }})