From 1fd46ed36d497b66272a9cf1d52f4968876e54a2 Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Tue, 4 Oct 2016 17:31:54 +1300 Subject: [PATCH] Pages area: remove layout classes, replace with flexbox CSS classes --- admin/client/dist/js/bundle.js | 2 +- admin/client/dist/styles/bundle.css | 34 +++++-------------- .../src/components/Toolbar/Toolbar.scss | 1 - admin/client/src/legacy/LeftAndMain.Panel.js | 34 +++++++++---------- admin/client/src/styles/_layout.scss | 6 +--- admin/client/src/styles/legacy/_forms.scss | 4 --- admin/client/src/styles/legacy/_style.scss | 26 ++++---------- .../Includes/CMSProfileController_Content.ss | 2 +- .../Includes/CMSProfileController_EditForm.ss | 2 +- .../Admin/Includes/LeftAndMain_Content.ss | 2 +- .../SilverStripe/Admin/LeftAndMain.ss | 2 +- 11 files changed, 38 insertions(+), 77 deletions(-) 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: *
*
your header
@@ -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 @@ -
+
<% with $EditForm %> diff --git a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss index 7fa661c5b..5ebaa71c5 100644 --- a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss +++ b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_EditForm.ss @@ -1,6 +1,6 @@
-
+
<% if $Message %>

$Message

<% else %> diff --git a/admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Content.ss b/admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Content.ss index 4d4d4809e..c9b672de5 100644 --- a/admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Content.ss +++ b/admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Content.ss @@ -1,4 +1,4 @@ -
+
$Tools diff --git a/admin/templates/SilverStripe/Admin/LeftAndMain.ss b/admin/templates/SilverStripe/Admin/LeftAndMain.ss index ce04943a1..d2426b342 100644 --- a/admin/templates/SilverStripe/Admin/LeftAndMain.ss +++ b/admin/templates/SilverStripe/Admin/LeftAndMain.ss @@ -11,7 +11,7 @@ > <% include SilverStripe\\Admin\\CMSLoadingScreen %> -
+
$Menu $Content $PreviewPanel