diff --git a/admin/client/dist/js/bundle.js b/admin/client/dist/js/bundle.js
index ce75f76f5..37c546809 100644
--- a/admin/client/dist/js/bundle.js
+++ b/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("").append('»').append('«'),
+this.find(".cms-panel-toggle").length||(n=e("").append('»').append('«'),
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"),
diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
index e70209279..b29d502b0 100644
--- a/admin/client/dist/styles/bundle.css
+++ b/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{
diff --git a/admin/client/src/components/Toolbar/Toolbar.scss b/admin/client/src/components/Toolbar/Toolbar.scss
index dbd7645dc..7a54d565a 100644
--- a/admin/client/src/components/Toolbar/Toolbar.scss
+++ b/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%;
diff --git a/admin/client/src/legacy/LeftAndMain.Panel.js b/admin/client/src/legacy/LeftAndMain.Panel.js
index 46147546d..ff338667e 100644
--- a/admin/client/src/legacy/LeftAndMain.Panel.js
+++ b/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:
*
*
@@ -25,9 +25,9 @@ $.entwine('ss', function($) {
*
*/
$('.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 = $("")
+ container = $("")
.append('»')
.append('«');
-
+
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();
diff --git a/admin/client/src/styles/_layout.scss b/admin/client/src/styles/_layout.scss
index 49df21302..8b1ff0cb7 100644
--- a/admin/client/src/styles/_layout.scss
+++ b/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
}
diff --git a/admin/client/src/styles/legacy/_forms.scss b/admin/client/src/styles/legacy/_forms.scss
index 89daff262..cfcd13bf9 100644
--- a/admin/client/src/styles/legacy/_forms.scss
+++ b/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;
diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss
index 299411f13..12deb631a 100644
--- a/admin/client/src/styles/legacy/_style.scss
+++ b/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{
- display:none;
+ .cms-panel-toggle a.toggle-collapse {
+ display: none;
+ }
+
+ .cms-panel-content > * {
+ display: none;
}
.cms-panel-toggle a.toggle-expand {
diff --git a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss
index d85e5f56e..df4a6d6b5 100644
--- a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss
+++ b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss
@@ -1,4 +1,4 @@
-