mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Pages area: remove layout classes, replace with flexbox CSS classes
This commit is contained in:
Paul Clarke
Damian Mooyman
parent
ed4270155b
commit
1fd46ed36d
2
admin/client/dist/js/bundle.js
vendored
2
admin/client/dist/js/bundle.js
vendored
@ -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>»</span></a>').append('<a class="toggle-collapse" href="#"><span>«</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>»</span></a>').append('<a class="toggle-collapse" href="#"><span>«</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
34
admin/client/dist/styles/bundle.css
vendored
@ -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{
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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>»</span></a>')
|
||||
.append('<a class="toggle-collapse" href="#"><span>«</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();
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 %>
|
||||
|
||||
@ -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 %>
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user