From ef85ac3e27f343f503328904d49d06724f3dd9eb Mon Sep 17 00:00:00 2001 From: andresgutgon Date: Sat, 19 Sep 2020 10:29:13 +0200 Subject: [PATCH] Fixed admin header buttons dropping multiple lines. --- .codeclimate.yml | 3 + .../stylesheets/admin/globals/variables.scss | 2 + .../stylesheets/admin/shared/layout.scss | 87 +++++++++++-------- app/assets/stylesheets/darkswarm/mixins.scss | 9 +- .../stylesheets/shared/variables/_layout.scss | 6 ++ app/views/admin/order_cycles/new.html.haml | 4 +- app/views/spree/admin/products/new.js.erb | 2 +- app/views/spree/layouts/_admin_body.html.haml | 20 ++--- spec/features/admin/enterprises/index_spec.rb | 2 +- spec/features/admin/order_spec.rb | 4 +- 10 files changed, 85 insertions(+), 54 deletions(-) create mode 100644 app/assets/stylesheets/shared/variables/_layout.scss diff --git a/.codeclimate.yml b/.codeclimate.yml index 1892bc1fb8..ff5e07ebb3 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -20,6 +20,9 @@ plugins: enabled: false DeclarationOrder: enabled: false + NestingDepth: + enabled: false + duplication: enabled: true exclude_patterns: diff --git a/app/assets/stylesheets/admin/globals/variables.scss b/app/assets/stylesheets/admin/globals/variables.scss index d5316cbd26..58547d3505 100644 --- a/app/assets/stylesheets/admin/globals/variables.scss +++ b/app/assets/stylesheets/admin/globals/variables.scss @@ -1,3 +1,5 @@ +@import 'shared/variables/layout'; + // ------------------------------------------------------------- // Variables used in all other files //-------------------------------------------------------------- diff --git a/app/assets/stylesheets/admin/shared/layout.scss b/app/assets/stylesheets/admin/shared/layout.scss index 71d5fbabed..4288e88266 100644 --- a/app/assets/stylesheets/admin/shared/layout.scss +++ b/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 { diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/assets/stylesheets/darkswarm/mixins.scss index 41f90679fa..43d291e14e 100644 --- a/app/assets/stylesheets/darkswarm/mixins.scss +++ b/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; } } } diff --git a/app/assets/stylesheets/shared/variables/_layout.scss b/app/assets/stylesheets/shared/variables/_layout.scss new file mode 100644 index 0000000000..69fe05af79 --- /dev/null +++ b/app/assets/stylesheets/shared/variables/_layout.scss @@ -0,0 +1,6 @@ +// Breakpoints +$desktop_breakpoint: 1024px; +$tablet_breakpoint: 768px; +$phablet_breakpoint: 640px; +$mobile_breakpoint: 480px; + diff --git a/app/views/admin/order_cycles/new.html.haml b/app/views/admin/order_cycles/new.html.haml index b6c4a43700..e01896ab8c 100644 --- a/app/views/admin/order_cycles/new.html.haml +++ b/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 diff --git a/app/views/spree/admin/products/new.js.erb b/app/views/spree/admin/products/new.js.erb index 04501de7b5..33c38aac13 100644 --- a/app/views/spree/admin/products/new.js.erb +++ b/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') %>'); diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml index 7b1d643dee..e93d15c542 100644 --- a/app/views/spree/layouts/_admin_body.html.haml +++ b/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 diff --git a/spec/features/admin/enterprises/index_spec.rb b/spec/features/admin/enterprises/index_spec.rb index 550879d3c1..e06f9dfb0d 100644 --- a/spec/features/admin/enterprises/index_spec.rb +++ b/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 diff --git a/spec/features/admin/order_spec.rb b/spec/features/admin/order_spec.rb index bfef4f6931..011d39581f 100644 --- a/spec/features/admin/order_spec.rb +++ b/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