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...

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;

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 {

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;

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: "<strong>{{query}}</strong>".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: "<strong>{{query}}</strong>".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"

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}