Implement overlaid sidebar on mobile and tablet

app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee

@@ -10,6 +10,7 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
   $scope.order_cycle = OrderCycle.order_cycle
   $scope.supplied_taxons = null
   $scope.supplied_properties = null
+  $scope.showFilterSidebar = false
 
   $rootScope.$on "orderCycleSelected", ->
     $scope.update_filters()
@@ -97,3 +98,6 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
 
   $scope.filtersCount = () ->
     $scope.taxonSelectors.totalActive() + $scope.propertySelectors.totalActive()
+
+  $scope.toggleFilterSidebar = ->
+    $scope.showFilterSidebar = !$scope.showFilterSidebar

app/assets/stylesheets/darkswarm/shop.css.scss

@@ -44,6 +44,41 @@
     }
   }
 
+  .shop-filters-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .background {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 200;
+      height: 100%;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+
+    .sidebar {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 210;
+      height: 100%;
+      width: 45%;
+      background-color: rgba($white, 0.95);
+      padding: 1em;
+
+      @media all and (max-width: 768px) {
+        width: 65%;
+      }
+
+      @media all and (max-width: 480px) {
+        width: 85%;
+      }
+    }
+  }
+
   products {
     display: block;
 

app/views/shop/products/_form.html.haml

@@ -54,3 +54,12 @@
                 %span{ng: {show: 'filtersCount()' }}
                   = "({{ filtersCount() }} #{t(:products_filter_selected)})"
               = render partial: "shop/products/filters"
+
+            .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar'}}
+              .background{ng: {click: 'toggleFilterSidebar()'}}
+              .sidebar
+                %h5
+                  = t(:products_filter_by)
+                  %span{ng: {show: 'filtersCount()' }}
+                    = "({{ filtersCount() }} #{t(:products_filter_selected)})"
+                = render partial: "shop/products/filters"

app/views/shop/products/_searchbar.haml

@@ -7,7 +7,7 @@
             "ofn-disable-enter" => true}
 
       .hide-for-large-up
-        %button{type: 'button'}
+        %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
           Filters
           %span{ng: {show: 'filtersCount()' }}
             ({{ filtersCount() }})