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

Remove legacy classes for flexbox classes

Browse Source
This commit is contained in:
Paul Clarke 2016-10-07 17:05:05 +13:00 committed by Damian Mooyman
parent 0a0a990c54
commit 8b02d9d68a
6 changed files with 76 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15333,10 +15333,30 @@ div.grid-field__sort-field+.form__fieldgroup-item{
top:1px;
}
.preview{
position:relative;
}
@media (max-width:991px){
.preview{
position:absolute;
right:0;
z-index:2;
width:100%;
}
}
.preview__iframe{
height:calc(100% - 53px);
width:100%;
border:0;
display:block;
}
@media (max-width:991px){
.preview__iframe{
width:100%;
height:calc(100% - 53px);
border:0;
}
}
.preview__file-container{
@ -15429,6 +15449,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
padding-bottom:.76925rem;
border-top:1px solid #d9dee2;
width:100%;
background-color:#f6f7f8;
}
.cms-backlink .toolbar__back-button,.toolbar__back-button{
@ -15893,19 +15914,23 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
height:100%;
}
.cms-content__split--left-sm .cms-content__right{
display:none;
}
.cms-content__split--left-sm .cms-content__left{
@media (max-width:991px){
.campaign-items{
width:100%;
z-index:1;
}
}
.cms-content__split--left-sm .cms-content--selected{
.campaigns{
position:relative;
height:100%;
}
.campaigns .cms-content--selected{
display:block;
}
.cms-content__split--left-sm .cms-content__back-btn{
.campaigns .cms-content__back-btn{
width:36px;
height:36px;
background-color:rgba(79,88,97,.8);
@ -15924,28 +15949,28 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
cursor:pointer;
}
.cms-content__split--left-sm .cms-content__back-btn:hover{
.campaigns .cms-content__back-btn:hover{
background-color:#4f5861;
text-decoration:none;
}
@media (min-width:992px){
.cms-content__split--left-sm .cms-content__left{
.campaigns .cms-content__left{
width:300px;
}
.cms-content__split--left-sm .cms-content__right{
.campaigns .cms-content__right{
display:block;
border-left:1px solid #d9dee2;
}
.cms-content__split--left-sm .cms-content__back-btn{
.campaigns .cms-content__back-btn{
display:none;
}
}
@media (min-width:1200px){
.cms-content__split--left-sm .cms-content__left{
.campaigns .cms-content__left{
width:448px;
}
}
@ -15998,9 +16023,12 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
.fill-height,body,html{
height:100%;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
@ -16013,15 +16041,14 @@ body,html{
}
.fill-height,.fill-width{
height:100%;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
-webkit-box-direction:normal;
}
.fill-width{
width:100%;
display:-ms-flexbox;
display:-webkit-box;
display:flex;
-ms-flex-direction:row;
-webkit-box-orient:horizontal;
flex-direction:row;

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

@ -57,12 +57,12 @@ class Preview extends SilverStripeComponent {
</div>
);
} else {
body = <iframe className="preview__iframe" src={previewUrl}></iframe>;
body = <iframe className="flexbox-area-grow preview__iframe" src={previewUrl}></iframe>;
}
// Combine elements
return (
<div className="flexbox-area-grow cms-content__right preview">
<div className="flexbox-area-grow fill-height cms-content__right preview">
{body}
<a href="" className="cms-content__back-btn font-icon-left-open-big" />
<div className="toolbar toolbar--south">

19
admin/client/src/components/Preview/Preview.scss
View File

@ -1,7 +1,24 @@
.preview__iframe {
.preview {
position: relative;
// Overlay preview at smaller sizes
@include media-breakpoint-down(md) {
position: absolute;
right: 0;
z-index: 2;
width: 100%;
}
}
.preview__iframe {
height: calc(100% - #{$toolbar-total-height});
width: 100%;
border: 0;
display: block;
@include media-breakpoint-down(md) {
width: 100%;
}
}
.preview__file-container {

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

@ -71,6 +71,7 @@
padding-bottom: $spacer-xs;
border-top: 1px solid $border-color;
width: 100%;
background-color: $background-main;
}
.toolbar__back-button,

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

@ -150,8 +150,8 @@ class CampaignAdminList extends SilverStripeComponent {
];
return (
<div className="fill-width cms-content__split--left-sm">
<div className="fill-height cms-content__left cms-campaigns" aria-expanded="true">
<div className="fill-width campaigns">
<div className="fill-height campaign-items cms-content__left cms-campaigns" aria-expanded="true">
<Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
<BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
</Toolbar>

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

@ -16,16 +16,16 @@
height: 100%;
}
.cms-content__split--left-sm {
.cms-content__right {
display: none;
.campaign-items {
@include media-breakpoint-down(md) {
width: 100%;
z-index: 1;
}
}
.cms-content__left {
width: 100%;
// position: absolute;
// left: 0;
}
.campaigns {
position: relative;
height: 100%;
// Overlay preview if there isn't enough space for both items and preview
.cms-content--selected {
@ -168,7 +168,7 @@ html, body {
// Nested items take up width
.fill-width {
width: 100%;
height: 100%;
// height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;