diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss b/app/assets/stylesheets/darkswarm/embedded_shopfront.scss index 2db5181cdd..619ec692e4 100644 --- a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss +++ b/app/assets/stylesheets/darkswarm/embedded_shopfront.scss @@ -5,7 +5,7 @@ $large-menu-height: 4.6875rem; $medium-menu-height: 3rem; $gutter-width: 0.9375rem; -nav.top-bar ul.left li.powered-by { +.top-bar .powered-by { display: none; } diff --git a/app/assets/stylesheets/darkswarm/menu.scss b/app/assets/stylesheets/darkswarm/menu.scss index bd195cbb0e..a0b43fb030 100644 --- a/app/assets/stylesheets/darkswarm/menu.scss +++ b/app/assets/stylesheets/darkswarm/menu.scss @@ -44,6 +44,13 @@ nav.top-bar { .top-bar-section { border-bottom: 1px solid $light-grey-transparency; + display: flex; + justify-content: space-between; + + .nav-main-menu, + .nav-icons-menu { + flex-shrink: 0; + } a.icon { &:hover { @@ -99,21 +106,12 @@ nav.top-bar { } } - ul.center { - 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; - } - ul.dropdown { border: 1px solid $smoke; border-top: none; } - ul.right { + .nav-icons-menu { > li { border-left: 1px solid #ddd; padding: 0 14px; @@ -244,9 +242,7 @@ nav.top-bar { .top-bar .ofn-logo img { height: auto; - width: auto; max-height: 44px; - max-width: 250px; } .left-off-canvas-menu { @@ -289,10 +285,6 @@ nav.top-bar { .has-dropdown > a { padding: 0 ($topbar-height / 8) !important; } - - ul.center { - margin-left: -24px; - } } } diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index fefdcadefe..8403fd7300 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -1,6 +1,6 @@ %nav.top-bar.show-for-large-up{'data-topbar' => true} %section.top-bar-section - %ul.left + %ul.nav-logo %li.ofn-logo %a{href: main_app.root_path} %img{src: ContentConfig.logo.url} @@ -10,7 +10,7 @@ = t 'powered_by' %a{href: '/'} = t 'title' - %ul.center + %ul.nav-main-menu - [*1..7].each do |menu_number| - menu_name = "menu_#{menu_number}" - if ContentConfig[menu_name].present? @@ -18,7 +18,7 @@ %a{href: t("#{menu_name}_url") } %span.nav-primary = t "#{menu_name}_title" - %ul.menu.icons.right + %ul.nav-icons-menu - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1 = render 'shared/menu/language_selector' diff --git a/spec/features/consumer/multilingual_spec.rb b/spec/features/consumer/multilingual_spec.rb index 1a54a813d3..c70b2168e4 100644 --- a/spec/features/consumer/multilingual_spec.rb +++ b/spec/features/consumer/multilingual_spec.rb @@ -124,8 +124,8 @@ feature 'Multilingual', js: true do expect(page).to have_content 'SHOPS' - find('ul.right li.language-switcher').click - within 'ul.right li.language-switcher ul.dropdown' do + find('.language-switcher').click + within '.language-switcher .dropdown' do expect(page).to have_link I18n.t('language_name', locale: :en), href: '?locale=en' expect(page).to have_link I18n.t('language_name', locale: :es, default: 'Language Name'), href: '?locale=es' diff --git a/spec/features/consumer/shopping/embedded_shopfronts_spec.rb b/spec/features/consumer/shopping/embedded_shopfronts_spec.rb index e587801540..506845718e 100644 --- a/spec/features/consumer/shopping/embedded_shopfronts_spec.rb +++ b/spec/features/consumer/shopping/embedded_shopfronts_spec.rb @@ -33,9 +33,9 @@ feature "Using embedded shopfront functionality", js: true do it "displays modified shopfront layout" do on_embedded_page do - within 'nav.top-bar' do - expect(page).to have_selector 'ul.left', visible: false - expect(page).to have_selector 'ul.center', visible: false + within '.top-bar' do + expect(page).to have_selector '.nav-logo', visible: false + expect(page).to have_selector '.nav-main-menu', visible: false end expect(page).to have_content "My Embedded Hub" @@ -91,11 +91,11 @@ feature "Using embedded shopfront functionality", js: true do it "redirects to embedded hub on logout when embedded" do on_embedded_page do wait_for_cart - find('ul.right li#login-link a').click + find('#login-link a').click login_with_modal wait_for_cart - wait_until { page.find('ul.right li.user-menu.has-dropdown').value.present? } + wait_until { page.find('.user-menu.has-dropdown').value.present? } logout_via_navigation expect(page).to have_text 'My Embedded Hub' @@ -118,7 +118,7 @@ feature "Using embedded shopfront functionality", js: true do end def logout_via_navigation - first('ul.right li.user-menu a').click - find('ul.right ul.dropdown li a[title="Logout"]').click + first('.user-menu a').click + find('.nav-icons-menu a[title="Logout"]').click end end