mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
improved consistency of toolbars included in preview and other areas of cms
This commit is contained in:
Paul Clarke
Ingo Schommer
parent
6cd5bf2f3f
commit
cc7170d424
@ -24,7 +24,7 @@ class BreadcrumbComponent extends SilverStripeComponent {
|
||||
]),
|
||||
this.props.crumbs.slice(-1).map((crumb, index) => [
|
||||
<li className="breadcrumb__item breadcrumb__item--last">
|
||||
<h2 className="breadcrumb__item-title breadcrumb__item-title--last" key={index}>
|
||||
<h2 className="breadcrumb__item-title breadcrumb__item-title--last text-truncate" key={index}>
|
||||
{crumb.text}
|
||||
</h2>
|
||||
</li>,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
#NorthHeader
|
||||
|
||||
The main header for sections in the CMS.
|
||||
Styles are contained within layout.scss
|
||||
|
||||
## Props
|
||||
@ -5,10 +5,8 @@ class NorthHeaderComponent extends SilverStripeComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="north-header container-fluid">
|
||||
<div className="north-header__navigation">
|
||||
{this.props.children}
|
||||
</div>
|
||||
<div className="toolbar--north container-fluid">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ class CampaignPreview extends SilverStripeComponent {
|
||||
<div className="preview__file-container panel-scrollable">
|
||||
<img className="preview__file" src="http://placehold.it/250x150" />
|
||||
</div>
|
||||
<div className="south-actions">
|
||||
<div className="toolbar--south">
|
||||
<div className="btn-toolbar">
|
||||
<button className="btn btn-secondary" type="button">Edit</button>
|
||||
<button type="button" data-container="body" className="btn btn-link" data-toggle="popover" title="Page actions" data-placement="top" data-content="<a href=''>Add to campaign</a><a href=''>Remove from campaign</a>">...</button>
|
||||
|
||||
@ -86,7 +86,9 @@ class CampaignAdminContainer extends SilverStripeComponent {
|
||||
<div className="cms-content__inner no-preview">
|
||||
<div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
|
||||
<NorthHeader>
|
||||
<h2 className="text-truncate north-header__heading">Campaigns</h2>
|
||||
<div className="breadcrumb breadcrumb--current-only">
|
||||
<h2 className="text-truncate breadcrumb__item-title breadcrumb__item-title--last">Campaigns</h2>
|
||||
</div>
|
||||
</NorthHeader>
|
||||
<div className="container-fluid panel-scrollable">
|
||||
<div className="content-toolbar">
|
||||
|
||||
@ -93,7 +93,7 @@ class CampaignListContainer extends SilverStripeComponent {
|
||||
{accordionGroups}
|
||||
</Accordion>
|
||||
</div>
|
||||
<div className="cms-south-actions">
|
||||
<div className="toolbar--south">
|
||||
{this.renderButtonToolbar()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -251,6 +251,9 @@ body.cms {
|
||||
padding-top: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.cms-panel-toggle.south {
|
||||
border-top: 1px solid $color-light-separator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user