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

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

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

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

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

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

@ -15,7 +15,7 @@
// Northern bar containing breadcrumb, tabs etc. // Northern bar containing breadcrumb, tabs etc.
.toolbar--north { .toolbar--north {
display: block; // display: block;
background-image: none; background-image: none;
background-color: $background-darker; background-color: $background-darker;
border-bottom: 1px solid $border-color; 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 ( return (
<div className="cms-content__inner no-preview"> <div className="fill-height cms-campaigns" aria-expanded="true">
<div className="cms-content__left cms-campaigns collapse in" aria-expanded="true"> <Toolbar>
<Toolbar> <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} /> </Toolbar>
</Toolbar> <div className="panel panel--padded panel--scrollable flexbox-area-grow">
<div className="panel--padded panel--scrollable panel--single-toolbar"> <div className="toolbar toolbar--content">
<div className="toolbar--content"> <div className="btn-toolbar">
<div className="btn-toolbar"> <FormAction {...formActionProps} />
<FormAction {...formActionProps} />
</div>
</div>
<div className="campaign-admin">
<FormBuilder {...formBuilderProps} />
</div> </div>
</div> </div>
<div className="campaign-admin">
<FormBuilder {...formBuilderProps} />
</div>
</div> </div>
</div> </div>
); );
@ -180,15 +178,13 @@ class CampaignAdmin extends SilverStripeComponent {
}; };
return ( return (
<div className="cms-content__inner"> <div>
<Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}> <Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} /> <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar> </Toolbar>
<div className="panel panel--padded panel--scrollable panel--single-toolbar"> <div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
<div className="form--inline"> <FormBuilder {...formBuilderProps} />
<FormBuilder {...formBuilderProps} />
</div>
</div> </div>
</div> </div>
); );
@ -209,14 +205,12 @@ class CampaignAdmin extends SilverStripeComponent {
}; };
return ( return (
<div className="cms-content__inner"> <div>
<Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}> <Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} /> <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar> </Toolbar>
<div className="panel panel--padded panel--scrollable panel--single-toolbar"> <div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
<div className="form--inline"> <FormBuilder {...formBuilderProps} />
<FormBuilder {...formBuilderProps} />
</div>
</div> </div>
</div> </div>
); );

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

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

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

@ -18,14 +18,13 @@
.cms-content__split--left-sm { .cms-content__split--left-sm {
.cms-content__right { .cms-content__right {
position: relative;
display: none; display: none;
} }
.cms-content__left { .cms-content__left {
width: 100%; width: 100%;
position: absolute; // position: absolute;
left: 0; // left: 0;
} }
// Overlay preview if there isn't enough space for both items and preview // Overlay preview if there isn't enough space for both items and preview
@ -59,7 +58,7 @@
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding-left: $cms-panel-sm; // padding-left: $cms-panel-sm;
.cms-content__left { .cms-content__left {
width: $cms-panel-sm; width: $cms-panel-sm;
@ -76,7 +75,7 @@
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
padding-left: $cms-panel-md; // padding-left: $cms-panel-md;
.cms-content__left { .cms-content__left {
width: $cms-panel-md; 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; background: $tab-panel-texture-color;
} }
.cms-preview, // .cms-preview,
.cms-menu, // .cms-menu,
.cms-content, // .cms-content,
.cms-content-header, // .cms-content-header,
// DEPRECATED: // // DEPRECATED:
// .cms-content-tools will be removed in 4.0 // // .cms-content-tools will be removed in 4.0
// Use .cms-content-filters instead (TODO rename to BEM). // // Use .cms-content-filters instead (TODO rename to BEM).
.cms-content-tools, // .cms-content-tools,
.cms-content-fields, // .cms-content-fields,
.cms-preview, // .cms-preview,
.cms-preview iframe, // .cms-preview iframe,
.cms-preview-controls { // .cms-preview-controls {
display: inline-block; // display: inline-block;
} // }
.cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid .cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
padding-left: $panel-padding-x; padding-left: $panel-padding-x;
@ -1397,9 +1397,7 @@ form.member-profile-form {
.cms { .cms {
.cms-content { .cms-content {
border-radius: 0;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
z-index: 40;
} }
.cms-content-fields { .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> </div>