Merge pull request #6336 from coopdevs/fix-shop-layout

Fix .top-bar-section not to wrap the icons-menu

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;
 }
 

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;
-    }
   }
 }
 

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'
 

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'
 

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