raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new cart icon and extract cart joyride from cart haml file

Browse Source
This commit is contained in:
luisramos0
2019-05-24 15:16:36 +01:00
parent 60c08347a5
commit ec9d50c824
3 changed files with 71 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/images/menu/icn-cart.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18">
<path fill="#FFF" fill-opacity=".5" fill-rule="nonzero" d="M18.338 10.593l1.64-7.312a.841.841 0 0 0-.812-1.031H5.528L5.21.675A.836.836 0 0 0 4.393 0H.833A.839.839 0 0 0 0 .844v.562c0 .466.373.844.833.844H3.26l2.439 12.074c-.584.34-.977.977-.977 1.707 0 1.088.87 1.969 1.945 1.969 1.074 0 1.944-.881 1.944-1.969 0-.55-.224-1.049-.584-1.406h7.28c-.36.357-.585.855-.585 1.406 0 1.088.87 1.969 1.945 1.969 1.074 0 1.944-.881 1.944-1.969 0-.78-.447-1.453-1.096-1.772l.191-.853a.841.841 0 0 0-.812-1.031h-9.32l-.228-1.125h10.179c.389 0 .726-.273.813-.657z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 648 B

71
app/views/shared/menu/_cart.html.haml
View File

@@ -1,71 +1,10 @@
%span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
%a#cart.icon{cart: true}
%span.nav-branded
%i.ofn-i_027-shopping-cart
%span
= t '.cart'
%span.count
%img{ src: "/assets/menu/icn-cart.svg" }
%span
{{ Cart.total_item_count() }}
= t 'cart_items'
.joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"}
%span.joyride-nub.top
.joyride-content-wrapper
%h5
= t 'cart_headline'
.buttons.text-right
%a.button.secondary.tiny.add_to_cart{ href: cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
= "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}"
%a.button.primary.tiny{href: checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
= t '.checkout'
%table
%tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"}
%td
%small
%strong
{{ line_item.variant.extended_name }}
%td.text-right
%small
%span.quantity {{ line_item.quantity }}
%i.ofn-i_009-close
%span.price {{ line_item.variant.price_with_fees | localizeCurrency }}
%td
%small
\=
%strong
.total-price.right {{ line_item.total_price | localizeCurrency }}
%table{"ng-show" => "Cart.line_items.length > 0"}
%tr.total-cart
%td
%em
= t 'total'
\:
%td.text-right
%strong {{ Cart.total() | localizeCurrency }}
.buttons.text-right
%a.button.secondary.tiny.add_to_cart{ href: cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
= "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}"
%a.button.primary.tiny{href: checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
= t '.checkout'
- if order_changes_allowed?
%h5{"ng-if" => "Cart.line_items_finalised.length", style: 'margin-top: 1em'}
= t '.already_ordered_products'
%table
%tr.product-cart{"ng-repeat" => "line_item in Cart.line_items_finalised",
"id" => "cart-variant-{{ line_item.variant.id }}"}
%td
%small
%strong
{{ line_item.variant.extended_name }}
%td.text-right
%small
%span.quantity {{ line_item.quantity }}
%i.ofn-i_009-close
%span.price {{ line_item.variant.price_with_fees | localizeCurrency }}
%td
%small
\=
%strong
.total-price.right {{ line_item.total_price | localizeCurrency }}
= render 'shared/menu/joyride'

63
app/views/shared/menu/_joyride.html.haml Normal file
View File

@@ -0,0 +1,63 @@
.joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"}
%span.joyride-nub.top
.joyride-content-wrapper
%h5
= t 'cart_headline'
.buttons.text-right
%a.button.secondary.tiny.add_to_cart{ href: cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
= "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}"
%a.button.primary.tiny{href: checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
= t '.checkout'
%table
%tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"}
%td
%small
%strong
{{ line_item.variant.extended_name }}
%td.text-right
%small
%span.quantity {{ line_item.quantity }}
%i.ofn-i_009-close
%span.price {{ line_item.variant.price_with_fees | localizeCurrency }}
%td
%small
\=
%strong
.total-price.right {{ line_item.total_price | localizeCurrency }}
%table{"ng-show" => "Cart.line_items.length > 0"}
%tr.total-cart
%td
%em
= t 'total'
\:
%td.text-right
%strong {{ Cart.total() | localizeCurrency }}
.buttons.text-right
%a.button.secondary.tiny.add_to_cart{ href: cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
= "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}"
%a.button.primary.tiny{href: checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"}
= t '.checkout'
- if order_changes_allowed?
%h5{"ng-if" => "Cart.line_items_finalised.length", style: 'margin-top: 1em'}
= t '.already_ordered_products'
%table
%tr.product-cart{"ng-repeat" => "line_item in Cart.line_items_finalised",
"id" => "cart-variant-{{ line_item.variant.id }}"}
%td
%small
%strong
{{ line_item.variant.extended_name }}
%td.text-right
%small
%span.quantity {{ line_item.quantity }}
%i.ofn-i_009-close
%span.price {{ line_item.variant.price_with_fees | localizeCurrency }}
%td
%small
\=
%strong
.total-price.right {{ line_item.total_price | localizeCurrency }}