diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css index b29d502b0..c4221b996 100644 --- a/admin/client/dist/styles/bundle.css +++ b/admin/client/dist/styles/bundle.css @@ -9497,6 +9497,10 @@ body.cms{ height:26px; } +.cms-content-tools.collapsed .cms-panel-content>*{ + display:none; +} + .cms-versions-form .form-group:after{ visibility:hidden; margin:0; @@ -9950,7 +9954,7 @@ body.cms{ top:80%; } -.cms-content-actions,.cms-preview-controls{ +.cms-content-actions{ margin:0; z-index:999; border-top:1px solid #d9dee2; @@ -9961,7 +9965,7 @@ body.cms{ padding:.76925rem 0; } -.cms-content-actions.south .btn-toolbar,.cms-preview-controls.south .btn-toolbar{ +.cms-content-actions.south .btn-toolbar{ margin-top:0; margin-bottom:0; } @@ -10502,9 +10506,6 @@ form.member-profile-form #Permissions .optionset li{ .cms .cms-content-fields{ overflow-y:auto; - overflow-x:auto; - background:#f6f7f8; - width:100%; } .cms .cms-content-fields #Root_Main .confirmedpassword{ @@ -10548,14 +10549,10 @@ form.member-profile-form #Permissions .optionset li{ } .cms-panel .cms-panel-toggle .toggle-collapse,.cms-panel .cms-panel-toggle .toggle-expand{ - display:block; - position:absolute; text-align:right; padding:14px 0; - width:100%; text-decoration:none; line-height:20px; - height:52px; margin:-.76925rem -1.5385rem; } @@ -10566,7 +10563,11 @@ form.member-profile-form #Permissions .optionset li{ font-size:16px; } -.cms-panel .cms-panel-toggle .toggle-collapse.toggle-expand,.cms-panel .cms-panel-toggle .toggle-expand.toggle-expand{ +.cms-panel .cms-panel-toggle .toggle-collapse{ + display:block; +} + +.cms-panel .cms-panel-toggle .toggle-expand{ width:60px; display:none; } @@ -10575,12 +10576,13 @@ 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-header *,.cms-panel.collapsed .cms-panel-toggle a.toggle-collapse{ display:none; } .cms-panel.collapsed .cms-panel-toggle a.toggle-expand{ display:block; + width:auto; } .cms-panel .cms-panel-header{ @@ -10642,6 +10644,9 @@ form.member-profile-form #Permissions .optionset li{ .cms .ui-widget-overlay-light{ background:#aaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAe0lEQVRoge3OMQHAIBAAMcC/kjdZJHTI0A4XBdkz86wfO18H3hRUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUBVVBVVAVVAVVQVVQFVQFVUFVUBVUF8O8A8WdY6opAAAAAElFTkSuQmCC) 50% 50% repeat-x; opacity:.3; + position:absolute; + z-index:2; + display:none; } .cms .ui-widget-overlay{ @@ -12309,11 +12314,6 @@ li.class-ErrorPage>a .jstree-pageicon{ margin-top:-33px; } -.cms-content-controls.cms-preview-controls,.toolbar--south.cms-preview-controls{ - z-index:1; - background:#f6f7f8; -} - .cms-content-controls .icon-view,.cms-content-controls .preview-selector.dropdown a.chosen-single,.toolbar--south .icon-view,.toolbar--south .preview-selector.dropdown a.chosen-single{ white-space:nowrap; } @@ -12326,12 +12326,6 @@ li.class-ErrorPage>a .jstree-pageicon{ color:#1f1f1f; } -.cms-content-controls .cms-navigator,.toolbar--south .cms-navigator{ - width:100%; - padding:1px 12px; - height:52px; -} - .cms-content-controls .preview-selector,.toolbar--south .preview-selector{ float:right; border-bottom:none; @@ -12549,9 +12543,9 @@ li.class-ErrorPage>a .jstree-pageicon{ border-left:1px solid #ced3d9; } -.cms-preview,.cms-preview .cms-preview-overlay{ - height:100%; +.cms-preview .cms-preview-overlay{ width:100%; + height:100%; } .cms-preview .preview-note{ @@ -15388,6 +15382,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{ padding-right:1.5385rem; height:53px; background-color:#f6f7f8; + width:100%; } .toolbar--content .btn-toolbar,.toolbar--north .btn-toolbar,.toolbar--south .btn-toolbar,.toolbar .btn-toolbar{ @@ -15439,7 +15434,6 @@ div.grid-field__sort-field+.form__fieldgroup-item{ .toolbar--south{ padding-top:.76925rem; padding-bottom:.76925rem; - bottom:0; border-top:1px solid #d9dee2; width:100%; } @@ -15977,6 +15971,7 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{ .panel{ margin-left:auto; margin-right:auto; + width:100%; } .panel--padded{ @@ -16021,51 +16016,32 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{ body,html{ width:100%; - height:100%; + margin:0; padding:0; - font-size:13px; +} + +.fill-height,body,html{ + height:100%; display:-ms-flexbox; display:-webkit-box; display:flex; } -body,h1,html{ - margin:0; - line-height:20px; -} - -h1{ - font-size:18px; -} - -.cms-menu{ - position:relative; -} - -.cms-preview{ - display:none; -} - -.panel--scrollable{ - overflow:auto; -} - .fill-height{ - height:100%; -ms-flex-direction:column; -webkit-box-orient:vertical; flex-direction:column; } .fill-height,.fill-width{ - display:-ms-flexbox; - display:-webkit-box; - display:flex; -webkit-box-direction:normal; } .fill-width{ width:100%; + display:-ms-flexbox; + display:-webkit-box; + display:flex; -ms-flex-direction:row; -webkit-box-orient:horizontal; flex-direction:row; @@ -16075,9 +16051,6 @@ 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 7a54d565a..c25f7f6bd 100644 --- a/admin/client/src/components/Toolbar/Toolbar.scss +++ b/admin/client/src/components/Toolbar/Toolbar.scss @@ -5,6 +5,7 @@ @include make-container(); height: $toolbar-total-height; background-color: $body-bg; + width: 100%; .btn-toolbar { // TODO Remove '.cms .btn-toolbar' override @@ -68,7 +69,6 @@ .toolbar--south { padding-top: $spacer-xs; padding-bottom: $spacer-xs; - bottom: 0; border-top: 1px solid $border-color; width: 100%; } diff --git a/admin/client/src/styles/_layout.scss b/admin/client/src/styles/_layout.scss index 8b1ff0cb7..69949d0a6 100644 --- a/admin/client/src/styles/_layout.scss +++ b/admin/client/src/styles/_layout.scss @@ -90,6 +90,7 @@ .panel { margin-left: auto; margin-right: auto; + width: 100%; } .panel--padded { @@ -136,9 +137,9 @@ } -// TEST FLEXBOX +// TEMPORY FLEXBOX STYLES // Reference https://css-tricks.com/boxes-fill-height-dont-squish/ -// Tested in IE10 & IE11 +// Reference http://codepen.io/clarkepaul/pen/qaNWAY *, *:before, *:after { -moz-box-sizing: border-box; @@ -151,39 +152,11 @@ html, body { height: 100%; margin: 0; padding: 0; - font-size: 13px; - line-height: 20px; display: -ms-flexbox; display: flex; } -h1 { - font-size: 18px; - line-height: 20px; - margin: 0; -} - -.cms-menu { - // width: 150px; - position: relative; -} - -.cms-content { } - - -.cms-preview { - display: none; - // width: 150px; -} - - -// Scrollable area -.panel--scrollable { - overflow: auto; -} - // Flex magic - // Nested items take up height .fill-height { height: 100%; @@ -206,5 +179,4 @@ 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 cfcd13bf9..2f0e8d6e8 100644 --- a/admin/client/src/styles/legacy/_forms.scss +++ b/admin/client/src/styles/legacy/_forms.scss @@ -14,6 +14,10 @@ form.nostyle { @include clear-form-field-styles(); } +// fieldset { +// width: 100%; +// } + .field { // TODO convert to .form-group &.ui-tabs { diff --git a/admin/client/src/styles/legacy/_preview.scss b/admin/client/src/styles/legacy/_preview.scss index bc268a231..61340506c 100644 --- a/admin/client/src/styles/legacy/_preview.scss +++ b/admin/client/src/styles/legacy/_preview.scss @@ -3,12 +3,6 @@ .cms-content-controls, .toolbar--south { - /* Styling the background, controls sit on */ - &.cms-preview-controls { - z-index: 1; - background: $tab-panel-texture-color; - } - /* Styling for icons in controls */ .icon-view, .preview-selector.dropdown a.chosen-single { white-space: nowrap; @@ -21,12 +15,6 @@ } } - .cms-navigator{ - width: 100%; - padding: 1px $grid-y*1.5; - height: 52px; /* should be set in js Layout to match page actions */ - } - /* Preview selectors. Overrides default chosen styles and applies its own */ .preview-selector { float:right; @@ -245,8 +233,6 @@ .cms-preview { background-color: $tab-panel-texture-color; border-left: 1px solid $border-color-dark; - height: 100%; - width: 100%; .cms-preview-overlay { width: 100%; diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss index 12deb631a..d60f9088a 100644 --- a/admin/client/src/styles/legacy/_style.scss +++ b/admin/client/src/styles/legacy/_style.scss @@ -225,6 +225,10 @@ body.cms { } } +.cms-content-tools.collapsed .cms-panel-content > * { + display: none; +} + // History checkboxes .cms-versions-form { .form-group::after { @@ -462,6 +466,7 @@ body.cms { &.cms-edit-form { padding: 0; + display: flex; // TODO remove once JQueryUI is removed } .ui-tabs .ui-tabs-nav { @@ -762,7 +767,7 @@ body.cms { * Actions * -------------------------------------------- */ -.cms-content-actions, .cms-preview-controls { +.cms-content-actions { margin: 0; z-index: 999; border-top: 1px solid $border-color; @@ -1401,9 +1406,6 @@ form.member-profile-form { // always show a y scroll bar as popups like TreeDropdowns // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar overflow-y: auto; - overflow-x: auto; - background: $tab-panel-texture-color; - width: 100%; #Root_Main { .confirmedpassword { @@ -1472,17 +1474,13 @@ form.member-profile-form { .cms-panel { .cms-panel-toggle { - .toggle-collapse, - .toggle-expand { - display: block; - position: absolute; - text-align: right; - padding: 14px 0; - width: 100%; - text-decoration: none; - line-height: 20px; - height: 52px; - margin: -#{$spacer-xs} #{0 - $panel-padding-x}; + .toggle-collapse, + .toggle-expand { + text-align: right; + padding: 14px 0; + text-decoration: none; + line-height: 20px; + margin: -#{$spacer-xs} #{0 - $panel-padding-x}; span { display: inline-block; @@ -1490,11 +1488,15 @@ form.member-profile-form { color: #555d60; font-size: 16px; } + } - &.toggle-expand { - width: 60px; // will set the collapsed width - display: none; - } + .toggle-collapse { + display: block; + } + + .toggle-expand { + width: 60px; // will set the collapsed width + display: none; } } @@ -1506,12 +1508,9 @@ form.member-profile-form { display: none; } - .cms-panel-content > * { - display: none; - } - .cms-panel-toggle a.toggle-expand { display: block; + width: auto; } } @@ -1583,6 +1582,9 @@ form.member-profile-form { .cms .ui-widget-overlay-light { background: #aaaaaa url(../../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: 0.3; + position: absolute; + z-index: 2; + display: none; } // Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) diff --git a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss index df4a6d6b5..6a120b624 100644 --- a/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss +++ b/admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss @@ -1,6 +1,6 @@
-
+
<% with $EditForm %>
<% with $Controller %>