Add sidebar footer and buttons

Also includes a minor refactor to resolve an issue with animation timings. Angular was not adding the "shown" class to the different elements at the same time in the digest cycle, and it looked a bit shaky.

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

@@ -11,6 +11,11 @@
 @import "shop-taxon-flag";
 @import "shop-popovers";
 
+$sidebar-small-width: 85%;
+$sidebar-medium-width: 65%;
+$sidebar-large-width: 45%;
+$sidebar-footer-height: 5em;
+
 .darkswarm {
   .shop-searchbar {
     background-color: $grey-100;
@@ -68,10 +73,16 @@
       background-color: rgba(0, 0, 0, 0.15);
       opacity: 0;
       transition: opacity 250ms ease-in-out 0s;
+    }
 
-      &.shown {
+    &.shown {
+      .background {
         opacity: 1;
       }
+
+      .sidebar, .sidebar-footer {
+        margin-right: 0;
+      }
     }
 
     .sidebar {
@@ -80,24 +91,58 @@
       right: 0;
       z-index: 210;
       height: 100%;
-      width: 45%;
-      margin-right: -45%;
+      width: $sidebar-large-width;
+      margin-right: -$sidebar-large-width;
       background-color: rgba($white, 0.95);
       padding: 1em;
       transition: margin 250ms ease-in-out 0s;
+      overflow-y: scroll;
 
-      &.shown {
-        margin-right: 0;
+      .property-selectors {
+        margin-bottom: $sidebar-footer-height + 2em;
       }
+    }
 
-      @media all and (max-width: 768px) {
-        width: 65%;
-        margin-right: -65%;
+    .sidebar-footer {
+      background-color: $grey-800;
+      width: $sidebar-large-width;
+      margin-right: -$sidebar-large-width;
+      height: $sidebar-footer-height;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      transition: margin 250ms ease-in-out 0s;
+      padding: 1em;
+
+      button {
+        height: 3em;
+        background-color: $grey-800;
+        color: $white;
+        border: 1px solid $grey-600;
+        border-radius: 0.5em;
+        width: 47%;
+        margin: 0;
+        padding: 0;
+
+        &.done {
+          background-color: $orange-500;
+          border: none;
+          margin-left: 3%;
+        }
       }
+    }
 
-      @media all and (max-width: 480px) {
-        width: 85%;
-        margin-right: -85%;
+    @media all and (max-width: 768px) {
+      .sidebar, .sidebar-footer {
+        width: $sidebar-medium-width;
+        margin-right: -$sidebar-medium-width;
+      }
+    }
+
+    @media all and (max-width: 480px) {
+      .sidebar, .sidebar-footer {
+        width: $sidebar-small-width;
+        margin-right: -$sidebar-small-width;
       }
     }
   }

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

@@ -53,13 +53,21 @@
                 = t(:products_filter_by)
                 %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()', class: "{'shown': showFilterSidebar}"}}
-              .sidebar{ng: {class: "{'shown': showFilterSidebar}"}}
+            .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': 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"
+
+                .sidebar-footer
+                  %button{type: 'button', ng: {click: 'clearAll() && toggleFilterSidebar()'}}
+                    = t(:products_filter_clear)
+                  %button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+                    = t(:products_filter_done)

config/locales/en.yml

@@ -1655,6 +1655,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   products_search: "Search..."
   products_filter_by: "Filter by"
   products_filter_selected: "selected"
+  products_filter_clear: "Clear"
+  products_filter_done: "Done"
   products_loading: "Loading products..."
   products_updating_cart: "Updating cart..."
   products_cart_empty: "Cart empty"