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] 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}