From 6028cf1b625ae268c7c3e08b5f5afb265a32c598 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Mon, 17 Dec 2012 15:13:43 +0100 Subject: [PATCH] Fixed panel spacing regressions from 544d2eb6 Specifically, the change removed the "add page" panel padding, because it moved padding from .cms-panel-padded into commonly contained elements, like .ui-tabs-panel. Apart from breaking layouts, it makes the class meaningless, since its only padded depending on which elements it contains. In order to rectify some introduced inconsistencies, much too complex were required, e.g. .ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields {...}. --- admin/css/screen.css | 26 +++++++--------- admin/scss/_style.scss | 62 ++++++++++++++++---------------------- css/AssetUploadField.css | 2 +- scss/AssetUploadField.scss | 1 - 4 files changed, 38 insertions(+), 53 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 9c9db5c3c..b43726bb8 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -371,10 +371,10 @@ body.cms { overflow: hidden; } /** -------------------------------------------- Tabs -------------------------------------------- */ .ui-tabs { padding: 0; background: none; } .ui-tabs .ui-tabs { position: static; } -.ui-tabs .ui-tabs-panel { padding: 8px 0; background: transparent; border: 0; } +.ui-tabs .ui-tabs-panel { padding: 16px; background: transparent; border: 0; } .ui-tabs .ui-tabs-panel.cms-edit-form { padding: 0; } .ui-tabs .ui-widget-header { border: 0; background: none; } -.ui-tabs .ui-tabs-nav { float: right; margin: 0 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; } +.ui-tabs .ui-tabs-nav { float: right; margin: 16px 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; } .ui-tabs .ui-tabs-nav ~ .ui-tabs-panel { border-top: 1px solid #c0c0c2; clear: both; } .ui-tabs .ui-tabs-nav li { top: 0; float: left; border-bottom: 0 !important; } .ui-tabs .ui-tabs-nav li a { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; float: none; font-weight: bold; color: #444444; line-height: 32px; padding: 0 16px 0; } @@ -396,20 +396,13 @@ body.cms { overflow: hidden; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.gallery.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -54px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -404px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.search.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -104px no-repeat; } -.ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ } -.ui-tabs .cms-edit-form .cms-panel-padded, .ui-tabs .cms-content-fields .cms-panel-padded { /* Has padded area inside it */ padding: 0; margin: 0; } -.ui-tabs .cms-edit-form .ui-tabs-panel, .ui-tabs .cms-edit-form .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel, .ui-tabs .cms-content-fields .ss-gridfield { margin: 12px; padding: 0 0 12px; } -.ui-tabs .cms-edit-form .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-edit-form .ss-gridfield .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-content-fields .ss-gridfield .ss-gridfield { /* Files area & inside second level tabs */ padding: 0; /* should be zero ideally */ margin: 0 0 12px; } -.ui-tabs .cms-edit-form .ui-tabs-nav, .ui-tabs .cms-content-fields .ui-tabs-nav { margin: 10px 12px 0; padding: 0 8px 0 0; /* second set of tabs */ } -.ui-tabs .cms-edit-form #tree_actions .ui-tabs-nav, .ui-tabs .cms-content-fields #tree_actions .ui-tabs-nav { margin: 0; } -.ui-tabs .cms-panel-padded h3 { margin-left: 12px; /* reports headers, probably too specific */ } -.ui-tabs .cms-panel-padded .ui-tabs-panel { margin: 0; padding: 12px 12px 12px; } +.ui-tabs .cms-panel-padded .ui-tabs-panel { padding: 0; } .ui-tabs .cms-panel-padded .ui-tabs-panel .ui-tabs-panel { padding: 8px 0 0 0; } -.ui-tabs .ui-tabs .ui-tabs-panel { /* second level tabs */ padding-top: 8px; } +.ui-tabs .cms-panel-padded .Actions { padding: 0; } .ui-tabs.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; } /** Primary styles which sit on top of screen, with different tab colors. TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass() */ -.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { border-left: 1px solid #b3b3b3; float: none; } +.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { margin-top: 0; border-left: 1px solid #b3b3b3; float: none; } .ui-tabs.cms-tabset-primary .ui-tabs-nav li, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li { margin-right: 0; margin-top: 0; } .ui-tabs.cms-tabset-primary .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li a { margin: 0; line-height: 39px; } .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-all, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-top, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-right, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tr, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tl, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-all, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-top, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-right, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tr, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tl, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } @@ -442,7 +435,8 @@ body.cms { overflow: hidden; } .message.good { background-color: #eaf6e4; border-color: #72c34b; } .message p { margin: 0; } -p.message { margin-bottom: 12px; } +.cms-edit-form .message { margin: 16px; } +.cms-edit-form .ui-tabs-panel .message { margin: 0 0 16px 0; } /** -------------------------------------------- Page icons -------------------------------------------- */ .page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; } @@ -492,7 +486,7 @@ p.message { margin-bottom: 12px; } .cms-content-tools { background: #eceff1; width: 200px; overflow-y: auto; overflow-x: hidden; z-index: 70; border-right: 1px solid #c0c0c2; -webkit-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); -moz-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); float: left; position: relative; } .cms-content-tools.filter { padding: 0 !important; } .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); } -.cms-content-tools .cms-panel-content { width: 184px; padding: 8px 8px 0; overflow: auto; height: 100%; } +.cms-content-tools .cms-panel-content { width: 184px; padding: 16px 8px 0; overflow: auto; height: 100%; } .cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; } .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); } .cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } @@ -538,7 +532,7 @@ p.message { margin-bottom: 12px; } /** -------------------------------------------- Member Profile -------------------------------------------- */ form.member-profile-form { padding: 0 16px 0 0; } form.member-profile-form #Root_Permissions { clear: both; border-top: 1px solid #a6a6a6; } -form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; padding-top: 16px; } +form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; } form.member-profile-form #Root_Main .cms-help-toggle { text-indent: -9999em; display: inline-block; width: 20px; background: url(../images/question.png) no-repeat 0px 0px; } form.member-profile-form #FavouritePageID { margin-top: 8px; } form.member-profile-form #CsvFile .middleColumn { background: none !important; } @@ -595,6 +589,8 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto; .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } .cms-panel .collapsed-flyout li a span { display: block !important; } +.cms .cms-panel-padded { padding: 16px 16px; margin: 0; } + /** ------------------------------------------------------------------ * Dialog * diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 0cdc4c8a5..2b2482229 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -159,7 +159,7 @@ body.cms { } .ui-tabs-panel { - padding: $grid-x 0; + padding: $grid-x*2; background: transparent; // default it's white border: 0; // suppress default borders &.cms-edit-form { @@ -174,7 +174,7 @@ body.cms { .ui-tabs-nav { float: right; - margin: 0 0 -1px 0; + margin: $grid-x*2 0 -1px 0; padding: 0 $grid-x*1.5 0 0; border-bottom: none; @@ -250,43 +250,17 @@ body.cms { } } - .cms-edit-form, .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ - .cms-panel-padded { /* Has padded area inside it */ - padding: 0; - margin: 0; - } - .ui-tabs-panel, .ss-gridfield { - margin: 12px; - padding: 0 0 12px; - .ss-gridfield { /* Files area & inside second level tabs */ - padding: 0; /* should be zero ideally */ - margin: 0 0 12px; - } - } - .ui-tabs-nav { - margin: 10px 12px 0; - padding: 0 8px 0 0; /* second set of tabs */ - } - #tree_actions .ui-tabs-nav{ - margin: 0; - } - } - .cms-panel-padded { - h3 { - margin-left: 12px; /* reports headers, probably too specific */ - } .ui-tabs-panel { - margin: 0; - padding: 12px 12px 12px; + padding: 0; // Avoid double padding with parent .ui-tabs-panel { padding: $grid-x 0 0 0; } } - } - .ui-tabs .ui-tabs-panel { /* second level tabs */ - padding-top: 8px; + .Actions { + padding: 0; // Avoid double padding with parent + } } &.ss-tabset-tabshidden .ui-tabs-panel { @@ -301,6 +275,7 @@ body.cms { .ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { + margin-top: 0; border-left: 1px solid darken($color-tab, 15%); float: none; // parent container is already right floated @@ -483,8 +458,17 @@ body.cms { margin: 0; } } -p.message { - margin-bottom: $grid-y*1.5; + + +.cms-edit-form { + .message { + margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel + } + .ui-tabs-panel { + .message { + margin: 0 0 $grid-x*2 0; // gets padding from tab panel + } + } } /** -------------------------------------------- @@ -704,7 +688,7 @@ p.message { .cms-panel-content { width: ($grid-x * 23); - padding: $grid-x $grid-x 0; + padding: $grid-x*2 $grid-x 0; // smaller left/right padding to use space efficiently overflow: auto; height:100%; @@ -924,7 +908,6 @@ form.member-profile-form { #Root_Main { clear:both; border-top: 1px solid darken($color-tab, 20%); - padding-top:$grid-y*2; .cms-help-toggle { text-indent: -9999em; display: inline-block; @@ -1210,6 +1193,13 @@ form.member-profile-form { } } +.cms { + .cms-panel-padded { + padding: $grid-y*2 $grid-x*2; + margin:0; + } +} + /** ------------------------------------------------------------------ * Dialog * diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index ad090f63c..9b997cff3 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -12,7 +12,7 @@ Used in side panels and action tabs */ .ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; } -#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 12px; } +#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .backlink { padding-left: 12px; } diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss index e3b0b2ef0..a96b24c6a 100644 --- a/scss/AssetUploadField.scss +++ b/scss/AssetUploadField.scss @@ -17,7 +17,6 @@ #AssetUploadField { border-bottom: 0; @include box-shadow(none); - padding: 12px; } .backlink { padding-left: 12px;