From ff07b9703376edd3edf184698a91c004412176a1 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 18:30:24 +0200
Subject: [PATCH] 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.
---
 .../stylesheets/darkswarm/shop.css.scss       | 67 ++++++++++++++++---
 app/views/shop/products/_form.html.haml       | 14 +++-
 config/locales/en.yml                         |  2 +
 3 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 311fdf48e1..42748e48f1 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/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;
       }
     }
   }
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index b98f308a53..4b0311954f 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/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)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fad7962350..ca2d5ad360 100644
--- a/config/locales/en.yml
+++ b/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"