tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Styling updates for the Campaign edit form

Browse Source
This commit is contained in:
David Craig 2016-04-21 15:33:10 +12:00 committed by Ingo Schommer
parent 1ad6730b9e
commit a15a392bd3
4 changed files with 42 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/client/src/components/NorthHeader/NorthHeader.js
View File

@ -15,7 +15,7 @@ class NorthHeader extends SilverStripeComponent {
'btn-secondary',
'action',
'font-icon-left-open',
'toolbar__navigation__back-button',
'toolbar__back-button',
];
const backButtonProps = {
className: buttonClassNames.join(' '),

58
admin/client/src/components/NorthHeader/NorthHeader.scss
View File

@ -1,32 +1,44 @@
.north-header {
border-bottom: 1px solid $border-color-dark;
background-color: $background-north;
width: 100%;
.toolbar {
width: 100%; // 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;
}
}
// Northern bar containing breadcrum, tabs etc.
.toolbar--north {
@extend .toolbar;
padding-left: $spacer-x; // Todo: replace with mixin @include make-container();
padding-right: $spacer-x; // Todo: replace with mixin @include make-container();
display: block;
background-image: none;
background-color: $background-north;
border-bottom: 1px solid $border-color;
z-index: 60;
}
// Typically to hold breadcrumbs and back button
.north-header__navigation {
float: left;
padding: 0 $spacer-y;
max-width: 70%;
max-height: $toolbar-height;
// Secondary content actions eg. Add page button
.toolbar--content {
@extend .toolbar;
padding: $spacer-y*.625 $spacer-x*.75;
margin-bottom: $spacer-y/2;
}
.toolbar__navigation__back-button {
// Primary content actions
.toolbar--south {
@extend .toolbar;
padding: $spacer-y*.625 $spacer-x;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
}
.toolbar__back-button {
float: left;
margin: $spacer-y/2 $spacer-x $spacer-y/2 0;
}
.north-header__heading {
font-size: $font-size-lg;
font-weight: normal;
line-height: 20px;
margin: $spacer-y 0;
}
// To hold things like search icon and view toggle
.north-header__actions {
}

5
admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
View File

@ -147,7 +147,9 @@ class CampaignAdmin extends SilverStripeComponent {
<div className="cms-middle no-preview">
<div className="cms-campaigns collapse in" aria-expanded="true">
<NorthHeader showBackButton>
<h2 className="text-truncate north-header__heading">Campaigns</h2>
<div className="breadcrumb breadcrumb--current-only">
<h2 className="text-truncate toolbar__heading">Campaigns</h2>
</div>
</NorthHeader>
<FormBuilder {...formBuilderProps} />
</div>
@ -225,6 +227,7 @@ class CampaignAdmin extends SilverStripeComponent {
campaignEditCreateFn(Component, props) {
if (props.name === 'action_save') {
const extendedProps = Object.assign({}, props, {
bootstrapButtonStyle: 'success',
type: 'submit',
label: props.title,
icon: 'save',

42
admin/client/src/styles/_layout.scss
View File

@ -53,45 +53,3 @@
}
}
}
// TOOLBARS
.toolbar {
width: 100%; // 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;
}
}
// Northern bar containing breadcrum, tabs etc.
.toolbar--north {
@extend .toolbar;
padding-left: $spacer-x; // Todo: replace with mixin @include make-container();
padding-right: $spacer-x; // Todo: replace with mixin @include make-container();
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: $spacer-y*.625 $spacer-x*.75;
margin-bottom: $spacer-y/2;
}
// Primary content actions
.toolbar--south {
@extend .toolbar;
padding: $spacer-y*.625 $spacer-x;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
}