Adding more logic to force padding for shopfront page whether populated with products or not.

2026-02-27 01:43:22 +00:00 · 2015-05-02 20:25:23 +10:00
parent 572ab14c0b
commit 9a0e9145ef
1 changed files with 53 additions and 52 deletions
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -1,57 +1,58 @@
-%products.small-12.columns.footer-pad{"ng-controller" => "ProductsCtrl", "ng-show" => "order_cycle.order_cycle_id != null",
-"infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1"}
+.footer-pad.small-12.columns
+  %products{"ng-controller" => "ProductsCtrl", "ng-show" => "order_cycle.order_cycle_id != null",
+  "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1"}

-  // 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()"}
-          Clear all
-          %i.ofn-i_009-close
-        %span.filter-label
-          Showing:
-          %span.applied-properties
-            {{ appliedPropertiesList() }}
-          %span.applied-taxons
-            {{ appliedTaxonsList() }}
-          %span{ ng: { hide: "!query"} }
-            %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
-              with
-            %span.applied-search "{{ query }}"
-  .row
-    .small-12.medium-6.large-5.columns
-      %input#search.text{"ng-model" => "query",
-      placeholder: "Search by product or producer",
-      "ng-debounce" => "100",
-      "ofn-disable-enter" => 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()"}
+            Clear all
+            %i.ofn-i_009-close
+          %span.filter-label
+            Showing:
+            %span.applied-properties
+              {{ appliedPropertiesList() }}
+            %span.applied-taxons
+              {{ appliedTaxonsList() }}
+            %span{ ng: { hide: "!query"} }
+              %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
+                with
+              %span.applied-search "{{ query }}"
+    .row
+      .small-12.medium-6.large-5.columns
+        %input#search.text{"ng-model" => "query",
+        placeholder: "Search by product or producer",
+        "ng-debounce" => "100",
+        "ofn-disable-enter" => true}

-    .small-12.medium-6.large-6.large-offset-1.columns
-      = render partial: "shop/products/filters"
+      .small-12.medium-6.large-6.large-offset-1.columns
+        = render partial: "shop/products/filters"

-  %div.pad-top{bindonce: true}
-    %product.animate-repeat{"ng-controller" => "ProductNodeCtrl",
-      "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons | properties: activeProperties) track by product.id ", "id" => "product-{{ product.id }}"}
-      = render partial: "shop/products/summary"
-      %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants", "id" => "variant-{{ product.master.id }}"}
-      %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id", "id" => "variant-{{ variant.id }}"}
+    %div.pad-top{bindonce: true}
+      %product.animate-repeat{"ng-controller" => "ProductNodeCtrl",
+        "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons | properties: activeProperties) track by product.id ", "id" => "product-{{ product.id }}"}
+        = render partial: "shop/products/summary"
+        %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants", "id" => "variant-{{ product.master.id }}"}
+        %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id", "id" => "variant-{{ variant.id }}"}

-    %product{"ng-show" => "Products.loading"}
-      .row.summary
-        .small-12.columns.text-center
-          Loading products...
-      .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
+            Loading products...
+        .row
+          .small-12.columns.text-center
+            %img.spinner{ src: "/assets/spinning-circles.svg" }

-    %div{"ng-show" => "filteredProducts.length == 0 && !Products.loading"}
-      .row.summary
-        .small-12.columns
-          %p.no-results
-            Sorry, no results found for
-            %strong {{query}}.
-            Try another search?
-  .row
-    .small-12.columns
-      %form{action: 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 ? 'Updating cart...' : (Cart.empty() ? 'Cart empty' : 'Edit your cart' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
+      %div{"ng-show" => "filteredProducts.length == 0 && !Products.loading"}
+        .row.summary
+          .small-12.columns
+            %p.no-results
+              Sorry, no results found for
+              %strong {{query}}.
+              Try another search?
+    .row
+      .small-12.columns
+        %form{action: 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 ? 'Updating cart...' : (Cart.empty() ? 'Cart empty' : 'Edit your cart' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }