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

admin/client/dist/js/bundle.js

@@ -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"),

admin/client/dist/styles/bundle.css

@@ -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{

admin/client/src/components/Toolbar/Toolbar.scss

@@ -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%;

admin/client/src/legacy/LeftAndMain.Panel.js

@@ -7,13 +7,13 @@ $.entwine('ss', function($) {
 
   /**
    * Horizontal collapsible panel. Generic enough to work with CMS menu as well as various "filter" panels.
-   * 
+   *
    * A panel consists of the following parts:
    * - Container div: The outer element, with class ".cms-panel"
    * - Header (optional)
    * - Content
    * - Expand and collapse toggle anchors (optional)
-   * 
+   *
    * Sample HTML:
    * <div class="cms-panel">
    *  <div class="cms-panel-header">your header</div>
@@ -25,9 +25,9 @@ $.entwine('ss', function($) {
    * </div>
    */
   $('.cms-panel').entwine({
-    
+
     WidthExpanded: null,
-    
+
     WidthCollapsed: null,
 
     /**
@@ -99,26 +99,26 @@ $.entwine('ss', function($) {
       var collapsedContent, container;
 
       if(!this.find('.cms-panel-content').length) throw new Exception('Content panel for ".cms-panel" not found');
-      
+
       // 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>');
-          
+
         this.append(container);
       }
-      
+
       // Set panel width same as the content panel it contains. Assumes the panel has overflow: hidden.
       this.setWidthExpanded(this.find('.cms-panel-content').innerWidth());
-      
+
       // Assumes the collapsed width is indicated by the toggle, or by an optionally collapsed view
       collapsedContent = this.find('.cms-panel-content-collapsed');
       this.setWidthCollapsed(collapsedContent.length ? collapsedContent.innerWidth() : this.find('.toggle-expand').innerWidth());
 
       // Toggle visibility
       this.togglePanel(!this.getInitialCollapsedState(), true, false);
-      
+
       this._super();
     },
 
@@ -139,9 +139,9 @@ $.entwine('ss', function($) {
 
       this.toggleClass('collapsed', !doExpand);
       newWidth = doExpand ? this.getWidthExpanded() : this.getWidthCollapsed();
-      
+
       this.width(newWidth); // the content panel width always stays in "expanded state" to avoid floating elements
-      
+
       // If an alternative collapsed view exists, toggle it as well
       collapsedContent = this.find('.cms-panel-content-collapsed');
       if(collapsedContent.length) {
@@ -160,13 +160,13 @@ $.entwine('ss', function($) {
         this.trigger(doExpand ? 'expand' : 'collapse');
       // }
     },
-    
+
     expandPanel: function(force) {
       if(!force && !this.hasClass('collapsed')) return;
 
       this.togglePanel(true);
     },
-    
+
     collapsePanel: function(force) {
       if(!force && this.hasClass('collapsed')) return;
 
@@ -180,13 +180,13 @@ $.entwine('ss', function($) {
       e.preventDefault();
     }
   });
-  
+
   $('.cms-panel *').entwine({
     getPanel: function() {
       return this.parents('.cms-panel:first');
     }
   });
-      
+
   $('.cms-panel .toggle-expand').entwine({
     onclick: function(e) {
       e.preventDefault();
@@ -197,7 +197,7 @@ $.entwine('ss', function($) {
       this._super(e);
     }
   });
-  
+
   $('.cms-panel .toggle-collapse').entwine({
     onclick: function(e) {
       e.preventDefault();

admin/client/src/styles/_layout.scss

@@ -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
 }

admin/client/src/styles/legacy/_forms.scss

@@ -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;

admin/client/src/styles/legacy/_style.scss

@@ -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,9 +1502,12 @@ form.member-profile-form {
     cursor: pointer;
 
     .cms-panel-header *,
-    .cms-panel-content,
+    .cms-panel-toggle a.toggle-collapse {
-    .cms-panel-toggle a.toggle-collapse{
+      display: none;
-      display:none;
+    }
+
+    .cms-panel-content > * {
+      display: none;
     }
 
     .cms-panel-toggle a.toggle-expand {

admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss

@@ -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 %>

admin/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss

@@ -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 %>

admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Content.ss

@@ -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
 

admin/templates/SilverStripe/Admin/LeftAndMain.ss

@@ -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