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

Pages area: remove layout classes, replace with flexbox CSS classes

Browse Source
This commit is contained in:
Paul Clarke 2016-10-04 17:31:54 +13:00 committed by Damian Mooyman
parent ed4270155b
commit 1fd46ed36d
11 changed files with 38 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/client/dist/js/bundle.js vendored
View File

@ -1169,7 +1169,7 @@ path:"/",expires:31})},clearPersistedCollapsedState:function r(){this.canSetCook
return void 0===e&&(e=this.hasClass("collapsed")),e},onadd:function a(){var t,n
if(!this.find(".cms-panel-content").length)throw new Exception('Content panel for ".cms-panel" not found')
this.find(".cms-panel-toggle").length||(n=e("<div class='cms-panel-toggle south'></div>").append('<a class="toggle-expand" href="#"><span>&raquo;</span></a>').append('<a class="toggle-collapse" href="#"><span>&laquo;</span></a>'),
this.find(".cms-panel-toggle").length||(n=e("<div class='toolbar toolbar--south cms-panel-toggle'></div>").append('<a class="toggle-expand" href="#"><span>&raquo;</span></a>').append('<a class="toggle-collapse" href="#"><span>&laquo;</span></a>'),
this.append(n)),this.setWidthExpanded(this.find(".cms-panel-content").innerWidth()),t=this.find(".cms-panel-content-collapsed"),this.setWidthCollapsed(t.length?t.innerWidth():this.find(".toggle-expand").innerWidth()),
this.togglePanel(!this.getInitialCollapsedState(),!0,!1),this._super()},togglePanel:function s(e,t,n){var i,r
t||(this.trigger("beforetoggle.sspanel",e),this.trigger(e?"beforeexpand":"beforecollapse")),this.toggleClass("collapsed",!e),i=e?this.getWidthExpanded():this.getWidthCollapsed(),this.width(i),r=this.find(".cms-panel-content-collapsed"),

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

@ -9328,10 +9328,6 @@ div.switch-states .switch a.active span{
margin-left:5px;
}
.toolbar--south.cms-content-actions{
width:100% !important;
}
.file input.file{
opacity:1;
}
@ -9352,6 +9348,7 @@ body.cms{
.cms-container{
height:100%;
width:100%;
background:#f6f7f8;
}
@ -9500,18 +9497,6 @@ body.cms{
height:26px;
}
.has-panel .cms-content-tools{
position:relative !important;
}
.has-panel .cms-content-tools .cms-panel-content{
height:calc(100% - 53px) !important;
}
.has-panel .cms-content-tools .cms-helper-hide-actions{
height:100% !important;
}
.cms-versions-form .form-group:after{
visibility:hidden;
margin:0;
@ -9705,6 +9690,9 @@ body.cms{
.ui-tabs .ui-tabs-panel.cms-edit-form{
padding:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.ui-tabs .ui-tabs-panel .ui-tabs .ui-tabs-nav{
@ -10176,7 +10164,6 @@ body.cms{
z-index:70;
box-shadow:1px 0 0 0 #ced3d9;
z-index:1000;
float:left;
position:relative;
}
@ -10190,8 +10177,6 @@ body.cms{
.cms-content-tools .cms-panel-content{
width:300px;
overflow:auto;
height:100%;
}
.cms-content-tools .cms-panel-content .btn-toolbar .ss-ui-action-constructive{
@ -10590,7 +10575,7 @@ form.member-profile-form #Permissions .optionset li{
cursor:pointer;
}
.cms-panel.collapsed .cms-panel-content,.cms-panel.collapsed .cms-panel-header *,.cms-panel.collapsed .cms-panel-toggle a.toggle-collapse{
.cms-panel.collapsed .cms-panel-content>*,.cms-panel.collapsed .cms-panel-header *,.cms-panel.collapsed .cms-panel-toggle a.toggle-collapse{
display:none;
}
@ -15454,7 +15439,6 @@ div.grid-field__sort-field+.form__fieldgroup-item{
.toolbar--south{
padding-top:.76925rem;
padding-bottom:.76925rem;
position:absolute;
bottom:0;
border-top:1px solid #d9dee2;
width:100%;
@ -16001,7 +15985,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
.panel--scrollable{
overflow-y:auto;
height:100%;
}
.panel--single-toolbar{
@ -16063,10 +16046,6 @@ h1{
display:none;
}
.toolbar--north,.toolbar--south{
height:52px;
}
.panel--scrollable{
overflow:auto;
}
@ -16096,6 +16075,9 @@ h1{
-ms-flex:1;
-webkit-box-flex:1;
flex:1;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{

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

@ -68,7 +68,6 @@
.toolbar--south {
padding-top: $spacer-xs;
padding-bottom: $spacer-xs;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
width: 100%;

2
admin/client/src/legacy/LeftAndMain.Panel.js
View File

@ -102,7 +102,7 @@ $.entwine('ss', function($) {
// Create default controls unless they already exist.
if(!this.find('.cms-panel-toggle').length) {
container = $("<div class='cms-panel-toggle south'></div>")
container = $("<div class='toolbar toolbar--south cms-panel-toggle'></div>")
.append('<a class="toggle-expand" href="#"><span>&raquo;</span></a>')
.append('<a class="toggle-collapse" href="#"><span>&laquo;</span></a>');

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

@ -99,7 +99,6 @@
// Scrolling panels
.panel--scrollable {
overflow-y: auto;
height: 100%;
}
// Panel height adjustments for scrolling
@ -177,10 +176,6 @@ h1 {
// width: 150px;
}
.toolbar--north,
.toolbar--south {
height: 52px;
}
// Scrollable area
.panel--scrollable {
@ -211,4 +206,5 @@ h1 {
.flexbox-area-grow {
-ms-flex: 1;
flex: 1;
display: flex; // Only required for divs already positioned block as override
}

4
admin/client/src/styles/legacy/_forms.scss
View File

@ -846,10 +846,6 @@ div.switch-states{
margin-left: 5px;
}
.toolbar--south.cms-content-actions {
width: 100% !important;
}
// Override Bootstrap hidden file upload until they have a good way of showing uploaded file names
.file input.file {
opacity: 1;

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

@ -45,6 +45,7 @@ body.cms {
// --------------------------------------------
.cms-container {
height: 100%;
width: 100%;
background: $tab-panel-texture-color;
}
@ -222,19 +223,6 @@ body.cms {
}
}
}
.cms-content-tools {
position: relative !important; // TEMP until JS is removed
.cms-panel-content {
height: calc(100% - 53px) !important; // TEMP until JS is removed
}
// History panel
.cms-helper-hide-actions {
height: 100% !important;
}
}
}
// History checkboxes
@ -1050,7 +1038,6 @@ body.cms {
z-index: 70;
box-shadow: 1px 0 0 0 $border-color-dark;
z-index: 1000;
float: left;
position: relative;
.cms-panel-header {
@ -1063,8 +1050,6 @@ body.cms {
.cms-panel-content {
width: 300px;
overflow: auto;
height:100%;
.btn-toolbar .ss-ui-action-constructive {
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
@ -1517,11 +1502,14 @@ form.member-profile-form {
cursor: pointer;
.cms-panel-header *,
.cms-panel-content,
.cms-panel-toggle a.toggle-collapse {
display: none;
}
.cms-panel-content > * {
display: none;
}
.cms-panel-toggle a.toggle-expand {
display: block;
}

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

@ -1,4 +1,4 @@
<div id="settings-controller-cms-content" class="cms-content center cms-tabset flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div id="settings-controller-cms-content" class="cms-content cms-tabset flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content-header north">
<% with $EditForm %>

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

@ -1,6 +1,6 @@
<form $FormAttributes data-layout-type="border">
<div class="panel panel--padded panel--scrollable panel--single-toolbar cms-content-fields">
<div class="panel panel--padded panel--scrollable flexbox-area-grow cms-content-fields">
<% if $Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>

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

@ -1,4 +1,4 @@
<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
$Tools

2
admin/templates/SilverStripe/Admin/LeftAndMain.ss
View File

@ -11,7 +11,7 @@
>
<% include SilverStripe\\Admin\\CMSLoadingScreen %>
<div class="cms-container center fill-width" data-layout-type="custom">
<div class="cms-container fill-width" data-layout-type="custom">
$Menu
$Content
$PreviewPanel