diff --git a/app/assets/images/menu/icn-cart.svg b/app/assets/images/menu/icn-cart.svg
new file mode 100755
index 0000000000..3f5fe008e3
--- /dev/null
+++ b/app/assets/images/menu/icn-cart.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/assets/images/menu/icn-login.svg b/app/assets/images/menu/icn-login.svg
new file mode 100644
index 0000000000..b790141d11
--- /dev/null
+++ b/app/assets/images/menu/icn-login.svg
@@ -0,0 +1,7 @@
+
diff --git a/app/assets/images/menu/icn-profile.svg b/app/assets/images/menu/icn-profile.svg
new file mode 100755
index 0000000000..cc30acc595
--- /dev/null
+++ b/app/assets/images/menu/icn-profile.svg
@@ -0,0 +1,6 @@
+
diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
index 760b77d89a..c1206ecc5e 100644
--- a/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
+++ b/app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss
@@ -60,7 +60,6 @@ body.embedded {
vertical-align: top;
&.cart {
-
div.joyride-tip-guide { // Cart Dropdown
top: 75px;
overflow: visible;
diff --git a/app/assets/stylesheets/darkswarm/header.css.scss b/app/assets/stylesheets/darkswarm/header.css.scss
deleted file mode 100644
index 6d04b31f0f..0000000000
--- a/app/assets/stylesheets/darkswarm/header.css.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "variables";
-
-nav.top-bar {
- margin-bottom: 0px;
-
- a.icon {
- &:hover {
- text-decoration: none;
- }
-
- height: $topbar-height;
- color: white;
-
- i {
- font-size: 29px;
- line-height: $topbar-height;
- }
-
- span {
- font-size: 13px;
- display: inline-block;
- line-height: $topbar-height;
- height: $topbar-height;
- vertical-align: top;
- }
- }
-}
-
-body > section[role='main'] {
- padding: 0px;
-}
diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss
index 51063a6bfe..87e731133c 100644
--- a/app/assets/stylesheets/darkswarm/menu.css.scss
+++ b/app/assets/stylesheets/darkswarm/menu.css.scss
@@ -4,102 +4,176 @@
@import "typography";
@import "variables";
-nav {
+nav.top-bar {
@include textpress;
-
text-shadow: none;
-
- // Create center style for nav ul (foundation provides left and right)
text-align: center;
+ font-size: 16px;
+ margin-bottom: 0;
+ height: $topbar-height;
+}
- .top-bar-section {
- // Avoid menu items blocking logo
- li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover {
- background-color: transparent;
+.top-bar-section {
+ a.icon {
+ &:hover {
+ text-decoration: none;
}
- ul.center {
+ > span {
display: inline-block;
-
- // By default, we center between the left and right uls, but we want to be centered
- // relative to the whole page. The difference in width between the other uls is 74px,
- // so we offset by that amount here.
- margin-left: -74px;
- }
- }
-
- .joyride-tip-guide .button {
- text-shadow: none;
- }
-
- // Default overrides - big menu
- .top-bar-section .has-dropdown > a {
- padding-right: ($topbar-height / 3) !important;
-
- i.ofn-i_022-cog, .ofn-i_071-globe {
- font-size: 24px;
+ font-weight: 300;
+ height: $topbar-height;
line-height: $topbar-height;
- }
-
- i.ofn-i_071-globe {
- color: #666;
- font-size: 27px
+ vertical-align: top;
}
}
- .top-bar-section .has-dropdown > a:after {
- display: none;
+ // Avoid menu items blocking logo
+ li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover {
+ background-color: transparent;
}
- .top-bar-section ul li > a {
- font-size: 0.75rem;
- height: $topbar-height;
- opacity: 0.8;
+ li.cart {
+ background-color: #f4704c;
- &:hover, &:focus, &:active {
- opacity: 1;
+ a span {
+ color: white;
}
- @include transition(all 0.3s ease-in-out);
- }
+ i {
+ color: white;
+ }
- .top-bar-section ul li.ofn-logo > a {
- display: table-cell;
- vertical-align: middle;
- opacity: 1;
- }
+ .count {
+ position: relative;
- .nav-branded {
- color: $brand-colour;
+ img {
+ width: 32px;
+ height: 26px;
+ margin-top: 16px;
+ margin-right: 5px;
+ }
- span {
- font-size: 13px;
+ span {
+ background-color: white;
+ border-radius: 20px;
+ color: #f4704c;
+ font-size: 12px;
+ line-height: 18px;
+ position: absolute;
+ right: -8px;
+ top: 8px;
+ width: 18px;
+ }
}
}
- .nav-primary {
- @include headingFont;
+ ul.center {
+ display: inline-block;
- font-size: 0.875rem;
- font-weight: 300;
- }
-
- ul .nav-primary {
- text-transform: uppercase;
+ // By default, we center between the left and right uls, but we want to be centered
+ // relative to the whole page. The difference in width between the other uls is 74px,
+ // so we offset by that amount here.
+ margin-left: -74px;
}
ul.dropdown {
border: 1px solid $smoke;
border-top: none;
}
+
+ ul.right {
+ > li {
+ border-left: 1px solid #ddd;
+ padding: 0 14px;
+
+ @media screen and (max-width: 1450px) {
+ padding: 0 6px;
+ }
+ }
+
+ li > a {
+ opacity: 0.8;
+
+ &:hover, &:focus, &:active {
+ opacity: 1;
+ }
+
+ i {
+ color: #f4704c;
+ display: inline-block;
+ margin-right: 2px;
+ margin-top: -3px;
+ vertical-align: middle;
+ }
+
+ img {
+ margin-right: 2px;
+ margin-top: -5px;
+ }
+ }
+ }
+
+ ul li > a {
+ font-size: 16px;
+ height: $topbar-height;
+ }
+
+ ul li.ofn-logo > a {
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ ul .nav-primary {
+ @include headingFont;
+ text-transform: uppercase;
+ font-weight: 300;
+ font-size: 16px;
+ }
+
+ .joyride-tip-guide .button {
+ text-shadow: none;
+ }
}
// Mobile Menu
.tab-bar {
background-color: white;
+
+ .cart-span {
+ background-color: #f4704c;
+ padding: 13px;
+
+ a, span {
+ color: white;
+ }
+
+ .count {
+ position: relative;
+
+ img {
+ margin-left: 2px;
+ width: 26px;
+ }
+
+ span {
+ background-color: white;
+ border-radius: 20px;
+ color: #f4704c;
+ font-size: 12px;
+ line-height: 16px;
+ position: absolute;
+ right: -10px;
+ text-align: center;
+ top: -9px;
+ width: 16px;
+ }
+ }
+ }
}
+
.off-canvas-list li.language-switcher ul li {
list-style-type: none;
padding-left: 0.5em;
@@ -114,8 +188,6 @@ nav {
}
.off-canvas-wrap.move-right .tab-bar .menu-icon span {
- -moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
- -webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666;
}
@@ -194,10 +266,4 @@ nav {
// padding required to placehold for fixed menu bar
padding-top: 0;
}
-
- section.right {
- .nav-branded {
- padding: 0 1em;
- }
- }
}
diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss
index 12d77f0d09..bf1db3eadc 100644
--- a/app/assets/stylesheets/darkswarm/variables.css.scss
+++ b/app/assets/stylesheets/darkswarm/variables.css.scss
@@ -13,7 +13,7 @@
$brand-colour: #f27052;
// Topbar
-$topbar-height: rem-calc(75);
+$topbar-height: rem-calc(64);
$topbar-link-padding: $topbar-height / 3;
$topbar-bg: $white;
diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml
index 63a5224c90..865ceb4074 100644
--- a/app/views/shared/menu/_cart.html.haml
+++ b/app/views/shared/menu/_cart.html.haml
@@ -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'
diff --git a/app/views/shared/menu/_joyride.html.haml b/app/views/shared/menu/_joyride.html.haml
new file mode 100644
index 0000000000..7c819191e3
--- /dev/null
+++ b/app/views/shared/menu/_joyride.html.haml
@@ -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 }}
\ No newline at end of file
diff --git a/app/views/shared/menu/_language_selector.html.haml b/app/views/shared/menu/_language_selector.html.haml
new file mode 100644
index 0000000000..3e38095272
--- /dev/null
+++ b/app/views/shared/menu/_language_selector.html.haml
@@ -0,0 +1,8 @@
+%li.language-switcher.has-dropdown
+ %a{href: '#'}
+ %i.ofn-i_071-globe
+ %span= t 'language_name'
+ %ul.dropdown
+ - OpenFoodNetwork::I18nConfig.selectable_locales.each do |l|
+ %li
+ %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
\ No newline at end of file
diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml
index bcbf7a0066..933fee7d93 100644
--- a/app/views/shared/menu/_large_menu.html.haml
+++ b/app/views/shared/menu/_large_menu.html.haml
@@ -18,24 +18,19 @@
%a{href: t("#{menu_name}_url") }
%span.nav-primary
= t "#{menu_name}_title"
- %ul.right
+ %ul.menu.icons.right
- if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
- %li.language-switcher.has-dropdown
- %a{href: '#'}
- %i.ofn-i_071-globe
- %ul.dropdown
- - OpenFoodNetwork::I18nConfig.selectable_locales.each do |l|
- %li
- %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
+ = render 'shared/menu/language_selector'
+
- if spree_current_user.nil?
- = render 'shared/signed_out'
+ = render 'shared/menu/signed_out'
- else
- = render 'shared/signed_in'
+ = render 'shared/menu/signed_in'
+
%li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.hub.id", "ng-cloak" => true}
%a{href: main_app.shop_path}
- %em
- = t 'label_shopping'
- @
- %span.nav-primary.nav-branded {{ CurrentHub.hub.name | truncate:25 }}
+ = t 'label_shopping'
+ = '@'
+ %span {{ CurrentHub.hub.name | truncate:25 }}
%li.cart{"ng-cloak" => true}
= render partial: "shared/menu/cart"
diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml
index 9fdfad4af8..8bd1e071e6 100644
--- a/app/views/shared/menu/_mobile_menu.html.haml
+++ b/app/views/shared/menu/_mobile_menu.html.haml
@@ -9,8 +9,15 @@
%img{src: ContentConfig.logo_mobile.url, srcset: ContentConfig.logo_mobile_svg.url, width: "75", height: "26"}
%section.right{"ng-cloak" => true}
- .cart
- = render partial: "shared/menu/cart"
+ %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
+ %a.icon{href: main_app.checkout_path}
+ %span
+ = t '.cart'
+ %span.count
+ %img{ src: "/assets/menu/icn-cart.svg" }
+ %span
+ {{ Cart.total_item_count() }}
+
%a{href: main_app.shop_path}
{{ CurrentHub.hub.name }}
@@ -39,6 +46,6 @@
%a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
%li
- if spree_current_user.nil?
- = render 'shared/signed_out'
+ = render 'shared/menu/signed_out'
- else
- = render 'shared/signed_in_offcanvas'
+ = render 'shared/menu/signed_in_offcanvas'
diff --git a/app/views/shared/_signed_in.html.haml b/app/views/shared/menu/_signed_in.html.haml
similarity index 72%
rename from app/views/shared/_signed_in.html.haml
rename to app/views/shared/menu/_signed_in.html.haml
index c155a7bff2..404600046d 100644
--- a/app/views/shared/_signed_in.html.haml
+++ b/app/views/shared/menu/_signed_in.html.haml
@@ -5,15 +5,17 @@
= t 'label_notices'
%li.user-menu.has-dropdown.not-click
-
- %a{href: "#"}
- %i.ofn-i_022-cog
-
+
+ %a{href: "#"}
+ %img{ src: "/assets/menu/icn-profile.svg" }
+ %span
+ = t '.profile'
+
%ul.dropdown
-
+
- if admin_user? or enterprise_user?
%li
- %a{href: spree.admin_path, target:'_blank'}
+ %a{href: spree.admin_path, target:'_blank'}
%i.ofn-i_021-tools
= t 'label_administration'
@@ -22,8 +24,8 @@
%i.ofn-i_015-user
= t 'label_account'
= "(" + spree_current_user.email + ")"
-
+
%li
- %a{title: t('label_logout'), href:'/logout' }
+ %a{title: t('label_logout'), href:'/logout' }
%i.ofn-i_018-unlocked
= t 'label_logout'
diff --git a/app/views/shared/_signed_in_offcanvas.html.haml b/app/views/shared/menu/_signed_in_offcanvas.html.haml
similarity index 80%
rename from app/views/shared/_signed_in_offcanvas.html.haml
rename to app/views/shared/menu/_signed_in_offcanvas.html.haml
index f34a03068f..7318ef42a1 100644
--- a/app/views/shared/_signed_in_offcanvas.html.haml
+++ b/app/views/shared/menu/_signed_in_offcanvas.html.haml
@@ -7,7 +7,7 @@
- if admin_user? or enterprise_user?
%li
- %a{href: spree.admin_path, target:'_blank'}
+ %a{href: spree.admin_path, target:'_blank'}
%i.ofn-i_021-tools
= t 'label_admin'
@@ -17,6 +17,6 @@
= t 'label_account'
%li
- %a{title: t('label_logout'), href:'/logout' }
+ %a{title: t('label_logout'), href:'/logout' }
%i.ofn-i_018-unlocked
= t 'label_logout'
diff --git a/app/views/shared/_signed_out.html.haml b/app/views/shared/menu/_signed_out.html.haml
similarity index 61%
rename from app/views/shared/_signed_out.html.haml
rename to app/views/shared/menu/_signed_out.html.haml
index 1e6efdc32a..fdb827031f 100644
--- a/app/views/shared/_signed_out.html.haml
+++ b/app/views/shared/menu/_signed_out.html.haml
@@ -1,5 +1,5 @@
%li#login-link
%a{"auth" => "login"}
- %i.ofn-i_017-locked
+ %img{ src: "/assets/menu/icn-login.svg" }
%span
= t 'label_login'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index bf914a13ea..c64fc87388 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1111,6 +1111,12 @@ en:
shared:
menu:
cart:
+ cart: "Cart"
+ signed_in:
+ profile: "Profile"
+ mobile_menu:
+ cart: "Cart"
+ joyride:
checkout: "Checkout now"
already_ordered_products: "Already ordered in this order cycle"
register_call:
diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb
index cc85757b71..cdbda93643 100644
--- a/spec/features/consumer/shopping/shopping_spec.rb
+++ b/spec/features/consumer/shopping/shopping_spec.rb
@@ -130,7 +130,7 @@ feature "As a consumer I want to shop with a distributor", js: true do
select "frogs", from: "order_cycle_id"
show_cart
page.should have_selector "tr.product-cart"
- page.should have_selector 'li.cart', text: '1 item'
+ page.should have_selector 'li.cart', text: '1'
# The order cycle choice should not have changed
page.should have_select 'order_cycle_id', selected: 'turtles'
@@ -154,14 +154,14 @@ feature "As a consumer I want to shop with a distributor", js: true do
expect(page).to have_content "Next order closing in 2 days"
visit shop_path
find("#cart").click
- expect(page).to have_text(I18n.t("shared.menu.cart.already_ordered_products"))
+ expect(page).to have_text(I18n.t("shared.menu.joyride.already_ordered_products"))
end
it "shows previous orders after selecting an order cycle" do
select "frogs", from: "order_cycle_id"
expect(page).to have_content "Next order closing in 2 days"
find("#cart").click
- expect(page).to have_text(I18n.t("shared.menu.cart.already_ordered_products"))
+ expect(page).to have_text(I18n.t("shared.menu.joyride.already_ordered_products"))
end
end
end