From 06ed9c838e61135eef85387482209a5fc18176e8 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 3 Jul 2019 00:25:32 +0800 Subject: [PATCH 1/5] Remove extra left padding from top bar menu items --- app/assets/stylesheets/darkswarm/variables.css.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss index bf1db3eadc..58973f47eb 100644 --- a/app/assets/stylesheets/darkswarm/variables.css.scss +++ b/app/assets/stylesheets/darkswarm/variables.css.scss @@ -15,6 +15,7 @@ $brand-colour: #f27052; // Topbar $topbar-height: rem-calc(64); $topbar-link-padding: $topbar-height / 3; +$topbar-arrows: false; $topbar-bg: $white; $topbar-bg-color: $topbar-bg; From 653067f58ccf07e5964ae797e63595eec2b449a7 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 3 Jul 2019 01:22:34 +0800 Subject: [PATCH 2/5] Omit text for top bar items with icon in large This affects only top bar menu items for: * Language * Profile This does not update the "Log in" menu item, because the currently selected icon might not be self explanatory. --- app/assets/stylesheets/darkswarm/menu.css.scss | 15 +++++++++++++++ .../shared/menu/_language_selector.html.haml | 4 ++-- app/views/shared/menu/_signed_in.html.haml | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index 87e731133c..564625d8e1 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -13,6 +13,21 @@ nav.top-bar { height: $topbar-height; } +@media #{$large-only} { + .top-bar__menu-item-with-icon span { + display: none; + } +} + +.top-bar-section ul li > a.top-bar__menu-item-with-icon { + display: inline; +} + +.top-bar__menu-item-with-icon i, +.top-bar__menu-item-with-icon img { + line-height: $topbar-height; +} + .top-bar-section { a.icon { &:hover { diff --git a/app/views/shared/menu/_language_selector.html.haml b/app/views/shared/menu/_language_selector.html.haml index 3e38095272..2a5dd1439e 100644 --- a/app/views/shared/menu/_language_selector.html.haml +++ b/app/views/shared/menu/_language_selector.html.haml @@ -1,8 +1,8 @@ %li.language-switcher.has-dropdown - %a{href: '#'} + %a{href: '#', class: "top-bar__menu-item-with-icon"} %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 + %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l) diff --git a/app/views/shared/menu/_signed_in.html.haml b/app/views/shared/menu/_signed_in.html.haml index 404600046d..063e98e9cc 100644 --- a/app/views/shared/menu/_signed_in.html.haml +++ b/app/views/shared/menu/_signed_in.html.haml @@ -6,7 +6,7 @@ %li.user-menu.has-dropdown.not-click - %a{href: "#"} + %a{href: "#", class: "top-bar__menu-item-with-icon"} %img{ src: "/assets/menu/icn-profile.svg" } %span = t '.profile' From 6d1dd7659000d49715511b9987da8c9fd667bd0b Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 3 Jul 2019 02:34:43 +0800 Subject: [PATCH 3/5] Cap width of hub name in top bar and wrap --- app/assets/stylesheets/darkswarm/menu.css.scss | 13 +++++++++++++ app/views/shared/menu/_large_menu.html.haml | 7 ++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index 564625d8e1..077d12219e 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -17,6 +17,19 @@ nav.top-bar { .top-bar__menu-item-with-icon span { display: none; } + + .top-bar__current-hub-prefix, + .top-bar__current-hub-name { + display: inline-block; + vertical-align: middle; + } + + .top-bar__current-hub-name { + max-width: 10em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .top-bar-section ul li > a.top-bar__menu-item-with-icon { diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index 933fee7d93..a756ebfc11 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -29,8 +29,9 @@ %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.hub.id", "ng-cloak" => true} %a{href: main_app.shop_path} - = t 'label_shopping' - = '@' - %span {{ CurrentHub.hub.name | truncate:25 }} + %span{ class: "top-bar__current-hub-prefix" } + = t 'label_shopping' + = '@' + %span{ class: "top-bar__current-hub-name" } {{ CurrentHub.hub.name | truncate:25 }} %li.cart{"ng-cloak" => true} = render partial: "shared/menu/cart" From 691d7d735b09a5769c99f6748da8dcd50afd5355 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 3 Jul 2019 04:35:44 +0800 Subject: [PATCH 4/5] Reduce padding between top bar menu items --- app/assets/stylesheets/darkswarm/variables.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss index 58973f47eb..0b8104cea1 100644 --- a/app/assets/stylesheets/darkswarm/variables.css.scss +++ b/app/assets/stylesheets/darkswarm/variables.css.scss @@ -14,7 +14,7 @@ $brand-colour: #f27052; // Topbar $topbar-height: rem-calc(64); -$topbar-link-padding: $topbar-height / 3; +$topbar-link-padding: $topbar-height / 4; $topbar-arrows: false; $topbar-bg: $white; From 3e37c8a3f1980f59376073b58bcfae72cb5d6c1b Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 3 Jul 2019 04:43:35 +0800 Subject: [PATCH 5/5] Change underscores in CSS classes to hyphens These were triggering a warning from scss-lint. --- app/assets/stylesheets/darkswarm/menu.css.scss | 14 +++++++------- app/views/shared/menu/_language_selector.html.haml | 2 +- app/views/shared/menu/_large_menu.html.haml | 4 ++-- app/views/shared/menu/_signed_in.html.haml | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index 077d12219e..5d2a07e3a6 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -14,17 +14,17 @@ nav.top-bar { } @media #{$large-only} { - .top-bar__menu-item-with-icon span { + .top-bar--menu-item-with-icon span { display: none; } - .top-bar__current-hub-prefix, - .top-bar__current-hub-name { + .top-bar--current-hub-prefix, + .top-bar--current-hub-name { display: inline-block; vertical-align: middle; } - .top-bar__current-hub-name { + .top-bar--current-hub-name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; @@ -32,12 +32,12 @@ nav.top-bar { } } -.top-bar-section ul li > a.top-bar__menu-item-with-icon { +.top-bar-section ul li > a.top-bar--menu-item-with-icon { display: inline; } -.top-bar__menu-item-with-icon i, -.top-bar__menu-item-with-icon img { +.top-bar--menu-item-with-icon i, +.top-bar--menu-item-with-icon img { line-height: $topbar-height; } diff --git a/app/views/shared/menu/_language_selector.html.haml b/app/views/shared/menu/_language_selector.html.haml index 2a5dd1439e..b69205f61e 100644 --- a/app/views/shared/menu/_language_selector.html.haml +++ b/app/views/shared/menu/_language_selector.html.haml @@ -1,5 +1,5 @@ %li.language-switcher.has-dropdown - %a{href: '#', class: "top-bar__menu-item-with-icon"} + %a{href: '#', class: "top-bar--menu-item-with-icon"} %i.ofn-i_071-globe %span= t 'language_name' %ul.dropdown diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index a756ebfc11..aa814a2a36 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -29,9 +29,9 @@ %li.current_hub{"ng-controller" => "CurrentHubCtrl", "ng-show" => "CurrentHub.hub.id", "ng-cloak" => true} %a{href: main_app.shop_path} - %span{ class: "top-bar__current-hub-prefix" } + %span{ class: "top-bar--current-hub-prefix" } = t 'label_shopping' = '@' - %span{ class: "top-bar__current-hub-name" } {{ CurrentHub.hub.name | truncate:25 }} + %span{ class: "top-bar--current-hub-name" } {{ CurrentHub.hub.name | truncate:25 }} %li.cart{"ng-cloak" => true} = render partial: "shared/menu/cart" diff --git a/app/views/shared/menu/_signed_in.html.haml b/app/views/shared/menu/_signed_in.html.haml index 063e98e9cc..d7b3715c4f 100644 --- a/app/views/shared/menu/_signed_in.html.haml +++ b/app/views/shared/menu/_signed_in.html.haml @@ -6,7 +6,7 @@ %li.user-menu.has-dropdown.not-click - %a{href: "#", class: "top-bar__menu-item-with-icon"} + %a{href: "#", class: "top-bar--menu-item-with-icon"} %img{ src: "/assets/menu/icn-profile.svg" } %span = t '.profile'