mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-04 22:16:08 +00:00
Markup changes to all the partials for new shopfront page design
This commit is contained in:
summerscope
@@ -18,10 +18,17 @@
|
||||
%div.pad-top{bindonce: true}
|
||||
%product.animate-repeat{"ng-controller" => "ProductNodeCtrl",
|
||||
"ng-repeat" => "product in filteredProducts = (Product.products | products:query | taxons:activeTaxons | orderBy:ordering.order) track by product.id "}
|
||||
%div
|
||||
= render partial: "shop/products/summary"
|
||||
%div{"bo-if" => "product.hasVariants"}
|
||||
= render partial: "shop/products/variants"
|
||||
|
||||
|
||||
.product-thumb
|
||||
%a{"ng-click" => "triggerProductModal()"}
|
||||
%img{"bo-src" => "product.master.images[0].small_url", "ng-click" => "triggerProductModal()"}
|
||||
|
||||
= render partial: "shop/products/summary"
|
||||
|
||||
%span{"bo-if" => "product.hasVariants"}
|
||||
= render partial: "shop/products/variants"
|
||||
|
||||
.variants.row{"bo-if" => "!product.hasVariants"}
|
||||
= render partial: "shop/products/master"
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.small-1.columns
|
||||
%i.ofn-i_056-bulk{"bo-if" => "product.group_buy"}
|
||||
|
||||
|
||||
.small-4.columns
|
||||
.small-12.medium-4.large-4.columns
|
||||
{{ product.master.name_to_display }}
|
||||
%span.bulk-buy{"bo-if" => "product.group_buy"}
|
||||
%i.ofn-i_056-bulk
|
||||
%em
|
||||
Bulk
|
||||
|
||||
-# WITHOUT GROUP BUY
|
||||
.small-5.columns{"bo-if" => "!product.group_buy"}
|
||||
.small-4.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"}
|
||||
%input{type: :number,
|
||||
min: 0,
|
||||
placeholder: "0",
|
||||
@@ -15,28 +15,38 @@
|
||||
name: "variants[{{product.master.id}}]",
|
||||
id: "variants_{{product.master.id}}",
|
||||
"ng-model" => "product.quantity"}
|
||||
%small x {{ product.master.unit_to_display }}
|
||||
|
||||
-# WITH GROUP BUY
|
||||
.small-2.columns{"bo-if" => "product.group_buy"}
|
||||
%input{type: :number,
|
||||
min: 0,
|
||||
placeholder: "min",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
|
||||
name: "variants[{{product.master.id}}]",
|
||||
id: "variants_{{product.master.id}}",
|
||||
"ng-model" => "product.quantity"}
|
||||
.small-4.medium-3.large-3.columns.text-right{"bo-if" => "product.group_buy"}
|
||||
%span.bulk-input-container
|
||||
%span.bulk-input
|
||||
%input.bulk.first{type: :number,
|
||||
min: 0,
|
||||
placeholder: "min",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
|
||||
name: "variants[{{product.master.id}}]",
|
||||
id: "variants_{{product.master.id}}",
|
||||
"ng-model" => "product.quantity"}
|
||||
%span.bulk-input{"bo-if" => "product.group_buy"}
|
||||
%input.bulk.second{type: :number,
|
||||
min: 0,
|
||||
placeholder: "max",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
|
||||
name: "variant_attributes[{{product.master.id}}][max_quantity]",
|
||||
"ng-model" => "product.max_quantity"}
|
||||
|
||||
.small-3.columns{"bo-if" => "product.group_buy"}
|
||||
%input{type: :number,
|
||||
min: 0,
|
||||
placeholder: "max",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
|
||||
name: "variant_attributes[{{product.master.id}}][max_quantity]",
|
||||
"ng-model" => "product.max_quantity"}
|
||||
%small x {{ product.master.unit_to_display }}
|
||||
.small-4.medium-1.large-1.columns.variant-unit
|
||||
%em {{ product.master.unit_to_display }}
|
||||
|
||||
.small-2.columns.text-right
|
||||
{{ product.price | currency }}
|
||||
.small-4.medium-2.large-2.columns
|
||||
%span
|
||||
%i.ofn-i_009-close
|
||||
{{ product.price | currency }}
|
||||
|
||||
.small-12.medium-2.large-2.columns.text-right
|
||||
%span
|
||||
%i.ofn-i_009-close
|
||||
%strong $10,000.95
|
||||
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
.row.summary
|
||||
.small-1.columns
|
||||
%img{"bo-src" => "product.master.images[0].small_url", "ng-click" => "triggerProductModal()"}
|
||||
.small-10.large-11.columns.summary-header
|
||||
%h3 {{ product.name }}
|
||||
|
||||
.small-4.columns.summary-header
|
||||
%render-svg{path: "{{product.primary_taxon.icon}}"}
|
||||
%a{"ng-click" => "triggerProductModal()"}{{ product.name }}
|
||||
%em from
|
||||
%span
|
||||
%producer-modal
|
||||
%i.ofn-i_036-producers
|
||||
{{ enterprise.name }}
|
||||
|
||||
.small-5.columns
|
||||
%i.ofn-i_036-producers
|
||||
%producer-modal {{ enterprise.name }}
|
||||
|
||||
.small-2.columns.summary-price.text-right.price
|
||||
%span{"ng-if" => "product.hasVariants"}
|
||||
%em from
|
||||
{{ product.price | currency }}
|
||||
.small-2.large-1.columns.text-center
|
||||
.taxon-flag
|
||||
%render-svg{path: "{{product.primary_taxon.icon}}"}
|
||||
@@ -1,15 +1,12 @@
|
||||
.row.variants{bindonce: true,
|
||||
"ng-repeat" => "variant in product.variants track by variant.id"}
|
||||
|
||||
.small-1.columns
|
||||
%i.ofn-i_056-bulk{"bo-if" => "product.group_buy"}
|
||||
|
||||
|
||||
.small-4.columns
|
||||
.small-12.medium-4.large-4.columns
|
||||
{{ variant.name_to_display }}
|
||||
%i.ofn-i_056-bulk{"bo-if" => "product.group_buy"}
|
||||
|
||||
-# WITHOUT GROUP BUY
|
||||
.small-5.columns{"bo-if" => "!product.group_buy"}
|
||||
.small-4.medium-3.large-3.columns.text-right{"bo-if" => "!product.group_buy"}
|
||||
%input{type: :number,
|
||||
value: nil,
|
||||
min: 0,
|
||||
@@ -18,28 +15,37 @@
|
||||
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
|
||||
name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}",
|
||||
"bo-model" => "variant.quantity"}
|
||||
%small x {{ variant.unit_to_display }}
|
||||
|
||||
.small-4.medium-1.large-1.columns.variant-unit
|
||||
%em {{ variant.unit_to_display }}
|
||||
|
||||
.small-4.medium-2.large-2.columns
|
||||
%span
|
||||
%i.ofn-i_009-close
|
||||
{{ variant.price | currency }}
|
||||
|
||||
-# WITH GROUP BUY
|
||||
.small-2.columns{"bo-if" => "product.group_buy"}
|
||||
%input{type: :number,
|
||||
value: nil,
|
||||
min: 0,
|
||||
placeholder: "min",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
|
||||
name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}",
|
||||
"bo-model" => "variant.quantity"}
|
||||
/ .small-2.columns{"bo-if" => "product.group_buy"}
|
||||
/ %input{type: :number,
|
||||
/ value: nil,
|
||||
/ min: 0,
|
||||
/ placeholder: "min",
|
||||
/ "ofn-disable-scroll" => true,
|
||||
/ max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
|
||||
/ name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}",
|
||||
/ "bo-model" => "variant.quantity"}
|
||||
|
||||
.small-3.columns{"bo-if" => "product.group_buy"}
|
||||
%input{type: :number,
|
||||
min: 0,
|
||||
placeholder: "max",
|
||||
"ofn-disable-scroll" => true,
|
||||
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
|
||||
name: "variant_attributes[{{variant.id}}][max_quantity]",
|
||||
"ng-model" => "variant.max_quantity"}
|
||||
%small x {{ variant.unit_to_display }}
|
||||
/ .small-3.columns{"bo-if" => "product.group_buy"}
|
||||
/ %input{type: :number,
|
||||
/ min: 0,
|
||||
/ placeholder: "max",
|
||||
/ "ofn-disable-scroll" => true,
|
||||
/ max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
|
||||
/ name: "variant_attributes[{{variant.id}}][max_quantity]",
|
||||
/ "ng-model" => "variant.max_quantity"}
|
||||
/ %em {{ variant.unit_to_display }}
|
||||
|
||||
.small-2.columns.text-right.price
|
||||
{{ variant.price | currency }}
|
||||
.small-12.medium-2.large-2.columns.text-right
|
||||
%span
|
||||
%i.ofn-i_009-close
|
||||
%strong $10,000.95
|
||||
|
||||
Reference in New Issue
Block a user