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

Temp work in progress- to clean up

Browse Source
This commit is contained in:
Paul Clarke 2016-10-06 15:43:15 +13:00 committed by Damian Mooyman
parent a37bf87857
commit eb7a8be3f8
9 changed files with 44 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
admin/client/dist/styles/bundle.css vendored
View File

@ -9353,10 +9353,6 @@ body.cms{
background:#f6f7f8;
}
.cms-content,.cms-content-fields,.cms-content-header,.cms-content-tools,.cms-menu,.cms-preview,.cms-preview-controls,.cms-preview iframe{
display:inline-block;
}
.cms-content-header{
padding-left:1.5385rem;
padding-right:1.5385rem;
@ -10500,9 +10496,7 @@ form.member-profile-form #Permissions .optionset li{
}
.cms .cms-content{
border-radius:0;
background:#f6f7f8;
z-index:40;
}
.cms .cms-content-fields{
@ -15391,7 +15385,6 @@ div.grid-field__sort-field+.form__fieldgroup-item{
}
.toolbar--north{
display:block;
background-image:none;
background-color:#f0f2f4;
border-bottom:1px solid #d9dee2;
@ -15901,14 +15894,11 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
}
.cms-content__split--left-sm .cms-content__right{
position:relative;
display:none;
}
.cms-content__split--left-sm .cms-content__left{
width:100%;
position:absolute;
left:0;
}
.cms-content__split--left-sm .cms-content--selected{
@ -15940,10 +15930,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
}
@media (min-width:992px){
.cms-content__split--left-sm{
padding-left:300px;
}
.cms-content__split--left-sm .cms-content__left{
width:300px;
}
@ -15959,10 +15945,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
}
@media (min-width:1200px){
.cms-content__split--left-sm{
padding-left:448px;
}
.cms-content__split--left-sm .cms-content__left{
width:448px;
}

4
admin/client/src/components/Preview/Preview.js
View File

@ -62,10 +62,10 @@ class Preview extends SilverStripeComponent {
// Combine elements
return (
<div className="cms-content__right preview">
<div className="flexbox-area-grow cms-content__right preview">
{body}
<a href="" className="cms-content__back-btn font-icon-left-open-big" />
<div className="toolbar--south">
<div className="toolbar toolbar--south">
<div className="btn-toolbar">
{toolbarButtons}
</div>

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

@ -26,7 +26,7 @@ class Toolbar extends SilverStripeComponent {
};
return (
<div className="toolbar--north container-fluid">
<div className="toolbar toolbar--north">
<div className="toolbar__navigation">
{this.props.showBackButton &&
<button {...backButtonProps}></button>

2
admin/client/src/components/Toolbar/Toolbar.scss
View File

@ -15,7 +15,7 @@
// Northern bar containing breadcrumb, tabs etc.
.toolbar--north {
display: block;
// display: block;
background-image: none;
background-color: $background-darker;
border-bottom: 1px solid $border-color;

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

@ -126,21 +126,19 @@ class CampaignAdmin extends SilverStripeComponent {
};
return (
<div className="cms-content__inner no-preview">
<div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
<Toolbar>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>
<div className="panel--padded panel--scrollable panel--single-toolbar">
<div className="toolbar--content">
<div className="btn-toolbar">
<FormAction {...formActionProps} />
</div>
</div>
<div className="campaign-admin">
<FormBuilder {...formBuilderProps} />
<div className="fill-height cms-campaigns" aria-expanded="true">
<Toolbar>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>
<div className="panel panel--padded panel--scrollable flexbox-area-grow">
<div className="toolbar toolbar--content">
<div className="btn-toolbar">
<FormAction {...formActionProps} />
</div>
</div>
<div className="campaign-admin">
<FormBuilder {...formBuilderProps} />
</div>
</div>
</div>
);
@ -180,15 +178,13 @@ class CampaignAdmin extends SilverStripeComponent {
};
return (
<div className="cms-content__inner">
<div>
<Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>
<div className="panel panel--padded panel--scrollable panel--single-toolbar">
<div className="form--inline">
<FormBuilder {...formBuilderProps} />
</div>
<div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
<FormBuilder {...formBuilderProps} />
</div>
</div>
);
@ -209,14 +205,12 @@ class CampaignAdmin extends SilverStripeComponent {
};
return (
<div className="cms-content__inner">
<div>
<Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>
<div className="panel panel--padded panel--scrollable panel--single-toolbar">
<div className="form--inline">
<FormBuilder {...formBuilderProps} />
</div>
<div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
<FormBuilder {...formBuilderProps} />
</div>
</div>
);

8
admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
View File

@ -146,19 +146,19 @@ class CampaignAdminList extends SilverStripeComponent {
</div>
);
const bodyClass = [
'panel', 'panel--padded', 'panel--scrollable', 'panel--double-toolbar', 'campaign-items',
'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow', 'campaign-items',
];
return (
<div className="cms-content__split cms-content__split--left-sm">
<div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
<div className="fill-width cms-content__split--left-sm">
<div className="fill-height cms-content__left cms-campaigns" aria-expanded="true">
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>
<div className={bodyClass.join(' ')}>
{body}
</div>
<div className="toolbar--south">
<div className="toolbar toolbar--south">
{this.renderButtonToolbar()}
</div>
</div>

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

@ -18,14 +18,13 @@
.cms-content__split--left-sm {
.cms-content__right {
position: relative;
display: none;
}
.cms-content__left {
width: 100%;
position: absolute;
left: 0;
// position: absolute;
// left: 0;
}
// Overlay preview if there isn't enough space for both items and preview
@ -59,7 +58,7 @@
}
@include media-breakpoint-up(lg) {
padding-left: $cms-panel-sm;
// padding-left: $cms-panel-sm;
.cms-content__left {
width: $cms-panel-sm;
@ -76,7 +75,7 @@
}
@include media-breakpoint-up(xl) {
padding-left: $cms-panel-md;
// padding-left: $cms-panel-md;
.cms-content__left {
width: $cms-panel-md;

30
admin/client/src/styles/legacy/_style.scss
View File

@ -49,20 +49,20 @@ body.cms {
background: $tab-panel-texture-color;
}
.cms-preview,
.cms-menu,
.cms-content,
.cms-content-header,
// DEPRECATED:
// .cms-content-tools will be removed in 4.0
// Use .cms-content-filters instead (TODO rename to BEM).
.cms-content-tools,
.cms-content-fields,
.cms-preview,
.cms-preview iframe,
.cms-preview-controls {
display: inline-block;
}
// .cms-preview,
// .cms-menu,
// .cms-content,
// .cms-content-header,
// // DEPRECATED:
// // .cms-content-tools will be removed in 4.0
// // Use .cms-content-filters instead (TODO rename to BEM).
// .cms-content-tools,
// .cms-content-fields,
// .cms-preview,
// .cms-preview iframe,
// .cms-preview-controls {
// display: inline-block;
// }
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
padding-left: $panel-padding-x;
@ -1397,9 +1397,7 @@ form.member-profile-form {
.cms {
.cms-content {
border-radius: 0;
background: $tab-panel-texture-color;
z-index: 40;
}
.cms-content-fields {

2
admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss
View File

@ -1,2 +1,2 @@
<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content flexbox-area-grow $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
</div>