From 08d37b955a77b7cf25c65ec968604e6a33eaa8d5 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 12:22:04 +1100 Subject: [PATCH 1/8] Refactoring filter feature for shopfront page - show by default, hide on click. WIP. --- .../darkswarm/active_table_search.css.sass | 22 ++++++++++++++---- .../_filter_box_shopfront.html.haml | 4 ++++ .../_filter_controls_shopfront.html.haml | 8 +++++++ app/views/shop/products/_filters.html.haml | 23 +++++++++++-------- 4 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 app/views/shared/components/_filter_box_shopfront.html.haml create mode 100644 app/views/shared/components/_filter_controls_shopfront.html.haml diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 0503e30d0f..614509784e 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -3,12 +3,12 @@ @import big-input @import animations -// OVERRIDES +// Filter-box .row .row.filter-box margin-left: 0 margin-right: 0 -.row.filter-box:first-child +.row.filter-box:first-child, .row.filter-box.filter-box-shopfront border: 1px solid $clr-blue-light @include border-radius(0.25em) margin-top: 2px @@ -17,17 +17,20 @@ background: transparent margin-top: 1em +.row.filter-box.filter-box-shopfront + margin-top: 0 + products .filter-box background: #f7f7f7 + .filter-box background: rgba(245,245,245,0.6) - .tdhead padding: 0.25rem 0.5rem margin-top: 0.9rem color: $clr-blue - border-bottom: 1px solid $clr-blue-light + border-bottom: 1px solid $clr-blue-light // OVERRIDES [class*="block-grid-"] @@ -89,7 +92,6 @@ products .filter-box svg path fill: $clr-brick - render-svg display: block @@ -103,6 +105,16 @@ products .filter-box path fill: #666 +.filter-box.filter-box-shopfront + .tdhead + margin-top: 0rem + margin-bottom: 0.75rem + padding: 0.5rem 0 + h5 + color: $clr-blue + .button.tiny + margin-bottom: 0rem + .button.filterbtn margin-bottom: 0 !important min-width: 160px diff --git a/app/views/shared/components/_filter_box_shopfront.html.haml b/app/views/shared/components/_filter_box_shopfront.html.haml new file mode 100644 index 0000000000..f73d13f69f --- /dev/null +++ b/app/views/shared/components/_filter_box_shopfront.html.haml @@ -0,0 +1,4 @@ +/ %span.animate-show{"ng-show" => "filtersActive && totalActive() > 0"} +%a.button.secondary.tiny{"ng-click" => "clearAll()"} + %i.ofn-i_009-close + Clear all filters diff --git a/app/views/shared/components/_filter_controls_shopfront.html.haml b/app/views/shared/components/_filter_controls_shopfront.html.haml new file mode 100644 index 0000000000..b89d55c452 --- /dev/null +++ b/app/views/shared/components/_filter_controls_shopfront.html.haml @@ -0,0 +1,8 @@ +%a.button.success.tiny.filterbtn{"ng-click" => "filtersActive = !filtersActive", +"ng-show" => "FilterSelectorsService.selectors.length > 0"} + {{ filterText(filtersActive) }} + %i.ofn-i_005-caret-down{"ng-show" => "!filtersActive"} + %i.ofn-i_006-caret-up{"ng-show" => "filtersActive"} + +%a.button.secondary.tiny.filterbtn.disabled{"ng-show" => "FilterSelectorsService.selectors.length == 0"} + No filters diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml index c135274fad..a62361465c 100644 --- a/app/views/shop/products/_filters.html.haml +++ b/app/views/shop/products/_filters.html.haml @@ -1,17 +1,20 @@ -.row - = render partial: 'shared/components/filter_controls' - .small-12.medium-6.columns.text-right -   - .row.animate-show{"ng-show" => "filtersActive"} .small-12.columns - .row.filter-box - .small-12.columns - %h5.tdhead + = render partial: 'shared/components/filter_controls_shopfront' + +.row.filter-box.filter-box-shopfront.animate-hide{"ng-hide" => "filtersActive"} + .small-12.columns + .row.tdhead + .small-12.medium-6.columns + %h5 .light Filter by - Type + Category + .small-12.medium-6.columns.text-right + = render partial: 'shared/components/filter_controls_shopfront' + = render partial: 'shared/components/filter_box_shopfront' + .row + .small-12.columns %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4 %taxon-selector{objects: "Products.products | products:query | products:showProfiles", results: "activeTaxons"} -= render partial: 'shared/components/filter_box' From 515348a8fb33b8cb0ee93c24cf55b4a4b8a74ec6 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 12:52:57 +1100 Subject: [PATCH 2/8] Change the filtersActive variable for this page only --- .../darkswarm/controllers/products_controller.js.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee index 8ed56f252d..f445cbac91 100644 --- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee @@ -5,6 +5,7 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, $scope.clearAll = FilterSelectorsService.clearAll $scope.filterText = FilterSelectorsService.filterText $scope.FilterSelectorsService = FilterSelectorsService + $scope.filtersActive = true $scope.limit = 3 $scope.ordering = order: "primary_taxon.name" From ebe2d9929982339004cd91cf1dd91b0d26cba19e Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 12:53:26 +1100 Subject: [PATCH 3/8] Change markup because the boolean variable now works correctly --- app/views/shop/products/_filters.html.haml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml index a62361465c..395e6f123d 100644 --- a/app/views/shop/products/_filters.html.haml +++ b/app/views/shop/products/_filters.html.haml @@ -1,8 +1,8 @@ -.row.animate-show{"ng-show" => "filtersActive"} +.row.animate-show{"ng-hide" => "filtersActive"} .small-12.columns = render partial: 'shared/components/filter_controls_shopfront' -.row.filter-box.filter-box-shopfront.animate-hide{"ng-hide" => "filtersActive"} +.row.filter-box.filter-box-shopfront.animate-hide{"ng-show" => "filtersActive"} .small-12.columns .row.tdhead .small-12.medium-6.columns @@ -10,8 +10,9 @@ .light Filter by Category .small-12.medium-6.columns.text-right - = render partial: 'shared/components/filter_controls_shopfront' = render partial: 'shared/components/filter_box_shopfront' + = render partial: 'shared/components/filter_controls_shopfront' + .row .small-12.columns %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4 From b55bced488711c8e4d8a827e10c41dea0b568b1c Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 12:53:48 +1100 Subject: [PATCH 4/8] Put show hide animation back in for clear button --- .../shared/components/_filter_box_shopfront.html.haml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/shared/components/_filter_box_shopfront.html.haml b/app/views/shared/components/_filter_box_shopfront.html.haml index f73d13f69f..7a2aa23296 100644 --- a/app/views/shared/components/_filter_box_shopfront.html.haml +++ b/app/views/shared/components/_filter_box_shopfront.html.haml @@ -1,4 +1,4 @@ -/ %span.animate-show{"ng-show" => "filtersActive && totalActive() > 0"} -%a.button.secondary.tiny{"ng-click" => "clearAll()"} - %i.ofn-i_009-close - Clear all filters +%span.animate-show{"ng-show" => "filtersActive && totalActive() > 0"} + %a.button.secondary.tiny{"ng-click" => "clearAll()"} + %i.ofn-i_009-close + Clear all filters From e8c5af004fce7a10e17548a8b3397baf6f5178f0 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 13:01:49 +1100 Subject: [PATCH 5/8] Add another class so we can see which row is clear filters --- app/views/shared/components/_filter_box.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/components/_filter_box.html.haml b/app/views/shared/components/_filter_box.html.haml index 0256a57ff1..efa8b582f2 100644 --- a/app/views/shared/components/_filter_box.html.haml +++ b/app/views/shared/components/_filter_box.html.haml @@ -1,4 +1,4 @@ -.row.filter-box.animate-show{"ng-show" => "filtersActive && totalActive() > 0"} +.row.filter-box.clear-filters.animate-show{"ng-show" => "filtersActive && totalActive() > 0"} .small-12.columns %a.button.secondary.small.expand{"ng-click" => "clearAll()"} %i.ofn-i_009-close From f36c881f52d197e6f7757e663e13ffc1851d6ba1 Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 13:02:07 +1100 Subject: [PATCH 6/8] Add clear filters feature to Producers page --- app/views/producers/_filters.html.haml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/views/producers/_filters.html.haml b/app/views/producers/_filters.html.haml index 00472dc91c..e1cd0ccba9 100644 --- a/app/views/producers/_filters.html.haml +++ b/app/views/producers/_filters.html.haml @@ -13,3 +13,5 @@ %ul.small-block-grid-2.medium-block-grid-4.large-block-grid-6 %taxon-selector{objects: "Enterprises.producers | searchEnterprises:query ", results: "activeTaxons"} + = render partial: 'shared/components/filter_box' + From e9cb7f9565d84a2a56cace74951406ecd77f016e Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 13:02:17 +1100 Subject: [PATCH 7/8] Styling for clear filters row --- app/assets/stylesheets/darkswarm/active_table_search.css.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 614509784e..765759f26d 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -13,7 +13,7 @@ @include border-radius(0.25em) margin-top: 2px -.row.filter-box:last-child +.row.filter-box.clear-filters background: transparent margin-top: 1em From b9440309944a0d0dec377f2d1fe7671a0651076a Mon Sep 17 00:00:00 2001 From: summerscope Date: Fri, 19 Dec 2014 13:11:35 +1100 Subject: [PATCH 8/8] Add some logic for small screen layout --- app/assets/stylesheets/darkswarm/active_table_search.css.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass index 765759f26d..4d9f0d0e4e 100644 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.sass @@ -12,6 +12,8 @@ border: 1px solid $clr-blue-light @include border-radius(0.25em) margin-top: 2px + @media all and (max-width: 640px) + margin-bottom: 1em .row.filter-box.clear-filters background: transparent