From 513737097bed82522a4a091f6c861151c4f680a0 Mon Sep 17 00:00:00 2001 From: Andrew Short Date: Wed, 13 Jun 2012 13:46:00 +1000 Subject: [PATCH 1/2] MINOR: Fixed tab border being shown when tabs were hidden. --- admin/css/screen.css | 1 + admin/javascript/LeftAndMain.EditForm.js | 8 ++++++-- admin/scss/_style.scss | 4 ++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 0246987ec..009f5ad77 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -603,6 +603,7 @@ form.import-form label.left { width: 250px; } .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; } .cms-container .CMSMain.CMSPageEditController .ss-tabset .ss-tabset { position: static; } .cms-container .CMSMain.CMSPageEditController .ss-tabset .ui-tabs-panel { background: #e6eaed; border-top: 1px solid #c0c0c2; clear: both; } +.cms-container .CMSMain.CMSPageEditController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; } .cms-container .CMSPageSettingsController .cms-edit-form { background: #e6eaed; } .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 40px -1px 0; } .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; } diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index 850de067b..acb7e8480 100644 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -205,8 +205,12 @@ */ $('.cms-edit-form .ss-tabset').entwine({ onmatch: function() { - var tabs = this.find("ul:first").children('li'); - if(tabs.length == 1) this.find('ul:first').hide(); + var tabs = this.find("> ul:first"); + + if(tabs.children("li").length == 1) { + tabs.hide().parent().addClass("ss-tabset-tabshidden"); + } + this._super(); }, onunmatch: function() { diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 513001de7..c2f6674d1 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1774,6 +1774,10 @@ form.import-form { border-top:1px solid $color-button-generic-border; clear: both; } + + &.ss-tabset-tabshidden .ui-tabs-panel { + border-top: none; + } } } //Styling of tabs on page settings From 86bb491f2a3d3f85ff51ea868fcaa4c2bf075252 Mon Sep 17 00:00:00 2001 From: Andrew Short Date: Wed, 13 Jun 2012 15:10:48 +1000 Subject: [PATCH 2/2] MINOR: Consistently style tabs in various CMS interfaces. --- admin/css/screen.css | 32 ++++++------------- admin/scss/_style.scss | 70 +----------------------------------------- 2 files changed, 11 insertions(+), 91 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 009f5ad77..2939a680d 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -594,28 +594,16 @@ form.import-form p { margin-bottom: 5px; } form.import-form label.left { width: 250px; } /** -------------------------------------------- Page Edit Controller -------------------------------------------- */ -.cms-container .CMSMain.CMSPageEditController { margin-left: -1px; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form { background: #e6eaed; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav li { float: left; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; } -.cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSMain.CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; } -.cms-container .CMSMain.CMSPageEditController .ss-tabset .ss-tabset { position: static; } -.cms-container .CMSMain.CMSPageEditController .ss-tabset .ui-tabs-panel { background: #e6eaed; border-top: 1px solid #c0c0c2; clear: both; } -.cms-container .CMSMain.CMSPageEditController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; } -.cms-container .CMSPageSettingsController .cms-edit-form { background: #e6eaed; } -.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 40px -1px 0; } -.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; } -.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; } -.cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; } -.cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; /* border-top:1px solid $color-button-generic-border; */ } -.cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; } -.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { float: right; margin: 8px 24px -1px 0; } -.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; } -.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; } -.cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; } -.cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; clear: both; /* border-top:1px solid $color-button-generic-border; */ } +.cms-container .CMSPageEditController, .cms-container .CMSPageSettingsController, .cms-container .CMSPageHistoryController { margin-left: -1px; } +.cms-container .CMSPageEditController .cms-edit-form, .cms-container .CMSPageSettingsController .cms-edit-form, .cms-container .CMSPageHistoryController .cms-edit-form { background: #e6eaed; } +.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav { border-bottom: none; float: right; margin: 8px 0 -1px 0; padding: 0 24px 0 0; } +.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li { float: left; } +.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav li a, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 8px 20px 8px; } +.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-default { border: 1px solid #c0c0c2; } +.cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageEditController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageSettingsController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-container .CMSPageHistoryController .cms-edit-form .ui-tabs-nav .ui-widget-header .ui-state-active { padding-bottom: 1px; background: #e6eaed; border: 1px solid #c0c0c2; } +.cms-container .CMSPageEditController .ss-tabset .ss-tabset, .cms-container .CMSPageSettingsController .ss-tabset .ss-tabset, .cms-container .CMSPageHistoryController .ss-tabset .ss-tabset { position: static; } +.cms-container .CMSPageEditController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset .ui-tabs-panel { background: #e6eaed; border-top: 1px solid #c0c0c2; clear: both; } +.cms-container .CMSPageEditController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageSettingsController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel, .cms-container .CMSPageHistoryController .ss-tabset.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; } /** -------------------------------------------- Page Settings Controller -------------------------------------------- */ .cms-container .CMSMain.CMSPageSettingsController .tab#Root_Settings .optionset li { white-space: nowrap; padding-top: 8px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index c2f6674d1..2c54a0c51 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1728,7 +1728,7 @@ form.import-form { * -------------------------------------------- */ .cms-container { - .CMSMain.CMSPageEditController { + .CMSPageEditController, .CMSPageSettingsController, .CMSPageHistoryController { // Fix pixel gap between nav tree and main page header margin-left: -1px; // Removed to close gap far right of right tabs? //Styling of tabs on page edit @@ -1780,74 +1780,6 @@ form.import-form { } } } - //Styling of tabs on page settings - .CMSPageSettingsController { - .cms-edit-form { - background:darken($color-widget-bg, 2%); - .ui-tabs-nav { - float:right; - margin:$grid-x $grid-x*5 -1px 0; - li { - a { - font-weight: bold; - line-height: $grid-y * 2; - padding: $grid-y $grid-x*2.5 $grid-y; - } - } - .ui-state-default, - .ui-widget-content .ui-state-default, - .ui-widget-header .ui-state-default { - border:1px solid $color-button-generic-border; - } - .ui-state-active, - .ui-widget-content .ui-state-active, - .ui-widget-header .ui-state-active { - padding-bottom:1px; - background:darken($color-widget-bg, 2%); - border:1px solid $color-button-generic-border; - } - } - } - .ss-tabset .ui-tabs-panel { - background:darken($color-widget-bg, 2%); - clear:both; - /* border-top:1px solid $color-button-generic-border; */ - } - } - //Styling of tabs on page History - .CMSPageHistoryController { - .cms-edit-form { - background:darken($color-widget-bg, 2%); - .ui-tabs-nav { - float:right; - margin:$grid-x $grid-x*3 -1px 0; - li { - a { - font-weight: bold; - line-height: $grid-y * 2; - padding: $grid-y $grid-x*2.5 $grid-y; - } - } - .ui-state-default, - .ui-widget-content .ui-state-default, - .ui-widget-header .ui-state-default { - border:1px solid $color-button-generic-border; - } - .ui-state-active, - .ui-widget-content .ui-state-active, - .ui-widget-header .ui-state-active { - padding-bottom:1px; - background:darken($color-widget-bg, 2%); - border:1px solid $color-button-generic-border; - } - } - } - .ss-tabset .ui-tabs-panel { - background:darken($color-widget-bg, 2%); - clear:both; - /* border-top:1px solid $color-button-generic-border; */ // Double border? - } - } } /** --------------------------------------------