Merge pull request #6020 from andresgutgon/fix/admin-menu-in-multiple-lines

Fixed admin header buttons dropping multiple lines.

.codeclimate.yml

@@ -20,6 +20,9 @@ plugins:
         enabled: false
       DeclarationOrder:
         enabled: false
+      NestingDepth:
+        enabled: false
+
   duplication:
     enabled: true
     exclude_patterns:

app/assets/stylesheets/admin/globals/variables.scss

@@ -1,3 +1,5 @@
+@import 'shared/variables/layout';
+
 // -------------------------------------------------------------
 //   Variables used in all other files
 //--------------------------------------------------------------

app/assets/stylesheets/admin/shared/layout.scss

@@ -8,23 +8,61 @@
           box-sizing: border-box;
 }
 
-// Helpers
-.block-table {
-  display: table;
-  width: 100%;
+.admin {
+  &__section-header {
+    padding: 15px 0;
+    background-color: very-light($color-3, 4);
+    border-bottom: 1px solid $color-border;
 
-  .table-cell {
-    display: table-cell;
-    vertical-align: middle;
-    padding: 0 10px;
-
-    &:first-child {
-      padding-left: 0;
-      width: 70%;
+    .ofn-drop-down {
+      border: 0;
+      background-color: $spree-blue;
+      color: $color-1;
+      float: none;
+      margin-left: 3px;
+      &:hover,
+      &.expanded {
+        border: 0;
+        color: $color-1;
+      }
     }
-    &:last-child {
-      padding-right: 0;
-      width: 30%;
+
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      @media all and (min-width: $tablet_breakpoint) {
+        flex-wrap: nowrap;
+      }
+    }
+
+    &__title {
+      width: 100%;
+      margin-bottom: 10px;
+      @media all and (min-width: $tablet_breakpoint) {
+        margin-bottom: 0;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      flex: 1 0 auto;
+      align-items: center;
+      list-style: none;
+      @media all and (min-width: $tablet_breakpoint) {
+        justify-content: flex-end;
+      }
+      > li {
+        display: flex;
+        margin-right: 10px;
+        &:empty {
+          display: none;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
     }
   }
 }
@@ -66,25 +104,6 @@
   margin-top: 15px;
 }
 
-#content-header {
-  padding: 15px 0;
-  background-color: very-light($color-3, 4);
-  border-bottom: 1px solid $color-border;
-
-  .page-title {
-    font-size: 20px;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .page-actions {
-    text-align: right;
-    form {
-      display: inline-block;
-    }
-  }
-}
-
 // Footer
 //---------------------------------------------------
 #footer {

app/assets/stylesheets/darkswarm/mixins.scss

@@ -1,4 +1,5 @@
 // Note this mixin file is used in ADMIN and FRONTEND
+@import 'shared/variables/layout';
 
 @import "branding";
 
@@ -258,15 +259,15 @@
 
 @mixin breakpoint($point) {
   @if $point == desktop {
-    @media all and (max-width: 1024px) { @content; }
+    @media all and (max-width: $desktop_breakpoint) { @content; }
   }
   @else if $point == tablet {
-    @media all and (max-width: 768px) { @content; }
+    @media all and (max-width: $tablet_breakpoint) { @content; }
   }
   @else if $point == phablet {
-    @media all and (max-width: 640px)  { @content; }
+    @media all and (max-width: $phablet_breakpoint)  { @content; }
   }
   @else if $point == mobile {
-    @media all and (max-width: 480px)  { @content; }
+    @media all and (max-width: $mobile_breakpoint)  { @content; }
   }
 }

app/assets/stylesheets/shared/variables/_layout.scss

@@ -0,0 +1,6 @@
+// Breakpoints
+$desktop_breakpoint: 1024px;
+$tablet_breakpoint: 768px;
+$phablet_breakpoint: 640px;
+$mobile_breakpoint: 480px;
+

app/views/admin/order_cycles/new.html.haml

@@ -1,5 +1,5 @@
-%h1
-  =t'new_order_cycle'
+- content_for :page_title do
+  =t('new_order_cycle')
 
 - ng_controller = order_cycles_simple_form ? 'AdminSimpleCreateOrderCycleCtrl' : 'AdminCreateOrderCycleCtrl'
 = admin_inject_order_cycle_instance

app/views/spree/admin/products/new.js.erb

@@ -9,4 +9,4 @@ $("#admin_new_product").parent().hide();
 
 <%# We need to replace the page's title as well. We're navigating to a new page
   although through ajax %>
-$('#content-header .page-title').html('<%= t('.title') %>');
+$('.js-admin-page-title').html('<%= t('.title') %>');

app/views/spree/layouts/_admin_body.html.haml

@@ -1,7 +1,7 @@
 = admin_inject_currency_config
 = render "layouts/i18n_script"
 
-#wrapper{"data-hook" => ""}
+#wrapper{ data: { hook: '' } }
   - if flash[:error]
     .flash.error= flash[:error]
   - if notice
@@ -18,30 +18,30 @@
       %nav.columns.eleven{"data-hook" => "admin_login_navigation_bar"}
         = render :partial => 'spree/layouts/admin/login_nav'
 
-  %nav#admin-menu{"data-hook" => ""}
+  %nav#admin-menu{ data: { hook: '' }}
     .container
       .sixteen.columns.main-menu-wrapper
         %ul.inline-menu.fullwidth-menu{"data-hook" => "admin_tabs"}
           = render :partial => 'spree/admin/shared/tabs'
 
   - if content_for?(:sub_menu)
-    %nav#sub-menu{"data-hook" => ""}
+    %nav#sub-menu{ data: { hook: ''} }
       .container
         .sixteen.columns
           = yield :sub_menu
 
   - if content_for?(:page_title) || content_for?(:page_actions)
-    #content-header{"data-hook" => ""}
+    .js-admin-section-header.admin__section-header{ data: { hook: '' } }
       .container
         .sixteen.columns
-          .block-table
+          .admin__section-header__content
             - if content_for?(:page_title)
-              .table-cell
-                %h1{:class => "page-title"}= yield :page_title
+              .admin__section-header__title
+                %h1.js-admin-page-title= yield :page_title
+
             - if content_for?(:page_actions)
-              .page-actions.table-cell.toolbar{"data-hook" => "toolbar"}
-                %ul.inline-menu
-                  = yield :page_actions
+              %ul.admin__section-header__actions{ data: { hook: 'toolbar' } }
+                = yield :page_actions
 
   .container
     .row

spec/features/admin/enterprises/index_spec.rb

@@ -139,7 +139,7 @@ feature 'Enterprises Index' do
         expect(page).to have_no_content "supplier2.name"
         expect(page).to have_no_content "distributor2.name"
 
-        expect(find("#content-header")).to have_link "New Enterprise"
+        expect(find('.js-admin-section-header')).to have_link "New Enterprise"
       end
 
       it "does not give me an option to change or update the package and producer properties of enterprises I manage" do

spec/features/admin/order_spec.rb

@@ -151,7 +151,7 @@ feature '
     page.has_selector? "table.index tbody[data-hook='admin_order_form_line_items'] tr" # Wait for JS
     click_button 'Update'
 
-    expect(page).to have_selector 'h1.page-title', text: "Customer Details"
+    expect(page).to have_selector 'h1.js-admin-page-title', text: "Customer Details"
 
     # The customer selection partial should be visible
     expect(page).to have_selector '#select-customer'
@@ -160,7 +160,7 @@ feature '
     targetted_select2_search customer.email, from: '#customer_search_override',
                                              dropdown_css: '.select2-drop'
     click_button 'Update'
-    expect(page).to have_selector "h1.page-title", text: "Customer Details"
+    expect(page).to have_selector "h1.js-admin-page-title", text: "Customer Details"
 
     # Then their addresses should be associated with the order
     order = Spree::Order.last