From cc7170d424541cf56ba626a86adb0764b3777962 Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Tue, 19 Apr 2016 16:37:25 +1200 Subject: [PATCH] improved consistency of toolbars included in preview and other areas of cms --- .../client/src/components/breadcrumb/index.js | 2 +- .../src/components/breadcrumb/styles.scss | 11 ++++- .../src/components/north-header/README.md | 3 +- .../src/components/north-header/index.js | 6 +-- admin/client/src/components/preview/index.js | 2 +- .../src/sections/campaign-admin/controller.js | 4 +- .../src/sections/campaign-admin/list.js | 2 +- .../src/sections/campaign-admin/styles.scss | 4 +- admin/client/src/styles/_layout.scss | 44 ++++++++++++++----- admin/client/src/styles/_variables.scss | 16 +++---- admin/client/src/styles/bundle.scss | 1 - admin/client/src/styles/legacy/_menu.scss | 9 ++-- admin/client/src/styles/legacy/_style.scss | 3 ++ 13 files changed, 68 insertions(+), 39 deletions(-) diff --git a/admin/client/src/components/breadcrumb/index.js b/admin/client/src/components/breadcrumb/index.js index f55c7e13d..0e79d7395 100644 --- a/admin/client/src/components/breadcrumb/index.js +++ b/admin/client/src/components/breadcrumb/index.js @@ -24,7 +24,7 @@ class BreadcrumbComponent extends SilverStripeComponent { ]), this.props.crumbs.slice(-1).map((crumb, index) => [
  • -

    +

    {crumb.text}

    • , diff --git a/admin/client/src/components/breadcrumb/styles.scss b/admin/client/src/components/breadcrumb/styles.scss index 6140b8221..38f2bae2b 100644 --- a/admin/client/src/components/breadcrumb/styles.scss +++ b/admin/client/src/components/breadcrumb/styles.scss @@ -1,7 +1,14 @@ .breadcrumb { font-size: $font-size-xs; - line-height: 16px; + line-height: 14px; margin-bottom: 0; + float: left; + max-width: 70%; + max-height: $toolbar-height; +} + +.breadcrumb--current-only { // Todo: move to breadcrumb + padding: 14px 0; } .breadcrumb__item {} @@ -17,5 +24,5 @@ margin: 0; font-size: $font-size-lg; font-weight: normal; - line-height: 22px; + line-height: 24px; } diff --git a/admin/client/src/components/north-header/README.md b/admin/client/src/components/north-header/README.md index 9346a030c..bf8975aea 100644 --- a/admin/client/src/components/north-header/README.md +++ b/admin/client/src/components/north-header/README.md @@ -1,5 +1,6 @@ #NorthHeader The main header for sections in the CMS. +Styles are contained within layout.scss -## Props \ No newline at end of file +## Props diff --git a/admin/client/src/components/north-header/index.js b/admin/client/src/components/north-header/index.js index 455273af6..6db30b4d8 100644 --- a/admin/client/src/components/north-header/index.js +++ b/admin/client/src/components/north-header/index.js @@ -5,10 +5,8 @@ class NorthHeaderComponent extends SilverStripeComponent { render() { return ( -
    -
    - {this.props.children} -
    +
    + {this.props.children}
    ); } diff --git a/admin/client/src/components/preview/index.js b/admin/client/src/components/preview/index.js index 42bf10929..6ead26d7f 100644 --- a/admin/client/src/components/preview/index.js +++ b/admin/client/src/components/preview/index.js @@ -16,7 +16,7 @@ class CampaignPreview extends SilverStripeComponent {
    -
    +
    diff --git a/admin/client/src/sections/campaign-admin/controller.js b/admin/client/src/sections/campaign-admin/controller.js index a2cb3a1ef..5bf5cdb12 100644 --- a/admin/client/src/sections/campaign-admin/controller.js +++ b/admin/client/src/sections/campaign-admin/controller.js @@ -86,7 +86,9 @@ class CampaignAdminContainer extends SilverStripeComponent {
    -

    Campaigns

    +
    +

    Campaigns

    +
    diff --git a/admin/client/src/sections/campaign-admin/list.js b/admin/client/src/sections/campaign-admin/list.js index 9515f65a2..deeeb91b3 100644 --- a/admin/client/src/sections/campaign-admin/list.js +++ b/admin/client/src/sections/campaign-admin/list.js @@ -93,7 +93,7 @@ class CampaignListContainer extends SilverStripeComponent { {accordionGroups}
    -
    +
    {this.renderButtonToolbar()}
    diff --git a/admin/client/src/sections/campaign-admin/styles.scss b/admin/client/src/sections/campaign-admin/styles.scss index 98cfba991..b6a9e01c9 100644 --- a/admin/client/src/sections/campaign-admin/styles.scss +++ b/admin/client/src/sections/campaign-admin/styles.scss @@ -8,8 +8,8 @@ } .list-group-item { - padding-left: #{$spacer-y * 1.25}; - padding-right: #{$spacer-y * 1.25}; + padding-left: $spacer-y; + padding-right: $spacer-y; min-height: 64px; cursor: pointer; text-decoration: none; diff --git a/admin/client/src/styles/_layout.scss b/admin/client/src/styles/_layout.scss index 585f5fa6a..10ab3c5a8 100644 --- a/admin/client/src/styles/_layout.scss +++ b/admin/client/src/styles/_layout.scss @@ -43,23 +43,47 @@ } } } -.south-actions { - height: $toolbar-total-height; - position: absolute; - bottom: 0; - width: 100%; - border-top: 1px solid $border-color; - background-color: $body-bg; - padding: $spacer-y*.625 $spacer-x; + + +// TOOLBARS +.toolbar { + width: 100%; // Todo: replace with mixin @include make-container(); + padding-left: $spacer-x; // Todo: replace with mixin @include make-container(); + padding-right: $spacer-x; // Todo: replace with mixin @include make-container(); + height: $toolbar-total-height; + background-color: $body-bg; + + .btn-toolbar { + // TODO Remove '.cms .btn-toolbar' override + margin-top: 0; + margin-bottom: 0; + } } -.content-toolbar { +// Northern bar containing breadcrum, tabs etc. +.toolbar--north { + @extend .cms-content-header; // Todo: Remove dependency on .cms-content-header and use breadcrumb component @extend .toolbar; + display: block; + background-image: none; + background-color: $background-north; + border-bottom: 1px solid $border-color; + z-index: 60; +} + +// Secondary content actions eg. Add page button +.toolbar--content { + @extend .toolbar; + padding-top: $spacer-y*.625; + padding-bottom: $spacer-y*.625; margin-bottom: $spacer-y/2; } -.cms-south-actions { +// Primary content actions +.toolbar--south { @extend .toolbar; + padding-top: $spacer-y*.625; + padding-bottom: $spacer-y*.625; position: absolute; bottom: 0; border-top: 1px solid $border-color; diff --git a/admin/client/src/styles/_variables.scss b/admin/client/src/styles/_variables.scss index f5c8487f1..476a659ea 100644 --- a/admin/client/src/styles/_variables.scss +++ b/admin/client/src/styles/_variables.scss @@ -145,8 +145,8 @@ $container-max-widths: ( // // Set the number of columns and specify the width of the gutters. -// $grid-columns: 12; -$grid-gutter-width: 2.4615rem; // now 32px, was 1.875rem; ~ 30px +// $grid-columns: 12; +$grid-gutter-width: $spacer*2; // Typography @@ -386,7 +386,7 @@ $btn-danger-border: transparent; // Used for ui layout which contains main actions, seconday page action, top breadcrumbs and navigation bars. $toolbar-height: 52px; -$toolbar-total-height: $toolbar-height + 1px; // Add border +$toolbar-total-height: $toolbar-height + 1px; // Include border // Navbar @@ -648,14 +648,8 @@ $navbar-padding-vertical: ($spacer / 2); // Breadcrumbs -// $breadcrumb-padding-vertical: .75rem; -// $breadcrumb-padding-horizontal: 1rem; -// -// $breadcrumb-bg: $gray-lighter; -// $breadcrumb-divider-color: $gray-light; -// $breadcrumb-active-color: $gray-light; -// $breadcrumb-divider: "/"; - +$breadcrumb-padding-vertical: 7px; +$breadcrumb-padding-horizontal: 0; $breadcrumb-bg: transparent; $breadcrumb-divider-color: $border-color-dark; $breadcrumb-active-color: $body-color; diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss index 3abe335b9..7ef44049c 100644 --- a/admin/client/src/styles/bundle.scss +++ b/admin/client/src/styles/bundle.scss @@ -33,7 +33,6 @@ @import "../components/form-action/styles"; @import "../components/grid-field/styles"; @import "../components/hidden-field/styles"; -@import "../components/north-header/styles"; @import "../components/preview/styles"; // Layout and sections diff --git a/admin/client/src/styles/legacy/_menu.scss b/admin/client/src/styles/legacy/_menu.scss index 80b2d6a7f..a9436d1ad 100644 --- a/admin/client/src/styles/legacy/_menu.scss +++ b/admin/client/src/styles/legacy/_menu.scss @@ -9,11 +9,12 @@ .cms-logo-header { position: relative !important; - top:auto !important; - height:auto !important; + top: auto !important; + height: auto !important; // Required for JLayout padding: 0; line-height: 24px; background-color: $color-brand-bg; + min-height: $toolbar-total-height*2; span { color: $color-text-light; @@ -28,7 +29,7 @@ } .cms-logo { - box-shadow: inset 0 -1px darken($color-brand-bg, 4%); + border-bottom: 1px solid darken($color-brand-bg, 4%); overflow: hidden; padding: $grid-y*1.5 8px; position: relative; @@ -173,7 +174,7 @@ } .cms-panel-toggle { - height: 53px; + height: $toolbar-total-height; &.south { background-color: $color-theme-bg; diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss index 6a990cd45..d1b97dcbb 100644 --- a/admin/client/src/styles/legacy/_style.scss +++ b/admin/client/src/styles/legacy/_style.scss @@ -251,6 +251,9 @@ body.cms { padding-top: 0; overflow-x: hidden; } + .cms-panel-toggle.south { + border-top: 1px solid $color-light-separator; + } } }