From 532e27b7e18ebc7573c04e9af3aa9f4b2fb46417 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 13:32:11 +0200
Subject: [PATCH 01/49] Move filters into new column on desktop
---
.../templates/filter_selector.html.haml | 1 -
.../darkswarm/_shop-filters.css.scss | 25 ++-------
app/views/shop/products/_filters.html.haml | 8 +--
app/views/shop/products/_form.html.haml | 52 ++++++++++---------
config/locales/en.yml | 1 +
5 files changed, 37 insertions(+), 50 deletions(-)
diff --git a/app/assets/javascripts/templates/filter_selector.html.haml b/app/assets/javascripts/templates/filter_selector.html.haml
index cd4135ebee..742ace2a0e 100644
--- a/app/assets/javascripts/templates/filter_selector.html.haml
+++ b/app/assets/javascripts/templates/filter_selector.html.haml
@@ -1,4 +1,3 @@
%ul
%active-selector{ ng: { repeat: "selector in allSelectors", show: "ifDefined(selector.fits, true)" } }
- %render-svg{path: "{{selector.object.icon}}", ng: { if: "selector.object.icon"} }
%span{"ng-bind" => "::selector.object.name"}
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 16bca77cbc..2d8caf9a54 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -14,7 +14,7 @@
@include border-radius(0);
padding: 0;
- margin: 0 0 0.25rem 0.25rem;
+ margin: 0 0.25rem 0.25rem 0;
&:hover, &:focus {
background: transparent;
@@ -140,25 +140,6 @@
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;
-
- single-line-selectors {
- overflow-x: hidden;
- white-space: nowrap;
-
- .f-dropdown {
- overflow-x: auto;
- white-space: normal;
- }
- }
-
- ul {
- margin: 0;
- display: inline-block;
- }
-
- ul, ul li {
- list-style: none;
- }
}
// Shopfront taxons
@@ -170,4 +151,8 @@
&.property-selectors {
@include filter-selector(#666, #ccc, #777);
}
+
+ ul {
+ margin: 0;
+ }
}
diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml
index 100ccecc0a..f0e69d1985 100644
--- a/app/views/shop/products/_filters.html.haml
+++ b/app/views/shop/products/_filters.html.haml
@@ -1,5 +1,5 @@
-.filter-shopfront.taxon-selectors.text-right{ng: {show: 'supplied_taxons != null'}}
- %single-line-selectors{ selectors: "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
+.filter-shopfront.taxon-selectors{ng: {show: 'supplied_taxons != null'}}
+ %filter-selector{ 'selector-set' => "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
-.filter-shopfront.property-selectors.text-right{ng: {show: 'supplied_properties != null'}}
- %single-line-selectors{ selectors: "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}
+.filter-shopfront.property-selectors{ng: {show: 'supplied_properties != null'}}
+ %filter-selector{ 'selector-set' => "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 5e45c44fa1..7598c75568 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -19,36 +19,38 @@
= t :products_with
%span.applied-search "{{ query }}"
.row
- .small-12.medium-6.large-5.columns
+ .small-12.columns
%input#search.text{"ng-model" => "query",
placeholder: t(:products_search),
"ng-debounce" => "200",
"ofn-disable-enter" => true}
- .small-12.medium-6.large-6.large-offset-1.columns
- = render partial: "shop/products/filters"
-
.row
- %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
- %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
- = render "shop/products/summary"
- %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
+ .medium-12.large-10.columns
+ %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
+ %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
+ = render "shop/products/summary"
+ %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
- %product{"ng-show" => "Products.loading"}
- .row.summary
- .small-12.columns.text-center
- = t :products_loading
- .row
- .small-12.columns.text-center
- %img.spinner{ src: "/assets/spinning-circles.svg" }
+ %product{"ng-show" => "Products.loading"}
+ .row.summary
+ .small-12.columns.text-center
+ = t :products_loading
+ .row
+ .small-12.columns.text-center
+ %img.spinner{ src: "/assets/spinning-circles.svg" }
- %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
- .row.summary
- .small-12.columns
- %p.no-results
- = t :search_no_results_html, query: "{{query}}".html_safe
- .row
- .small-12.columns
- %form{action: main_app.cart_path}
- %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
- %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
+ %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
+ .row.summary
+ .small-12.columns
+ %p.no-results
+ = t :search_no_results_html, query: "{{query}}".html_safe
+ .row
+ .small-12.columns
+ %form{action: main_app.cart_path}
+ %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
+ %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
+
+ .hide-for-medium-down.large-2.columns
+ %h5= t(:products_filter_by)
+ = render partial: "shop/products/filters"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fa92cb72a1..83a6c95025 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1653,6 +1653,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_or: "OR"
products_with: with
products_search: "Search by product or producer"
+ products_filter_by: "Filter by"
products_loading: "Loading products..."
products_updating_cart: "Updating cart..."
products_cart_empty: "Cart empty"
From f46ca0c5956084bd5a028d8f580c8fc7587941ff Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 14:41:30 +0200
Subject: [PATCH 02/49] Move search to new searchbar
This required a lot of refactoring, as the search needed to be inside both the form element and the Angular ProductsCtrl element, but to get a full-width row for the searchbar it needed to be outside of the 12 column layout of the other shop page elements...
---
.../stylesheets/darkswarm/branding.css.scss | 3 +
.../stylesheets/darkswarm/shop.css.scss | 18 +++-
.../stylesheets/darkswarm/shop_tabs.css.scss | 2 +
app/views/shop/products/_form.html.haml | 95 +++++++++----------
app/views/shop/products/_searchbar.haml | 7 ++
5 files changed, 75 insertions(+), 50 deletions(-)
create mode 100644 app/views/shop/products/_searchbar.haml
diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss
index 8c34da12d4..de705bbfa3 100644
--- a/app/assets/stylesheets/darkswarm/branding.css.scss
+++ b/app/assets/stylesheets/darkswarm/branding.css.scss
@@ -43,6 +43,9 @@ $black: #000;
$white: #fff;
$grey-050: #f7f7f7;
+$grey-100: #e6e6e6;
+$grey-200: #ddd;
+$grey-300: #ccc;
$grey-400: #bbb;
$grey-500: #999;
$grey-600: #777;
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index cb7f86e216..b8a1905c76 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -12,9 +12,25 @@
@import "shop-popovers";
.darkswarm {
+ .shop-searchbar {
+ background-color: $grey-100;
+ height: 5em;
+ padding: 1em;
+ margin-bottom: 1em;
+ position: relative;
+ z-index: 5;
+
+ input#search {
+ height: 3.5em;
+ border-radius: 0.25em;
+ border: solid 1px $grey-300;
+ background-color: $white;
+ margin: 0;
+ }
+ }
+
products {
display: block;
- padding-top: 20px;
@media all and (max-width: 768px) {
input.button.right {
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index dce28ddde6..36f8695af8 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -8,6 +8,8 @@
.tab-buttons {
color: $dark-grey;
box-shadow: $distributor-header-shadow;
+ position: relative;
+ z-index: 10;
.columns {
display: flex;
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 7598c75568..7d7028578f 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -1,56 +1,53 @@
-.footer-pad.small-12.columns
+%form{action: main_app.cart_path}
%products{"ng-controller" => "ProductsCtrl", "ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }
- // TODO: Needs an ng-show to slide content down
- .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
- .small-12.columns
- .alert-box.search-alert.ng-scope
- %a.right{"ng-click" => "clearAll()"}
- = t :products_clear_all
- %i.ofn-i_009-close
- %span.filter-label
- = t :products_showing
- %span.applied-properties
- {{ appliedPropertiesList() }}
- %span.applied-taxons
- {{ appliedTaxonsList() }}
- %span{ ng: { hide: "!query"} }
- %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
- = t :products_with
- %span.applied-search "{{ query }}"
- .row
- .small-12.columns
- %input#search.text{"ng-model" => "query",
- placeholder: t(:products_search),
- "ng-debounce" => "200",
- "ofn-disable-enter" => true}
+ = render partial: "shop/products/searchbar"
.row
- .medium-12.large-10.columns
- %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
- %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
- = render "shop/products/summary"
- %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
+ .small-12.columns
+ .footer-pad.small-12.columns
+ .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
+ .small-12.columns
+ .alert-box.search-alert.ng-scope
+ %a.right{"ng-click" => "clearAll()"}
+ = t :products_clear_all
+ %i.ofn-i_009-close
+ %span.filter-label
+ = t :products_showing
+ %span.applied-properties
+ {{ appliedPropertiesList() }}
+ %span.applied-taxons
+ {{ appliedTaxonsList() }}
+ %span{ ng: { hide: "!query"} }
+ %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
+ = t :products_with
+ %span.applied-search "{{ query }}"
- %product{"ng-show" => "Products.loading"}
- .row.summary
- .small-12.columns.text-center
- = t :products_loading
- .row
- .small-12.columns.text-center
- %img.spinner{ src: "/assets/spinning-circles.svg" }
+ .row
+ .medium-12.large-10.columns
+ %div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
+ %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
+ = render "shop/products/summary"
+ %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
- %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
- .row.summary
- .small-12.columns
- %p.no-results
- = t :search_no_results_html, query: "{{query}}".html_safe
- .row
- .small-12.columns
- %form{action: main_app.cart_path}
- %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
- %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
+ %product{"ng-show" => "Products.loading"}
+ .row.summary
+ .small-12.columns.text-center
+ = t :products_loading
+ .row
+ .small-12.columns.text-center
+ %img.spinner{ src: "/assets/spinning-circles.svg" }
- .hide-for-medium-down.large-2.columns
- %h5= t(:products_filter_by)
- = render partial: "shop/products/filters"
+ %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
+ .row.summary
+ .small-12.columns
+ %p.no-results
+ = t :search_no_results_html, query: "{{query}}".html_safe
+ .row
+ .small-12.columns
+ %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
+ %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
+
+ .hide-for-medium-down.large-2.columns
+ %h5= t(:products_filter_by)
+ = render partial: "shop/products/filters"
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
new file mode 100644
index 0000000000..26cac7c95d
--- /dev/null
+++ b/app/views/shop/products/_searchbar.haml
@@ -0,0 +1,7 @@
+.shop-searchbar
+ .row
+ .small-5.columns
+ %input#search.text{"ng-model" => "query",
+ placeholder: t(:products_search),
+ "ng-debounce" => "200",
+ "ofn-disable-enter" => true}
From 0d9f049d24944f4904348deb223b9dc88e56a432 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 15:10:08 +0200
Subject: [PATCH 03/49] Add inner icon and restyle search input element
---
app/assets/images/icn-search-grey.png | Bin 0 -> 534 bytes
.../stylesheets/darkswarm/_shop-inputs.css.scss | 7 -------
app/assets/stylesheets/darkswarm/shop.css.scss | 11 +++++++++--
3 files changed, 9 insertions(+), 9 deletions(-)
create mode 100644 app/assets/images/icn-search-grey.png
diff --git a/app/assets/images/icn-search-grey.png b/app/assets/images/icn-search-grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..15af5ed712c5775c949cb4ccf05a7335215ff8b9
GIT binary patch
literal 534
zcmV+x0_pvUP)Px$&`Cr=R5%fplg~>6Q4q)5)$lJUOrnT_0zpOS$2lrG8Wa>kL_~)Ub?Fub9XfQZ
zQ$Za%7X1Z5p29!smSqWFnGT^JFY3DfuF#f*eg!vy
z-MHM7GM%iOrWFVTeiYg!v2D8~FkD%qOp4EHwc3+Tr~4GzCgCYV0yBo;Y|9;F0mj&2
zpS=F8PJ-mARBDC(B)jJk$~pVGd?Yl!03*D}E+R6gG8QjZDwT5pAG}*e&8Q}cCcE;!
zXT#
Date: Sun, 19 Apr 2020 15:59:23 +0200
Subject: [PATCH 04/49] Add filters count
---
.../darkswarm/controllers/products_controller.js.coffee | 3 +++
app/views/shop/products/_form.html.haml | 5 ++++-
config/locales/en.yml | 1 +
3 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 217118ee82..36aaa9a338 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -94,3 +94,6 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
$scope.Products.products = []
$scope.update_filters()
$scope.loadProducts()
+
+ $scope.filtersCount = () ->
+ $scope.taxonSelectors.totalActive() + $scope.propertySelectors.totalActive()
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 7d7028578f..1db1c3e340 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -49,5 +49,8 @@
%input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
.hide-for-medium-down.large-2.columns
- %h5= t(:products_filter_by)
+ %h5
+ = t(:products_filter_by)
+ %span{ng: {show: 'filtersCount()' }}
+ = "({{ filtersCount() }} #{t(:products_filter_selected)})"
= render partial: "shop/products/filters"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 83a6c95025..86be792153 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1654,6 +1654,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_with: with
products_search: "Search by product or producer"
products_filter_by: "Filter by"
+ products_filter_selected: "selected"
products_loading: "Loading products..."
products_updating_cart: "Updating cart..."
products_cart_empty: "Cart empty"
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 05/49] 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() }})
From 8e9833fd06dfe56a4809531cc905650d3866a8f0 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 17:08:19 +0200
Subject: [PATCH 06/49] Implement overlaid sidebar on mobile and tablet
---
.../controllers/products_controller.js.coffee | 4 +++
.../stylesheets/darkswarm/shop.css.scss | 35 +++++++++++++++++++
app/views/shop/products/_form.html.haml | 9 +++++
app/views/shop/products/_searchbar.haml | 2 +-
4 files changed, 49 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 36aaa9a338..51e02ac2b4 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/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
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 25ad072c0f..2eea3bde94 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/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;
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 1db1c3e340..2fb74db02f 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/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"
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index c9bb311ac0..aa4a2ff761 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/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() }})
From 7c00d41fc489e86fcb4ced6ae0ce90de855a1303 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 17:26:48 +0200
Subject: [PATCH 07/49] Add some animation effects
---
app/assets/stylesheets/darkswarm/shop.css.scss | 14 ++++++++++++++
app/views/shop/products/_form.html.haml | 4 ++--
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 2eea3bde94..c133f8590c 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -57,6 +57,12 @@
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.15);
+ opacity: 0;
+ transition: opacity 250ms ease-in-out 0s;
+
+ &.shown {
+ opacity: 1;
+ }
}
.sidebar {
@@ -66,15 +72,23 @@
z-index: 210;
height: 100%;
width: 45%;
+ margin-right: -45%;
background-color: rgba($white, 0.95);
padding: 1em;
+ transition: margin 250ms ease-in-out 0s;
+
+ &.shown {
+ margin-right: 0;
+ }
@media all and (max-width: 768px) {
width: 65%;
+ margin-right: -65%;
}
@media all and (max-width: 480px) {
width: 85%;
+ margin-right: -85%;
}
}
}
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 2fb74db02f..b98f308a53 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -56,8 +56,8 @@
= render partial: "shop/products/filters"
.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar'}}
- .background{ng: {click: 'toggleFilterSidebar()'}}
- .sidebar
+ .background{ng: {click: 'toggleFilterSidebar()', class: "{'shown': showFilterSidebar}"}}
+ .sidebar{ng: {class: "{'shown': showFilterSidebar}"}}
%h5
= t(:products_filter_by)
%span{ng: {show: 'filtersCount()' }}
From da1d8e90e27ddbebe108dfa5f481c5f1a19afa01 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 17:44:27 +0200
Subject: [PATCH 08/49] Update search placeholder
---
config/locales/en.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 86be792153..fad7962350 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1652,7 +1652,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_showing: "Showing:"
products_or: "OR"
products_with: with
- products_search: "Search by product or producer"
+ products_search: "Search..."
products_filter_by: "Filter by"
products_filter_selected: "selected"
products_loading: "Loading products..."
From 94145d0f7e7f889354a20494e578f18856f0643b Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 17:44:45 +0200
Subject: [PATCH 09/49] Improve layout and sizing on mobile
---
app/assets/stylesheets/darkswarm/shop.css.scss | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index c133f8590c..311fdf48e1 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -15,7 +15,7 @@
.shop-searchbar {
background-color: $grey-100;
height: 5em;
- padding: 1em;
+ padding: 1em 0;
margin-bottom: 1em;
position: relative;
z-index: 5;
@@ -41,6 +41,15 @@
height: 3em;
width: 7em;
padding: 0;
+ font-size: 1em;
+
+ @media all and (max-width: 480px) {
+ margin-left: 0.75em;
+ }
+ }
+
+ @media all and (max-width: 480px) {
+ font-size: 0.9em;
}
}
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 10/49] 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"
From e25e4e7482a3dda600c7e3041499a51571eabbc1 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sun, 19 Apr 2020 20:32:29 +0200
Subject: [PATCH 11/49] Fix issue with button submitting form instead of
opening popup
---
.../javascripts/templates/price_breakdown_button.html.haml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/templates/price_breakdown_button.html.haml b/app/assets/javascripts/templates/price_breakdown_button.html.haml
index 5eff1ef237..1aa104eaca 100644
--- a/app/assets/javascripts/templates/price_breakdown_button.html.haml
+++ b/app/assets/javascripts/templates/price_breakdown_button.html.haml
@@ -1,2 +1,2 @@
-%button.graph-button{"ng-class" => "{open: tt_isOpen}"}
+%button.graph-button{"ng-class" => "{open: tt_isOpen}", type: 'button'}
/ %i.ofn-i_058-graph
From f337fd49e153d452687bc668d09fa9abd2652f3b Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 09:08:10 +0200
Subject: [PATCH 12/49] Extract search feedback bar into partial and move into
main column
---
app/views/shop/products/_form.html.haml | 19 ++-----------------
app/views/shop/products/_search_feedback.haml | 16 ++++++++++++++++
2 files changed, 18 insertions(+), 17 deletions(-)
create mode 100644 app/views/shop/products/_search_feedback.haml
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 4b0311954f..e9beb73658 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -6,25 +6,10 @@
.row
.small-12.columns
.footer-pad.small-12.columns
- .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
- .small-12.columns
- .alert-box.search-alert.ng-scope
- %a.right{"ng-click" => "clearAll()"}
- = t :products_clear_all
- %i.ofn-i_009-close
- %span.filter-label
- = t :products_showing
- %span.applied-properties
- {{ appliedPropertiesList() }}
- %span.applied-taxons
- {{ appliedTaxonsList() }}
- %span{ ng: { hide: "!query"} }
- %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
- = t :products_with
- %span.applied-search "{{ query }}"
-
.row
.medium-12.large-10.columns
+ = render partial: "shop/products/search_feedback"
+
%div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
%product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
= render "shop/products/summary"
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
new file mode 100644
index 0000000000..3851f2704d
--- /dev/null
+++ b/app/views/shop/products/_search_feedback.haml
@@ -0,0 +1,16 @@
+.row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
+ .small-12.columns
+ .alert-box.search-alert.ng-scope
+ %a.right{"ng-click" => "clearAll()"}
+ = t :products_clear_all
+ %i.ofn-i_009-close
+ %span.filter-label
+ = t :products_showing
+ %span.applied-properties
+ {{ appliedPropertiesList() }}
+ %span.applied-taxons
+ {{ appliedTaxonsList() }}
+ %span{ ng: { hide: "!query"} }
+ %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
+ = t :products_with
+ %span.applied-search "{{ query }}"
From cbd77b4941fa2883a46f933af444b478b86794b9 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 09:19:09 +0200
Subject: [PATCH 13/49] Improve element sizing and position on small screens
---
app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 2 ++
app/assets/stylesheets/darkswarm/shop.css.scss | 1 +
2 files changed, 3 insertions(+)
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index 12bf494949..4d5714eefc 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -85,6 +85,7 @@ ordercycle {
@media all and (max-width: 480px) {
width: 100%;
+ min-width: 0;
}
}
@@ -99,6 +100,7 @@ ordercycle {
@media all and (max-width: 768px) {
float: none;
+ margin-right: 0;
}
@media all and (max-width: 480px) {
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 42748e48f1..8fd9a455b2 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -32,6 +32,7 @@ $sidebar-footer-height: 5em;
margin: 0;
padding: 0 1em 0 2.75em;
width: 100%;
+ min-width: 0;
background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
font-size: 1em;
From 035bde9effe9cb55b2d95e5181c8b9ed615967cc Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 15:00:17 +0200
Subject: [PATCH 14/49] Define breakpoints in mixin and refactor
---
.../darkswarm/_shop-inputs.css.scss | 16 +++++++-------
.../darkswarm/_shop-navigation.css.scss | 19 +++++++++--------
.../darkswarm/_shop-popovers.css.scss | 2 +-
.../darkswarm/_shop-product-rows.css.scss | 21 ++++++++++---------
.../darkswarm/_shop-product-thumb.css.scss | 5 +++--
.../darkswarm/_shop-taxon-flag.css.scss | 8 ++++---
.../darkswarm/active_table.css.scss | 6 +++---
.../darkswarm/active_table_search.css.scss | 2 +-
.../stylesheets/darkswarm/big-input.scss | 2 +-
.../stylesheets/darkswarm/checkout.css.scss | 4 ++--
.../darkswarm/distributor_header.css.scss | 5 +++--
.../darkswarm/embedded_shopfront.css.scss | 5 +++--
.../stylesheets/darkswarm/home_panes.css.scss | 6 +++---
.../stylesheets/darkswarm/hub_node.css.scss | 14 ++++++-------
.../stylesheets/darkswarm/images.css.scss | 4 ++--
app/assets/stylesheets/darkswarm/map.css.scss | 3 ++-
app/assets/stylesheets/darkswarm/mixins.scss | 17 ++++++++++++++-
.../darkswarm/modal-enterprises.css.scss | 4 ++--
.../stylesheets/darkswarm/page_alert.css.scss | 3 ++-
.../darkswarm/producer_node.css.scss | 4 ++--
.../stylesheets/darkswarm/shop.css.scss | 16 +++++++-------
.../stylesheets/darkswarm/shop_tabs.css.scss | 10 ++++-----
.../stylesheets/darkswarm/tabset.css.scss | 12 +++++------
.../stylesheets/darkswarm/taxons.css.scss | 2 +-
24 files changed, 107 insertions(+), 83 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss
index 9126dc56d7..59a3bd0c67 100644
--- a/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss
@@ -23,22 +23,22 @@
border-color: #b3b3b3;
text-align: right;
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
width: 8rem;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
width: 7rem;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
float: left !important;
font-size: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
width: 5.8rem;
}
@@ -62,15 +62,15 @@
input.bulk {
width: 5rem;
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
width: 4rem;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
width: 3.5rem;
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
width: 2.8rem;
}
}
@@ -86,7 +86,7 @@
.bulk-input-container {
float: right;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
float: left !important;
}
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index 4d5714eefc..2310e412f0 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import "typography";
ordercycle {
@@ -17,7 +18,7 @@ ordercycle {
margin-right: 0.3rem;
}
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
float: none;
padding: 0.5em 1em;
width: 100%;
@@ -33,7 +34,7 @@ ordercycle {
}
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
padding: 0.5em 1em 0.75em;
}
@@ -83,7 +84,7 @@ ordercycle {
border-radius: 0 0.25em 0.25em 0;
min-width: 13em;
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
width: 100%;
min-width: 0;
}
@@ -93,17 +94,17 @@ ordercycle {
color: $grey-700;
}
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
float: none;
margin-right: 1em;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
float: none;
margin-right: 0;
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
display: flex;
}
}
@@ -116,7 +117,7 @@ ordercycle {
padding: 0.5em 0;
span {
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
font-size: 0.875em;
}
}
@@ -150,7 +151,7 @@ shop ordercycle {
color: $white;
padding: 0 0 12px;
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
float: none;
display: inline-block;
padding: 0.2em 0 0;
@@ -158,7 +159,7 @@ shop ordercycle {
margin-right: 1em;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
float: none;
padding: 0 0 10px;
}
diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
index d233284767..dd5aa5a177 100644
--- a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
@@ -114,7 +114,7 @@ button.graph-button {
}
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
// Hide for small
display: none;
}
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss
index d98457cd73..b0ea1faf39 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import "branding";
@import "animations";
@@ -14,11 +15,11 @@
// outline: 1px solid red
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
font-size: 0.875rem;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
font-size: 0.75rem;
}
}
@@ -56,13 +57,13 @@
.variant-name {
padding-left: 7.9375rem;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
padding-left: 4.9375rem;
}
}
.variant-name {
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
background: #333;
color: white;
padding-left: 0.9375rem;
@@ -82,7 +83,7 @@
font-size: 0.875rem;
overflow: hidden;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
font-size: 0.75rem;
}
}
@@ -92,7 +93,7 @@
padding-left: 0.25rem;
padding-right: 0.25rem;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
text-align: right;
}
}
@@ -106,7 +107,7 @@
color: $med-drk-grey;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
background: #777;
color: $disabled-med;
@@ -132,7 +133,7 @@
padding-bottom: 1em;
line-height: 1;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
@@ -141,11 +142,11 @@
.summary-header {
padding-left: 7.9375rem;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
padding-left: 4.9375rem;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
padding-left: 0.9375rem;
}
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss
index 8a75467c9c..c9f8794295 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import "branding";
@import "animations";
@@ -56,7 +57,7 @@
}
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
top: 2px;
width: 4rem;
height: 4rem;
@@ -70,7 +71,7 @@
}
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
display: none;
width: 0rem;
height: 0rem;
diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
index 6a2c993600..e1b0d8ccbe 100644
--- a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
@@ -1,3 +1,5 @@
+@import "mixins";
+
.darkswarm {
products {
product {
@@ -10,7 +12,7 @@
padding-top: 0.25rem;
z-index: 999999;
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
background-size: 28px 32px;
min-height: 32px;
width: 28px;
@@ -27,11 +29,11 @@
}
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
margin-top: -0.85rem;
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
render-svg {
svg {
width: 18px;
diff --git a/app/assets/stylesheets/darkswarm/active_table.css.scss b/app/assets/stylesheets/darkswarm/active_table.css.scss
index 66dca7743b..395ad7c876 100644
--- a/app/assets/stylesheets/darkswarm/active_table.css.scss
+++ b/app/assets/stylesheets/darkswarm/active_table.css.scss
@@ -26,7 +26,7 @@
display: block;
border: 0;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
margin-bottom: 1rem;
}
@@ -45,7 +45,7 @@
}
// Generic text resize
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
&, & * {
font-size: 0.875rem;
}
@@ -114,7 +114,7 @@
.fat > div {
border-top: 1px solid #aaa;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
margin-top: 1em;
}
diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.scss b/app/assets/stylesheets/darkswarm/active_table_search.css.scss
index b934116cdc..1c26fcb74f 100644
--- a/app/assets/stylesheets/darkswarm/active_table_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/active_table_search.css.scss
@@ -16,7 +16,7 @@
margin-top: 2px;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
margin-bottom: 1em;
}
}
diff --git a/app/assets/stylesheets/darkswarm/big-input.scss b/app/assets/stylesheets/darkswarm/big-input.scss
index 7b9ecdac8d..10336e30c6 100644
--- a/app/assets/stylesheets/darkswarm/big-input.scss
+++ b/app/assets/stylesheets/darkswarm/big-input.scss
@@ -23,7 +23,7 @@
box-shadow: none;
color: $inputactv;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
font-size: 1.25rem;
}
diff --git a/app/assets/stylesheets/darkswarm/checkout.css.scss b/app/assets/stylesheets/darkswarm/checkout.css.scss
index 2e1a2a528c..df51d9de34 100644
--- a/app/assets/stylesheets/darkswarm/checkout.css.scss
+++ b/app/assets/stylesheets/darkswarm/checkout.css.scss
@@ -13,7 +13,7 @@
checkout {
display: block;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
&.row .row {
margin-left: 0;
margin-right: 0;
@@ -24,7 +24,7 @@ checkout {
.button, table {
width: 100%;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
form.edit_order {
border: 1px solid $disabled-bright;
margin-bottom: 2rem;
diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
index 8e3fdc2a9b..8e9ebf769b 100644
--- a/app/assets/stylesheets/darkswarm/distributor_header.css.scss
+++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import 'typography';
section {
@@ -34,7 +35,7 @@ section {
@include headingFont;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
location, location + small {
display: block;
}
@@ -44,7 +45,7 @@ section {
margin-top: 0;
padding-top: 0.45em;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
margin-bottom: 8px;
}
}
diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
index c1206ecc5e..210825a008 100644
--- a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
+++ b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import "typography";
$large-menu-height: 4.6875rem;
@@ -97,7 +98,7 @@ body.embedded {
display: none;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
nav.top-bar {
height: 3.4rem;
padding: 0.2rem $gutter-width;
@@ -141,7 +142,7 @@ body.embedded {
}
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
ul.left li.powered-by span {
display: none;
}
diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.scss b/app/assets/stylesheets/darkswarm/home_panes.css.scss
index 92053189e2..60f881462d 100644
--- a/app/assets/stylesheets/darkswarm/home_panes.css.scss
+++ b/app/assets/stylesheets/darkswarm/home_panes.css.scss
@@ -66,7 +66,7 @@
font-weight: 300;
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
h2 {
font-size: 52px;
}
@@ -87,7 +87,7 @@
padding-bottom: 0;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.row .row {
padding: 0;
}
@@ -139,7 +139,7 @@
font-weight: 300;
color: $brand-colour;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
font-size: 45px;
}
}
diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.scss b/app/assets/stylesheets/darkswarm/hub_node.css.scss
index cf0ae9ca46..f7e1ac5686 100644
--- a/app/assets/stylesheets/darkswarm/hub_node.css.scss
+++ b/app/assets/stylesheets/darkswarm/hub_node.css.scss
@@ -45,7 +45,7 @@
}
//Hub Link
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
a.hub {
display: block;
}
@@ -67,7 +67,7 @@
.active_table_row {
border: 1px solid transparent;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
border-color: $clr-brick-light;
}
@@ -85,7 +85,7 @@
}
&.open, &.closed {
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.active_table_row:first-child .skinny-head {
background-color: $clr-brick-light;
@@ -164,7 +164,7 @@
}
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.active_table_row:first-child .skinny-head {
background-color: rgba(255, 255, 255, 0.85);
}
@@ -218,7 +218,7 @@
}
// Small devices
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.active_table_row:first-child .skinny-head {
background-color: $disabled-bright;
}
@@ -226,7 +226,7 @@
}
// Small devices
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.active_table_row, .active_table_row:first-child, .active_table_row:last-child {
border-color: $disabled-bright;
background-color: transparent;
@@ -253,7 +253,7 @@
cursor: auto;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
border-color: transparent;
}
}
diff --git a/app/assets/stylesheets/darkswarm/images.css.scss b/app/assets/stylesheets/darkswarm/images.css.scss
index 2a9f931f6e..cd939e3b42 100644
--- a/app/assets/stylesheets/darkswarm/images.css.scss
+++ b/app/assets/stylesheets/darkswarm/images.css.scss
@@ -13,7 +13,7 @@
&.placeholder {
opacity: 0.35;
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
display: none;
}
}
@@ -31,7 +31,7 @@
max-height: 260px;
overflow: hidden;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
min-height: 68px;
}
}
diff --git a/app/assets/stylesheets/darkswarm/map.css.scss b/app/assets/stylesheets/darkswarm/map.css.scss
index d880b3025b..b0df5b66da 100644
--- a/app/assets/stylesheets/darkswarm/map.css.scss
+++ b/app/assets/stylesheets/darkswarm/map.css.scss
@@ -1,6 +1,7 @@
// Place all the styles related to the map controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
+@import "mixins";
@import "big-input";
.map-container {
@@ -29,7 +30,7 @@
margin-top: 1.2rem;
margin-left: 1rem;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
width: 80%;
}
diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/assets/stylesheets/darkswarm/mixins.scss
index 0643294c0c..2b38d89dea 100644
--- a/app/assets/stylesheets/darkswarm/mixins.scss
+++ b/app/assets/stylesheets/darkswarm/mixins.scss
@@ -16,7 +16,7 @@
padding-top: 100px;
padding-bottom: 100px;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
padding-top: 25px;
}
}
@@ -255,3 +255,18 @@
background-repeat: no-repeat;
background-size: 922px 922px;
}
+
+@mixin breakpoint($point) {
+ @if $point == desktop {
+ @media all and (max-width: 1024px) { @content; }
+ }
+ @else if $point == tablet {
+ @media all and (max-width: 768px) { @content; }
+ }
+ @else if $point == phablet {
+ @media all and (max-width: 640px) { @content; }
+ }
+ @else if $point == mobile {
+ @media all and (max-width: 480px) { @content; }
+ }
+}
diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
index 5d356028f8..0f52ab8b79 100644
--- a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
+++ b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
@@ -57,7 +57,7 @@
p {
line-height: 2.4;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
line-height: 1.4;
}
}
@@ -193,7 +193,7 @@
display: inline-block;
border-bottom: 1px solid transparent;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
display: none;
}
}
diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss
index 59ccf327d0..4be82c8c2e 100644
--- a/app/assets/stylesheets/darkswarm/page_alert.css.scss
+++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss
@@ -1,3 +1,4 @@
+@import "mixins";
@import "branding";
@import "animations";
@import "compass/css3/transition";
@@ -19,7 +20,7 @@ $page-alert-height: 55px;
margin: 0;
h6 {
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
font-size: 10px;
line-height: 24px;
}
diff --git a/app/assets/stylesheets/darkswarm/producer_node.css.scss b/app/assets/stylesheets/darkswarm/producer_node.css.scss
index 770a76564f..707c5d903b 100644
--- a/app/assets/stylesheets/darkswarm/producer_node.css.scss
+++ b/app/assets/stylesheets/darkswarm/producer_node.css.scss
@@ -4,7 +4,7 @@
.producers {
.active_table .active_table_node {
// Header row
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
.skinny-head {
background-color: $clr-turquoise-light;
@@ -137,7 +137,7 @@
.active_table_row.closed {
border: 1px solid transparent;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
border-color: $clr-turquoise-light;
}
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 8fd9a455b2..23b6502866 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -49,12 +49,12 @@ $sidebar-footer-height: 5em;
padding: 0;
font-size: 1em;
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
margin-left: 0.75em;
}
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
font-size: 0.9em;
}
}
@@ -133,14 +133,14 @@ $sidebar-footer-height: 5em;
}
}
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
.sidebar, .sidebar-footer {
width: $sidebar-medium-width;
margin-right: -$sidebar-medium-width;
}
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
.sidebar, .sidebar-footer {
width: $sidebar-small-width;
margin-right: -$sidebar-small-width;
@@ -151,13 +151,13 @@ $sidebar-footer-height: 5em;
products {
display: block;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
input.button.right {
float: left;
}
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
.add_to_cart {
margin-top: 2rem;
}
@@ -204,7 +204,7 @@ $sidebar-footer-height: 5em;
.bulk-buy {
font-size: 0.875rem;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
font-size: 0.75rem;
}
}
@@ -227,7 +227,7 @@ $sidebar-footer-height: 5em;
font-size: 0.75em;
padding-right: 0.9375rem;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
padding-right: 0.25rem;
}
}
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index 36f8695af8..66bbb8998e 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -14,12 +14,12 @@
.columns {
display: flex;
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
display: table;
width: 100%;
}
- @media all and (max-width: 480px) {
+ @include breakpoint(mobile) {
padding: 0;
}
}
@@ -56,7 +56,7 @@
background: none;
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
padding: 0.35em 0 0.65em 0;
}
}
@@ -69,7 +69,7 @@
}
}
- @media all and (max-width: 1024px) {
+ @include breakpoint(desktop) {
display: table-cell;
width: auto;
}
@@ -106,7 +106,7 @@
p {
max-width: 100%;
- @media all and (max-width: 768px) {
+ @include breakpoint(tablet) {
height: auto !important;
}
}
diff --git a/app/assets/stylesheets/darkswarm/tabset.css.scss b/app/assets/stylesheets/darkswarm/tabset.css.scss
index c100bff672..4f4ab3c7b9 100644
--- a/app/assets/stylesheets/darkswarm/tabset.css.scss
+++ b/app/assets/stylesheets/darkswarm/tabset.css.scss
@@ -10,7 +10,7 @@
.tab {
text-align: center;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
text-align: left;
}
@@ -24,7 +24,7 @@
padding: 1em;
border: none;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
padding: 0.35em 0 0.65em 0;
text-shadow: none;
}
@@ -37,7 +37,7 @@
border-bottom: 4px solid $clr-brick-bright;
cursor: pointer;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
transition: none;
color: white;
background-color: $clr-brick-bright;
@@ -46,7 +46,7 @@
a {
color: $clr-brick-bright;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
color: #ffffff;
}
}
@@ -55,14 +55,14 @@
&.selected {
border-bottom: 4px solid $clr-brick;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
background-color: $clr-brick;
}
a {
color: $clr-brick;
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
color: #ffffff;
}
}
diff --git a/app/assets/stylesheets/darkswarm/taxons.css.scss b/app/assets/stylesheets/darkswarm/taxons.css.scss
index a5db89b324..006e15de58 100644
--- a/app/assets/stylesheets/darkswarm/taxons.css.scss
+++ b/app/assets/stylesheets/darkswarm/taxons.css.scss
@@ -57,7 +57,7 @@
}
}
- @media all and (max-width: 640px) {
+ @include breakpoint(phablet) {
render-svg {
svg {
width: 24px;
From d1ea2c5f7785427ea7f992912d9259c603aaa2ee Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 11:40:01 +0200
Subject: [PATCH 15/49] Extract shop searchbar styles to separate file
---
.../stylesheets/darkswarm/shop.css.scss | 42 ------------------
.../darkswarm/shop_search.css.scss | 44 +++++++++++++++++++
2 files changed, 44 insertions(+), 42 deletions(-)
create mode 100644 app/assets/stylesheets/darkswarm/shop_search.css.scss
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 23b6502866..d17c0befab 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -17,48 +17,6 @@ $sidebar-large-width: 45%;
$sidebar-footer-height: 5em;
.darkswarm {
- .shop-searchbar {
- background-color: $grey-100;
- height: 5em;
- padding: 1em 0;
- margin-bottom: 1em;
- position: relative;
- z-index: 5;
-
- input#search {
- height: 3em;
- border-radius: 0.25em;
- border: solid 1px $grey-300;
- margin: 0;
- padding: 0 1em 0 2.75em;
- width: 100%;
- min-width: 0;
- background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
- font-size: 1em;
-
- &::placeholder {
- font-style: italic;
- }
- }
-
- button {
- background-color: $grey-600;
- margin-left: 1em;
- height: 3em;
- width: 7em;
- padding: 0;
- font-size: 1em;
-
- @include breakpoint(mobile) {
- margin-left: 0.75em;
- }
- }
-
- @include breakpoint(mobile) {
- font-size: 0.9em;
- }
- }
-
.shop-filters-sidebar {
display: flex;
flex-direction: column;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
new file mode 100644
index 0000000000..9db17086e9
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -0,0 +1,44 @@
+@import "mixins";
+@import "branding";
+
+.shop-searchbar {
+ background-color: $grey-100;
+ height: 5em;
+ padding: 1em 0;
+ margin-bottom: 1em;
+ position: relative;
+ z-index: 5;
+
+ input#search {
+ height: 3em;
+ border-radius: 0.25em;
+ border: solid 1px $grey-300;
+ margin: 0;
+ padding: 0 1em 0 2.75em;
+ width: 100%;
+ min-width: 0;
+ background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
+ font-size: 1rem; // avoid zoom on iphone, see issue #4535
+
+ &::placeholder {
+ font-style: italic;
+ }
+ }
+
+ button {
+ background-color: $grey-600;
+ margin-left: 1em;
+ height: 3em;
+ width: 7em;
+ padding: 0;
+ font-size: 1em;
+
+ @include breakpoint(mobile) {
+ margin-left: 0.75em;
+ }
+ }
+
+ @include breakpoint(mobile) {
+ font-size: 0.9em;
+ }
+}
From 9eaf55f4c09bcf6ad84c84e5c0b142a1505c97c5 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 11:42:49 +0200
Subject: [PATCH 16/49] Add missing translation key
---
app/views/shop/products/_searchbar.haml | 2 +-
config/locales/en.yml | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index aa4a2ff761..c74be2b14a 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -8,6 +8,6 @@
.hide-for-large-up
%button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
- Filters
+ = t(:products_filter_heading)
%span{ng: {show: 'filtersCount()' }}
({{ filtersCount() }})
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ca2d5ad360..691d9d8006 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1655,6 +1655,7 @@ 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_heading: "Filters"
products_filter_clear: "Clear"
products_filter_done: "Done"
products_loading: "Loading products..."
From ebe00bdc314cb3387e6d71a0573fd20cd56eca15 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 11:45:38 +0200
Subject: [PATCH 17/49] Update filters clear button functionality
---
.../darkswarm/controllers/products_controller.js.coffee | 3 +++
app/views/shop/products/_form.html.haml | 2 +-
2 files changed, 4 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 51e02ac2b4..b1004b132d 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -85,6 +85,9 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
$scope.clearAll = ->
$scope.query = ""
+ $scope.clearFilters()
+
+ $scope.clearFilters = ->
$scope.taxonSelectors.clearAll()
$scope.propertySelectors.clearAll()
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index e9beb73658..a91ea0cb7a 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -52,7 +52,7 @@
= render partial: "shop/products/filters"
.sidebar-footer
- %button{type: 'button', ng: {click: 'clearAll() && toggleFilterSidebar()'}}
+ %button{type: 'button', ng: {click: 'clearFilters()'}}
= t(:products_filter_clear)
%button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
= t(:products_filter_done)
From 865dcf79cbd38796958135fcdabb139e7fd1b39a Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Thu, 23 Apr 2020 09:47:33 +0200
Subject: [PATCH 18/49] Extract some properties to variables
---
.../stylesheets/darkswarm/_shop-navigation.css.scss | 9 +++++----
app/assets/stylesheets/darkswarm/account.css.scss | 3 ++-
app/assets/stylesheets/darkswarm/shop.css.scss | 10 +++++-----
app/assets/stylesheets/darkswarm/shop_search.css.scss | 3 ++-
app/assets/stylesheets/darkswarm/variables.css.scss | 6 ++++++
5 files changed, 20 insertions(+), 11 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index 2310e412f0..95bd6b1059 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -1,12 +1,13 @@
@import "mixins";
@import "typography";
+@import "variables";
ordercycle {
float: right;
background: $grey-050;
color: $grey-800;
width: 100%;
- border-radius: 0.5em 0.5em 0 0;
+ border-radius: $radius-medium $radius-medium 0 0;
margin-top: 1em;
padding: 1em 1.25em 0;
@@ -42,12 +43,12 @@ ordercycle {
border: 1px solid $teal-300;
display: inline-block;
font-size: 1em;
- border-radius: 0.25em;
+ border-radius: $radius-small;
.select-label {
background-color: rgba($teal-300, 0.5);
display: inline-block;
- border-radius: 0.25em 0 0 0.25em;
+ border-radius: $radius-small 0 0 $radius-small;
float: left;
font-size: 1em;
line-height: 1.3em;
@@ -81,7 +82,7 @@ ordercycle {
padding: 0.5em 1.25em 0.5em 0.75em;
height: 2.35em;
background-size: 30px auto;
- border-radius: 0 0.25em 0.25em 0;
+ border-radius: 0 $radius-small $radius-small 0;
min-width: 13em;
@include breakpoint(mobile) {
diff --git a/app/assets/stylesheets/darkswarm/account.css.scss b/app/assets/stylesheets/darkswarm/account.css.scss
index 44d93b4cd1..bb6701f15d 100644
--- a/app/assets/stylesheets/darkswarm/account.css.scss
+++ b/app/assets/stylesheets/darkswarm/account.css.scss
@@ -1,5 +1,6 @@
@import "branding";
@import "mixins";
+@import "variables";
.account-summary {
color: #4a4a4a;
@@ -99,7 +100,7 @@
table {
width: 100%;
- border-radius: 0.5em 0.5em 0 0;
+ border-radius: $radius-medium $radius-medium 0 0;
tr:nth-of-type(even) {
background: transparent;
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index d17c0befab..d6a8090333 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -29,9 +29,9 @@ $sidebar-footer-height: 5em;
z-index: 200;
height: 100%;
width: 100%;
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: $shop-sidebar-overlay;
opacity: 0;
- transition: opacity 250ms ease-in-out 0s;
+ transition: opacity $transition-sidebar;
}
&.shown {
@@ -54,7 +54,7 @@ $sidebar-footer-height: 5em;
margin-right: -$sidebar-large-width;
background-color: rgba($white, 0.95);
padding: 1em;
- transition: margin 250ms ease-in-out 0s;
+ transition: margin $transition-sidebar;
overflow-y: scroll;
.property-selectors {
@@ -70,7 +70,7 @@ $sidebar-footer-height: 5em;
position: fixed;
bottom: 0;
right: 0;
- transition: margin 250ms ease-in-out 0s;
+ transition: margin $transition-sidebar;
padding: 1em;
button {
@@ -78,7 +78,7 @@ $sidebar-footer-height: 5em;
background-color: $grey-800;
color: $white;
border: 1px solid $grey-600;
- border-radius: 0.5em;
+ border-radius: $radius-medium;
width: 47%;
margin: 0;
padding: 0;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index 9db17086e9..f800fdaf00 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -1,5 +1,6 @@
@import "mixins";
@import "branding";
+@import "variables";
.shop-searchbar {
background-color: $grey-100;
@@ -11,7 +12,7 @@
input#search {
height: 3em;
- border-radius: 0.25em;
+ border-radius: $radius-small;
border: solid 1px $grey-300;
margin: 0;
padding: 0 1em 0 2.75em;
diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss
index 0b8104cea1..29b4d14562 100644
--- a/app/assets/stylesheets/darkswarm/variables.css.scss
+++ b/app/assets/stylesheets/darkswarm/variables.css.scss
@@ -30,3 +30,9 @@ $topbar-dropdown-link-color: $black;
$topbar-dropdown-bg: $white;
$topbar-dropdown-link-bg: $white;
$topbar-dropdown-link-bg-hover: $white;
+
+$radius-small: 0.25em;
+$radius-medium: 0.5em;
+
+$shop-sidebar-overlay: rgba(0, 0, 0, 0.15);
+$transition-sidebar: 250ms ease-in-out 0s;
From cbb67e15ed7e0556a23d16b48bda25018a5a8a0f Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 27 Apr 2020 12:14:11 +0200
Subject: [PATCH 19/49] Extract button styles
---
.../stylesheets/darkswarm/shop.css.scss | 15 +-------------
app/assets/stylesheets/darkswarm/ui.css.scss | 20 +++++++++++++++++++
app/views/shop/products/_form.html.haml | 4 ++--
3 files changed, 23 insertions(+), 16 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index d6a8090333..4afb254dd2 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -74,20 +74,7 @@ $sidebar-footer-height: 5em;
padding: 1em;
button {
- height: 3em;
- background-color: $grey-800;
- color: $white;
- border: 1px solid $grey-600;
- border-radius: $radius-medium;
- width: 47%;
- margin: 0;
- padding: 0;
-
- &.done {
- background-color: $orange-500;
- border: none;
- margin-left: 3%;
- }
+ width: 48%;
}
}
diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss
index 35400362bb..e30f238aa5 100644
--- a/app/assets/stylesheets/darkswarm/ui.css.scss
+++ b/app/assets/stylesheets/darkswarm/ui.css.scss
@@ -2,6 +2,7 @@
@import "branding";
@import "mixins";
@import "typography";
+@import "variables";
// Button class extensions
@@ -123,6 +124,25 @@ button.success, .button.success {
}
}
+button.large {
+ height: 3em;
+ font-size: 1em;
+ color: $white;
+ border-radius: $radius-medium;
+ margin: 0;
+ padding: 0;
+
+ &.dark {
+ background-color: $grey-800;
+ border: 1px solid $grey-600;
+ }
+
+ &.bright {
+ background-color: $orange-500;
+ border: none;
+ }
+}
+
// Responsive
@media screen and (min-width: 768px) {
[role="main"] {
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index a91ea0cb7a..9e373ec50a 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -52,7 +52,7 @@
= render partial: "shop/products/filters"
.sidebar-footer
- %button{type: 'button', ng: {click: 'clearFilters()'}}
+ %button.large.dark.left{type: 'button', ng: {click: 'clearFilters()'}}
= t(:products_filter_clear)
- %button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+ %button.large.bright.right{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
= t(:products_filter_done)
From f24969edb10ae5b334f053c5e705f155c940d549 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 09:39:16 +0200
Subject: [PATCH 20/49] Remove gutter padding on shop content to gain a bit
more horizontal real-estate
---
app/assets/stylesheets/darkswarm/ui.css.scss | 5 +++++
app/views/shop/products/_form.html.haml | 2 +-
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss
index e30f238aa5..66d72d6511 100644
--- a/app/assets/stylesheets/darkswarm/ui.css.scss
+++ b/app/assets/stylesheets/darkswarm/ui.css.scss
@@ -153,3 +153,8 @@ button.large {
.flex {
display: flex;
}
+
+.no-gutter {
+ padding-right: 0;
+ padding-left: 0;
+}
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 9e373ec50a..8a27ead0a6 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -5,7 +5,7 @@
.row
.small-12.columns
- .footer-pad.small-12.columns
+ .footer-pad.small-12.columns.no-gutter
.row
.medium-12.large-10.columns
= render partial: "shop/products/search_feedback"
From ff69389bb0e04e46f0f72fb6d86ab50053c0f71b Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 13:40:42 +0200
Subject: [PATCH 21/49] Make search bar "sticky" for tablets and mobile
---
app/assets/stylesheets/darkswarm/menu.css.scss | 6 +++++-
app/assets/stylesheets/darkswarm/shop_search.css.scss | 6 ++++++
app/assets/stylesheets/darkswarm/variables.css.scss | 2 ++
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss
index 23c2c8ae68..abefec7a23 100644
--- a/app/assets/stylesheets/darkswarm/menu.css.scss
+++ b/app/assets/stylesheets/darkswarm/menu.css.scss
@@ -171,7 +171,7 @@ nav.top-bar {
.tab-bar {
background-color: white;
border-bottom: 1px solid $light-grey-transparency;
- height: 2.8em;
+ height: $mobile-nav-height;
position: fixed;
width: 100%;
z-index: 1;
@@ -210,6 +210,10 @@ nav.top-bar {
}
}
+.off-canvas-wrap {
+ overflow: inherit;
+}
+
.off-canvas-list li.language-switcher ul li {
list-style-type: none;
padding-left: 0.5em;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index f800fdaf00..fdf45329ad 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -39,6 +39,12 @@
}
}
+ @include breakpoint(desktop) {
+ position: -webkit-sticky;
+ position: sticky;
+ top: $mobile-nav-height;
+ }
+
@include breakpoint(mobile) {
font-size: 0.9em;
}
diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss
index 29b4d14562..216e7f68ee 100644
--- a/app/assets/stylesheets/darkswarm/variables.css.scss
+++ b/app/assets/stylesheets/darkswarm/variables.css.scss
@@ -31,6 +31,8 @@ $topbar-dropdown-bg: $white;
$topbar-dropdown-link-bg: $white;
$topbar-dropdown-link-bg-hover: $white;
+$mobile-nav-height: 2.8em;
+
$radius-small: 0.25em;
$radius-medium: 0.5em;
From 026b98022ca3052a36f830ae3091ffac0085bbed Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 14:00:27 +0200
Subject: [PATCH 22/49] Add clear search button in shop searchbar
---
app/assets/images/icn-close.png | Bin 0 -> 540 bytes
.../controllers/products_controller.js.coffee | 5 ++++-
.../stylesheets/darkswarm/shop_search.css.scss | 13 +++++++++++++
app/views/shop/products/_searchbar.haml | 11 +++++++----
4 files changed, 24 insertions(+), 5 deletions(-)
create mode 100644 app/assets/images/icn-close.png
diff --git a/app/assets/images/icn-close.png b/app/assets/images/icn-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef99bffec3400901080a7fe2c1a32948ce54123
GIT binary patch
literal 540
zcmV+%0^|LOP)Px$)=5M`R5%f>RoiO9KoFgTMo<(*#6S^5s*%2GKE(E4Ed7Ln|I+#)(btk-UhAv(
z3jyt%Z8n%>TU+bEW_M?2&d!RbQkU{kEc>KbB|J2~zm_Y}fPUo5X18i@k!zEzw
zMF8xJ;S)Y0!jR@G6qgD|_z3!1Sb%p1igIQc24%BZS}vD}Ahkz6pQj)QXusc|uK7H<
z2W3<<0)s`pUZ-NQNUPO~JkN`PHX02om&-Jt&uKE5z+4J2dOAK*BYPMkx?C?ubAZaCfVLceV=mM>8{s-B1(ZQ^v)PE8qVkqyArhrM
zun-~cW=d+cngB!oKvU8`1L^<}7d`W#@
zl}d%C)2T9V*laeNDG&D5ub!x~xP$y^C@B0&#YGy(XDm84;S=;{P=LW#?wqRs)gD;6
e1N#5`0zLtKr19q*Qh43~0000
- $scope.query = ""
+ $scope.clearQuery()
$scope.clearFilters()
+ $scope.clearQuery = ->
+ $scope.query = ""
+
$scope.clearFilters = ->
$scope.taxonSelectors.clearAll()
$scope.propertySelectors.clearAll()
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index fdf45329ad..0822e5ba3c 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -10,6 +10,19 @@
position: relative;
z-index: 5;
+ .search-wrap {
+ position: relative;
+ width: 100%;
+
+ .clear {
+ height: 1em;
+ width: 1em;
+ margin-top: 1em;
+ position: absolute;
+ right: 1em;
+ }
+ }
+
input#search {
height: 3em;
border-radius: $radius-small;
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index c74be2b14a..2ca6f32cb0 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -1,10 +1,13 @@
.shop-searchbar
.row
.small-12.large-5.columns.flex
- %input#search.text{"ng-model" => "query",
- placeholder: t(:products_search),
- "ng-debounce" => "200",
- "ofn-disable-enter" => true}
+ %div.search-wrap
+ %input#search.text{"ng-model" => "query",
+ placeholder: t(:products_search),
+ "ng-debounce" => "200",
+ "ofn-disable-enter" => true}
+ %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}}
+ %img{ src: "/assets/icn-close.png" }
.hide-for-large-up
%button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
From c9bfccf465bcd383855bf7d79fb26f000b8aaef2 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 09:58:13 +0200
Subject: [PATCH 23/49] Update styling on search feedback bar
---
.../darkswarm/_shop-filters.css.scss | 39 ++++++++++++-------
app/views/shop/products/_search_feedback.haml | 9 +++--
config/locales/en.yml | 3 +-
3 files changed, 32 insertions(+), 19 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 2d8caf9a54..7916beb48a 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -107,26 +107,37 @@
// Alert when search, taxon, filter is triggered
.alert-box.search-alert {
- background-color: $clr-yellow-light;
- border-color: $clr-yellow-light;
+ background-color: $white;
color: #777;
- font-size: 0.75rem;
- padding: 0.5rem 0.75rem;
+ font-size: 1em;
+ padding: 0.35em 0 0;
+ border: 0;
+ margin: 0;
- span.applied-properties {
- color: #333;
+ .clear-all {
+ color: $grey-500;
+
+ &:hover {
+ color: $grey-600;
+ }
}
- span.applied-taxons {
- color: $clr-blue;
- }
+ span {
+ color: $grey-800;
+ font-style: italic;
- span.applied-search {
- color: $clr-brick;
- }
+ &.applied-properties {
+ color: $grey-800;
+ }
- span.filter-label {
- opacity: 0.75;
+ &.applied-taxons {
+ color: $clr-blue;
+ }
+
+ &.applied-search {
+ font-weight: bold;
+ color: $teal-500;
+ }
}
}
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 3851f2704d..ee3ade69a5 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -1,11 +1,11 @@
.row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
.small-12.columns
.alert-box.search-alert.ng-scope
- %a.right{"ng-click" => "clearAll()"}
- = t :products_clear_all
+ %a.clear-all.right{"ng-click" => "clearAll()"}
+ = t :products_clear
%i.ofn-i_009-close
%span.filter-label
- = t :products_showing
+ = t :products_results_for
%span.applied-properties
{{ appliedPropertiesList() }}
%span.applied-taxons
@@ -13,4 +13,5 @@
%span{ ng: { hide: "!query"} }
%span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
= t :products_with
- %span.applied-search "{{ query }}"
+ %span.applied-search
+ {{ query }}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 691d9d8006..4136241786 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1648,8 +1648,9 @@ See the %{link} to find out more about %{sitename}'s features and to start using
other: You have %{count} orders with %{shop} currently open for review. You can make changes until %{oc_close}.
orders_changeable_orders_alert_html: This order has been confirmed, but you can make changes until %{oc_close}.
- products_clear_all: Clear all
+ products_clear: Clear
products_showing: "Showing:"
+ products_results_for: "Results for"
products_or: "OR"
products_with: with
products_search: "Search..."
From 4b695014e450a51104c937a6aebe07bdd2414c73 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 11:20:40 +0200
Subject: [PATCH 24/49] Update "no results" styling
---
.../darkswarm/_shop-filters.css.scss | 18 +++++++++
app/views/shop/products/_form.html.haml | 10 -----
app/views/shop/products/_search_feedback.haml | 37 ++++++++++++-------
config/locales/en.yml | 2 +
4 files changed, 43 insertions(+), 24 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 7916beb48a..52659773b3 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -122,6 +122,24 @@
}
}
+ .no-results {
+ color: $grey-800;
+ font-style: italic;
+ font-size: 1.25em;
+ }
+
+ .clear-search {
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+ color: $orange-500;
+ font-size: 1.25em;
+
+ &:hover {
+ color: $orange-400;
+ }
+ }
+
span {
color: $grey-800;
font-style: italic;
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 8a27ead0a6..c4e6ea6908 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -23,16 +23,6 @@
.small-12.columns.text-center
%img.spinner{ src: "/assets/spinning-circles.svg" }
- %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
- .row.summary
- .small-12.columns
- %p.no-results
- = t :search_no_results_html, query: "{{query}}".html_safe
- .row
- .small-12.columns
- %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
- %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
-
.hide-for-medium-down.large-2.columns
%h5
= t(:products_filter_by)
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index ee3ade69a5..9b5816a41d 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -1,17 +1,26 @@
.row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
.small-12.columns
.alert-box.search-alert.ng-scope
- %a.clear-all.right{"ng-click" => "clearAll()"}
- = t :products_clear
- %i.ofn-i_009-close
- %span.filter-label
- = t :products_results_for
- %span.applied-properties
- {{ appliedPropertiesList() }}
- %span.applied-taxons
- {{ appliedTaxonsList() }}
- %span{ ng: { hide: "!query"} }
- %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
- = t :products_with
- %span.applied-search
- {{ query }}
+ %div{"ng-show" => "Products.products.length > 0"}
+ %a.clear-all.right{"ng-click" => "clearAll()"}
+ = t :products_clear
+ %i.ofn-i_009-close
+ %span.filter-label
+ = t :products_results_for
+ %span.applied-properties
+ {{ appliedPropertiesList() }}
+ %span.applied-taxons
+ {{ appliedTaxonsList() }}
+ %span{ ng: { hide: "!query"} }
+ %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
+ = t :products_with
+ %span.applied-search
+ {{ query }}
+
+ %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
+ .row.summary
+ .small-12.columns
+ %p.no-results
+ = t :products_no_results_html, query: "{{query}}".html_safe
+ %button.clear-search{type: 'button', ng: {click: 'clearAll()'}}
+ = t :products_clear_search
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4136241786..5802486794 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1669,6 +1669,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_update_error_msg: "Saving failed."
products_update_error_data: "Save failed due to invalid data:"
products_changes_saved: "Changes saved."
+ products_no_results_html: "Sorry, no results found for %{query}."
+ products_clear_search: "Clear search"
search_no_results_html: "Sorry, no results found for %{query}. Try another search?"
From 6b66787004c111d871539ce88855d079738154b2 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 11:26:26 +0200
Subject: [PATCH 25/49] Update "no results" layout on mobile and tablet
---
app/assets/stylesheets/darkswarm/_shop-filters.css.scss | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 52659773b3..c84f5d95c6 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -2,6 +2,7 @@
@import "branding";
@import "big-input";
@import "animations";
+@import "variables";
@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
&.inline-block, ul.inline-block {
@@ -156,6 +157,14 @@
font-weight: bold;
color: $teal-500;
}
+
+ &.filter-label {
+ float: left;
+ }
+ }
+
+ @include breakpoint(desktop) {
+ text-align: center;
}
}
From 14d928c39dda1a5403cc43810d794ba2c263a535 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 14:40:56 +0200
Subject: [PATCH 26/49] Fix feature specs where UI has changed
---
app/views/shared/menu/_joyride.html.haml | 2 +-
spec/features/consumer/shopping/cart_spec.rb | 2 +-
.../shopping/embedded_shopfronts_spec.rb | 15 +++------------
.../consumer/shopping/variant_overrides_spec.rb | 2 +-
spec/support/request/shop_workflow.rb | 16 +++++++++++++---
5 files changed, 19 insertions(+), 18 deletions(-)
diff --git a/app/views/shared/menu/_joyride.html.haml b/app/views/shared/menu/_joyride.html.haml
index 6d732e0294..eb1875f383 100644
--- a/app/views/shared/menu/_joyride.html.haml
+++ b/app/views/shared/menu/_joyride.html.haml
@@ -1,4 +1,4 @@
-.joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"}
+.cart-dropdown.joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"}
%span.joyride-nub.top
.joyride-content-wrapper
%h5
diff --git a/spec/features/consumer/shopping/cart_spec.rb b/spec/features/consumer/shopping/cart_spec.rb
index ace11e775a..6a02206e1d 100644
--- a/spec/features/consumer/shopping/cart_spec.rb
+++ b/spec/features/consumer/shopping/cart_spec.rb
@@ -34,7 +34,7 @@ feature "full-page cart", js: true do
click_link "Continue shopping"
expect(page).to have_no_link "Continue shopping"
- expect(page).to have_button "Edit your cart"
+ expect(page).to have_link "Shop"
expect(page).to have_no_content distributor.preferred_shopfront_message
end
end
diff --git a/spec/features/consumer/shopping/embedded_shopfronts_spec.rb b/spec/features/consumer/shopping/embedded_shopfronts_spec.rb
index 290c6af516..20c7bfccb8 100644
--- a/spec/features/consumer/shopping/embedded_shopfronts_spec.rb
+++ b/spec/features/consumer/shopping/embedded_shopfronts_spec.rb
@@ -46,9 +46,8 @@ feature "Using embedded shopfront functionality", js: true do
it "allows shopping and checkout" do
on_embedded_page do
fill_in "variants[#{variant.id}]", with: 1
- wait_until_enabled 'input.add_to_cart'
- first("input.add_to_cart:not([disabled='disabled'])").click
+ edit_cart
expect(page).to have_text 'Your shopping cart'
find('a#checkout-link').click
@@ -91,11 +90,11 @@ feature "Using embedded shopfront functionality", js: true do
it "redirects to embedded hub on logout when embedded" do
on_embedded_page do
- wait_for_shop_loaded
+ wait_for_cart
find('ul.right li#login-link a').click
login_with_modal
- wait_for_shop_loaded
+ wait_for_cart
wait_until { page.find('ul.right li.user-menu.has-dropdown').value.present? }
logout_via_navigation
@@ -106,14 +105,6 @@ feature "Using embedded shopfront functionality", js: true do
private
- # When you have pending changes and try to navigate away from a page, it asks you "Are you sure?".
- # When we click the "Update" button to save changes, we need to wait
- # until it is actually saved and "loading" disappears before doing anything else.
- def wait_for_shop_loaded
- page.has_no_content? "Loading"
- page.has_no_css? "input[value='Updating cart...']"
- end
-
def login_with_modal
page.has_selector? 'div.login-modal', visible: true
diff --git a/spec/features/consumer/shopping/variant_overrides_spec.rb b/spec/features/consumer/shopping/variant_overrides_spec.rb
index 8b37f5d22e..a4279786da 100644
--- a/spec/features/consumer/shopping/variant_overrides_spec.rb
+++ b/spec/features/consumer/shopping/variant_overrides_spec.rb
@@ -86,7 +86,7 @@ feature "shopping with variant overrides defined", js: true do
it "shows the correct prices in the shopping cart" do
fill_in "variants[#{product1_variant1.id}]", with: "2"
- add_to_cart
+ edit_cart
expect(page).to have_selector "tr.line-item.variant-#{product1_variant1.id} .cart-item-price", text: with_currency(61.11)
expect(page).to have_field "order[line_items_attributes][0][quantity]", with: '2'
diff --git a/spec/support/request/shop_workflow.rb b/spec/support/request/shop_workflow.rb
index ff5909f267..cde1437b04 100644
--- a/spec/support/request/shop_workflow.rb
+++ b/spec/support/request/shop_workflow.rb
@@ -1,7 +1,17 @@
module ShopWorkflow
- def add_to_cart
- wait_until_enabled 'input.add_to_cart'
- first("input.add_to_cart:not([disabled='disabled'])").click
+ def wait_for_cart
+ first("#cart").click
+ within '.cart-dropdown' do
+ expect(page).to_not have_link "Updating cart..."
+ end
+ end
+
+ def edit_cart
+ wait_for_cart
+ within '.cart-dropdown' do
+ expect(page).to have_link "Edit your cart"
+ end
+ first("a.add_to_cart").click
end
def have_price(price)
From 2964ec138defb8daae939d49ff7582ec0cb25f7c Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 12:38:08 +0200
Subject: [PATCH 27/49] Update display of join words in filters list and
rearrange code a bit for clarity
Here we need to build a really dynamic structure on the page like "Results for: in or " and the styling on each of the words needs to be a bit different, specifically the filter terms need to be differently styled to the join words like "in" and "or". We have to generate those bits on the Angular side, but they also have to be wrapped in HTML in a specific way.
$sce.trustAsHtml() marks the injected HTML as "safe" (in relation to security issues like XSS). In this case the injected content doesn't involve any user-defined data, so it should be fine.
---
.../controllers/products_controller.js.coffee | 9 +++++---
app/views/shop/products/_search_feedback.haml | 23 ++++++++++---------
config/locales/en.yml | 3 ++-
3 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 894ed5576f..4a654cde10 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -1,4 +1,4 @@
-Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
+Darkswarm.controller "ProductsCtrl", ($scope, $sce, $filter, $rootScope, Products, OrderCycle, OrderCycleResource, FilterSelectorsService, Cart, Dereferencer, Taxons, Properties, currentHub, $timeout) ->
$scope.Products = Products
$scope.Cart = Cart
$scope.query = ""
@@ -76,12 +76,15 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
$scope.appliedTaxonsList = ->
$scope.activeTaxons.map( (taxon_id) ->
Taxons.taxons_by_id[taxon_id].name
- ).join(" #{t('products_or')} ") if $scope.activeTaxons?
+ ).join($scope.filtersJoinWord()) if $scope.activeTaxons?
$scope.appliedPropertiesList = ->
$scope.activeProperties.map( (property_id) ->
Properties.properties_by_id[property_id].name
- ).join(" #{t('products_or')} ") if $scope.activeProperties?
+ ).join($scope.filtersJoinWord()) if $scope.activeProperties?
+
+ $scope.filtersJoinWord = ->
+ $sce.trustAsHtml(" #{t('products_or')} ")
$scope.clearAll = ->
$scope.clearQuery()
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 9b5816a41d..70648d9500 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -2,20 +2,21 @@
.small-12.columns
.alert-box.search-alert.ng-scope
%div{"ng-show" => "Products.products.length > 0"}
+ %span.filter-label
+ = t :products_results_for
+ %span{ ng: { hide: "!query"} }
+ %span.applied-search
+ {{ query }}
+
+ %span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
+ = t :products_filters_in
+
+ %span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+ %span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
+
%a.clear-all.right{"ng-click" => "clearAll()"}
= t :products_clear
%i.ofn-i_009-close
- %span.filter-label
- = t :products_results_for
- %span.applied-properties
- {{ appliedPropertiesList() }}
- %span.applied-taxons
- {{ appliedTaxonsList() }}
- %span{ ng: { hide: "!query"} }
- %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
- = t :products_with
- %span.applied-search
- {{ query }}
%div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
.row.summary
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5802486794..60a4880db0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1651,7 +1651,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_clear: Clear
products_showing: "Showing:"
products_results_for: "Results for"
- products_or: "OR"
+ products_or: "or"
+ products_filters_in: "in"
products_with: with
products_search: "Search..."
products_filter_by: "Filter by"
From 96c6da304a36e6eb4edea8a5ea5a123db8d9752c Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 10:46:40 +0200
Subject: [PATCH 28/49] Increase margin between filter selectors
---
app/assets/stylesheets/darkswarm/_shop-filters.css.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index c84f5d95c6..c8b6cbd290 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -15,7 +15,7 @@
@include border-radius(0);
padding: 0;
- margin: 0 0.25rem 0.25rem 0;
+ margin: 0 0.5rem 0.5rem 0;
&:hover, &:focus {
background: transparent;
From 03afae01b323d4184b5eb309bbc3256dfb444761 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 10:50:30 +0200
Subject: [PATCH 29/49] Decrease sidebar width on mobile for more tapping space
---
app/assets/stylesheets/darkswarm/shop.css.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 4afb254dd2..6c477acb48 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -11,7 +11,7 @@
@import "shop-taxon-flag";
@import "shop-popovers";
-$sidebar-small-width: 85%;
+$sidebar-small-width: 75%;
$sidebar-medium-width: 65%;
$sidebar-large-width: 45%;
$sidebar-footer-height: 5em;
From a7771a20c4cdf4b12546cfb2b7d53e5ec6c0e780 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 10:55:48 +0200
Subject: [PATCH 30/49] Adjust border-radius on filters button
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index 0822e5ba3c..dcac100027 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -46,6 +46,7 @@
width: 7em;
padding: 0;
font-size: 1em;
+ border-radius: $radius-small;
@include breakpoint(mobile) {
margin-left: 0.75em;
From 5ceaff24e90a7ffae78531b981bff412c5ae4b48 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 10:58:56 +0200
Subject: [PATCH 31/49] Darken overlay background colour to reduce distraction
---
app/assets/stylesheets/darkswarm/variables.css.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss
index 216e7f68ee..115212fc76 100644
--- a/app/assets/stylesheets/darkswarm/variables.css.scss
+++ b/app/assets/stylesheets/darkswarm/variables.css.scss
@@ -36,5 +36,5 @@ $mobile-nav-height: 2.8em;
$radius-small: 0.25em;
$radius-medium: 0.5em;
-$shop-sidebar-overlay: rgba(0, 0, 0, 0.15);
+$shop-sidebar-overlay: rgba(0, 0, 0, 0.5);
$transition-sidebar: 250ms ease-in-out 0s;
From e0cb514cad023f7e758e17922f6fb0b475aa0fcf Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:02:21 +0200
Subject: [PATCH 32/49] Add hover state to filters button with darker
background
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index dcac100027..72c46647fc 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -47,6 +47,11 @@
padding: 0;
font-size: 1em;
border-radius: $radius-small;
+ transition: none;
+
+ &:hover {
+ background-color: $grey-700;
+ }
@include breakpoint(mobile) {
margin-left: 0.75em;
From 71fb3b1845cdac87aaea3f32ef6eb144ff8f81cc Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:18:28 +0200
Subject: [PATCH 33/49] Focus search field after it's cleared, ready for
immediate typing of new search term on mobile
---
.../javascripts/darkswarm/directives/focus_search.coffee | 6 ++++++
app/views/shop/products/_searchbar.haml | 2 +-
2 files changed, 7 insertions(+), 1 deletion(-)
create mode 100644 app/assets/javascripts/darkswarm/directives/focus_search.coffee
diff --git a/app/assets/javascripts/darkswarm/directives/focus_search.coffee b/app/assets/javascripts/darkswarm/directives/focus_search.coffee
new file mode 100644
index 0000000000..076c310351
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/focus_search.coffee
@@ -0,0 +1,6 @@
+Darkswarm.directive "focusSearch", ->
+ restrict: 'A'
+ link: (scope, element, attr)->
+ element.bind 'click', (event) ->
+ # Focus seach field, ready for typing
+ $(element).siblings('#search').focus()
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index 2ca6f32cb0..63467215a8 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -6,7 +6,7 @@
placeholder: t(:products_search),
"ng-debounce" => "200",
"ofn-disable-enter" => true}
- %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}}
+ %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
%img{ src: "/assets/icn-close.png" }
.hide-for-large-up
From 07ac7dd9c7670c7c0778de2474c9771f5180d5fc Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:24:13 +0200
Subject: [PATCH 34/49] Add explicit 'search' input type to search field.
In theory this should improve some of the custom-keyboard functionality added by mobiles, but the implementations will be vary...
---
app/views/shop/products/_searchbar.haml | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/views/shop/products/_searchbar.haml b/app/views/shop/products/_searchbar.haml
index 63467215a8..fa9fb962a4 100644
--- a/app/views/shop/products/_searchbar.haml
+++ b/app/views/shop/products/_searchbar.haml
@@ -3,6 +3,7 @@
.small-12.large-5.columns.flex
%div.search-wrap
%input#search.text{"ng-model" => "query",
+ type: 'search',
placeholder: t(:products_search),
"ng-debounce" => "200",
"ofn-disable-enter" => true}
From ea06ec7eded3eef0ea2468fc22aaa5e9fe02d71d Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:27:04 +0200
Subject: [PATCH 35/49] Remove smaller (less than 1em) scaling in search bar on
mobile
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 4 ----
1 file changed, 4 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index 72c46647fc..6eb635b2e3 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -63,8 +63,4 @@
position: sticky;
top: $mobile-nav-height;
}
-
- @include breakpoint(mobile) {
- font-size: 0.9em;
- }
}
From f6b910b38abe23533a98272df84a66df113893da Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:31:22 +0200
Subject: [PATCH 36/49] Fix clear search (x) button position on some layouts
Hopefully this will work on iPhones as well...?
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index 6eb635b2e3..ee9d09b4c6 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -13,6 +13,7 @@
.search-wrap {
position: relative;
width: 100%;
+ display: inline-flex;
.clear {
height: 1em;
From 483a654d3198bfe9e72dc31a68c1fdce5e9f23a1 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:38:55 +0200
Subject: [PATCH 37/49] Add join word "or" when both categories and properties
are present
Previously for example with "Organic" property and "Fruit" and "Nuts" categories it rendered as: "Fruit or Nuts Organic" instead of: "Fruit or Nuts or Organic"
---
app/views/shop/products/_search_feedback.haml | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 70648d9500..2f4c0548a3 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -12,6 +12,10 @@
= t :products_filters_in
%span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+
+ %span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
+ = t :products_or
+
%span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
%a.clear-all.right{"ng-click" => "clearAll()"}
From 7be85d1dab9e67fe1b523416f5a7309df67de2f3 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 11:42:25 +0200
Subject: [PATCH 38/49] Use bold font with teal colour for both applied taxons
and applied properties
---
app/assets/stylesheets/darkswarm/_shop-filters.css.scss | 7 ++-----
1 file changed, 2 insertions(+), 5 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index c8b6cbd290..7df689719e 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -145,12 +145,9 @@
color: $grey-800;
font-style: italic;
- &.applied-properties {
- color: $grey-800;
- }
-
- &.applied-taxons {
+ &.applied-taxons, &.applied-properties {
color: $clr-blue;
+ font-weight: bold;
}
&.applied-search {
From a1435e78c951d535e67f37602388eec3df78b452 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:06:24 +0200
Subject: [PATCH 39/49] Extract applied filters feedback to partial
---
.../shop/products/_applied_filters_feedback.haml | 9 +++++++++
app/views/shop/products/_search_feedback.haml | 11 +----------
2 files changed, 10 insertions(+), 10 deletions(-)
create mode 100644 app/views/shop/products/_applied_filters_feedback.haml
diff --git a/app/views/shop/products/_applied_filters_feedback.haml b/app/views/shop/products/_applied_filters_feedback.haml
new file mode 100644
index 0000000000..b92ff8f088
--- /dev/null
+++ b/app/views/shop/products/_applied_filters_feedback.haml
@@ -0,0 +1,9 @@
+%span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
+ = t :products_filters_in
+
+%span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
+
+%span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
+ = t :products_or
+
+%span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 2f4c0548a3..18f7d26c91 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -7,16 +7,7 @@
%span{ ng: { hide: "!query"} }
%span.applied-search
{{ query }}
-
- %span{ "ng-show" => "query && ( appliedPropertiesList() || appliedTaxonsList() )" }
- = t :products_filters_in
-
- %span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
-
- %span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
- = t :products_or
-
- %span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
+ = render partial: 'shop/products/applied_filters_feedback'
%a.clear-all.right{"ng-click" => "clearAll()"}
= t :products_clear
From a75d3276a44dc4c7661c67709a700e54c86825dd Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:08:03 +0200
Subject: [PATCH 40/49] Include applied filters list in "no results" feedback
---
app/views/shop/products/_search_feedback.haml | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 18f7d26c91..33b538452e 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -18,5 +18,6 @@
.small-12.columns
%p.no-results
= t :products_no_results_html, query: "{{query}}".html_safe
+ = render partial: 'shop/products/applied_filters_feedback'
%button.clear-search{type: 'button', ng: {click: 'clearAll()'}}
= t :products_clear_search
From 82b11d6947c4dbc9cc81271ea22e591467227a4d Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:11:28 +0200
Subject: [PATCH 41/49] Ensure join words are not bold
---
.../darkswarm/controllers/products_controller.js.coffee | 2 +-
app/assets/stylesheets/darkswarm/_shop-filters.css.scss | 4 ++++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
index 4a654cde10..bc72b597c2 100644
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -84,7 +84,7 @@ Darkswarm.controller "ProductsCtrl", ($scope, $sce, $filter, $rootScope, Product
).join($scope.filtersJoinWord()) if $scope.activeProperties?
$scope.filtersJoinWord = ->
- $sce.trustAsHtml(" #{t('products_or')} ")
+ $sce.trustAsHtml(" #{t('products_or')} ")
$scope.clearAll = ->
$scope.clearQuery()
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 7df689719e..7684aff69a 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -148,6 +148,10 @@
&.applied-taxons, &.applied-properties {
color: $clr-blue;
font-weight: bold;
+
+ .join-word {
+ font-weight: normal;
+ }
}
&.applied-search {
From b78976fcd79e835b8e0a12c3b7a1fe0f27180d05 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:14:19 +0200
Subject: [PATCH 42/49] Ensure consistent styling in both "no results" and
"searching for" text
---
app/views/shop/products/_search_feedback.haml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 33b538452e..2558725ab1 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -17,7 +17,7 @@
.row.summary
.small-12.columns
%p.no-results
- = t :products_no_results_html, query: "{{query}}".html_safe
+ = t :products_no_results_html, query: "{{query}}".html_safe
= render partial: 'shop/products/applied_filters_feedback'
%button.clear-search{type: 'button', ng: {click: 'clearAll()'}}
= t :products_clear_search
From 7e6683581a3b33604d21386dad720c67046bc3ac Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:15:19 +0200
Subject: [PATCH 43/49] Remove full stop from translation
This doesn't fit with the new syntax structure
---
config/locales/en.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 60a4880db0..62654fc6da 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1670,7 +1670,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_update_error_msg: "Saving failed."
products_update_error_data: "Save failed due to invalid data:"
products_changes_saved: "Changes saved."
- products_no_results_html: "Sorry, no results found for %{query}."
+ products_no_results_html: "Sorry, no results found for %{query}"
products_clear_search: "Clear search"
search_no_results_html: "Sorry, no results found for %{query}. Try another search?"
From dee793a392fb0572df4829426ed02a49566299b6 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:19:50 +0200
Subject: [PATCH 44/49] Change join word between the two filter sets to be
"and", to match the actual logic
---
app/views/shop/products/_applied_filters_feedback.haml | 2 +-
config/locales/en.yml | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/app/views/shop/products/_applied_filters_feedback.haml b/app/views/shop/products/_applied_filters_feedback.haml
index b92ff8f088..45730f39cf 100644
--- a/app/views/shop/products/_applied_filters_feedback.haml
+++ b/app/views/shop/products/_applied_filters_feedback.haml
@@ -4,6 +4,6 @@
%span.applied-properties{'ng-bind-html' => 'appliedPropertiesList()'}
%span{ "ng-show" => "appliedPropertiesList() && appliedTaxonsList()" }
- = t :products_or
+ = t :products_and
%span.applied-taxons{'ng-bind-html' => 'appliedTaxonsList()'}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 62654fc6da..01ba7cebd2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1652,6 +1652,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_showing: "Showing:"
products_results_for: "Results for"
products_or: "or"
+ products_and: "and"
products_filters_in: "in"
products_with: with
products_search: "Search..."
From cb9c56d8aa087401026c4b3290b870e9a2c9dc48 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:34:17 +0200
Subject: [PATCH 45/49] Ensure correct left-alignment on text in search results
feedback
---
.../stylesheets/darkswarm/_shop-filters.css.scss | 10 ++++++----
app/views/shop/products/_search_feedback.haml | 2 +-
2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 7684aff69a..e9da000409 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -123,6 +123,12 @@
}
}
+ .no-results-bar {
+ @include breakpoint(desktop) {
+ text-align: center;
+ }
+ }
+
.no-results {
color: $grey-800;
font-style: italic;
@@ -163,10 +169,6 @@
float: left;
}
}
-
- @include breakpoint(desktop) {
- text-align: center;
- }
}
// singleLineSelectors directive provides a drop-down that can overlap
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 2558725ab1..d26288eabd 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -13,7 +13,7 @@
= t :products_clear
%i.ofn-i_009-close
- %div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
+ %div.no-results-bar{"ng-show" => "Products.products.length == 0 && !Products.loading"}
.row.summary
.small-12.columns
%p.no-results
From 9f882a867453ad9c5e209ecc2b209b6c5912add3 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:54:44 +0200
Subject: [PATCH 46/49] Ensure search results feedback wraps nicely onto next
line
---
app/assets/stylesheets/darkswarm/_shop-filters.css.scss | 5 +----
app/views/shop/products/_search_feedback.haml | 9 +++++----
2 files changed, 6 insertions(+), 8 deletions(-)
diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index e9da000409..5bb8b5e381 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -117,6 +117,7 @@
.clear-all {
color: $grey-500;
+ margin-left: 1.5em;
&:hover {
color: $grey-600;
@@ -164,10 +165,6 @@
font-weight: bold;
color: $teal-500;
}
-
- &.filter-label {
- float: left;
- }
}
}
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index d26288eabd..ea6b0c7f22 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -2,6 +2,11 @@
.small-12.columns
.alert-box.search-alert.ng-scope
%div{"ng-show" => "Products.products.length > 0"}
+
+ %a.clear-all.right{"ng-click" => "clearAll()"}
+ = t :products_clear
+ %i.ofn-i_009-close
+
%span.filter-label
= t :products_results_for
%span{ ng: { hide: "!query"} }
@@ -9,10 +14,6 @@
{{ query }}
= render partial: 'shop/products/applied_filters_feedback'
- %a.clear-all.right{"ng-click" => "clearAll()"}
- = t :products_clear
- %i.ofn-i_009-close
-
%div.no-results-bar{"ng-show" => "Products.products.length == 0 && !Products.loading"}
.row.summary
.small-12.columns
From 0cd4ad0a1ad80cfbbf3925ce9bb4e0fab4d0dd2e Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Sat, 2 May 2020 12:58:49 +0200
Subject: [PATCH 47/49] Ensure large amount of search text doesn't break layout
with clear all button
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index ee9d09b4c6..fccde6de79 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -29,7 +29,7 @@
border-radius: $radius-small;
border: solid 1px $grey-300;
margin: 0;
- padding: 0 1em 0 2.75em;
+ padding: 0 2.25em 0 2.75em;
width: 100%;
min-width: 0;
background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
From 265a8ed5739e8b5b1c4602efe18e7d88a9a763be Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 12 May 2020 18:24:10 +0200
Subject: [PATCH 48/49] Move messages and products form outside of row and
columns to enable full-width
---
app/views/shopping_shared/tabs/_shop.html.haml | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml
index 8628b91178..2c23b4e8c1 100644
--- a/app/views/shopping_shared/tabs/_shop.html.haml
+++ b/app/views/shopping_shared/tabs/_shop.html.haml
@@ -6,7 +6,5 @@
= render partial: "shop/messages/closed_shop"
- else
- .row
- .small-12.columns
- = render partial: "shop/messages/select_oc"
- = render partial: "shop/products/form"
+ = render partial: "shop/messages/select_oc"
+ = render partial: "shop/products/form"
From 598071fa787731bbaffc67fd721df08a464d6326 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 12 May 2020 18:59:15 +0200
Subject: [PATCH 49/49] Remove conflicting "clear search" buttons added by
Chrome
---
app/assets/stylesheets/darkswarm/shop_search.css.scss | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index fccde6de79..cbe0bf6bd4 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -38,6 +38,14 @@
&::placeholder {
font-style: italic;
}
+
+ // Remove conflicting "clear search" buttons added by Chrome
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
}
button {