From 64300caae3fa8e61a26ec26f3ffeba1bc1142be9 Mon Sep 17 00:00:00 2001 From: Jeremy Bridson Date: Mon, 16 Apr 2012 16:29:53 +1200 Subject: [PATCH] ENHANCEMENT:fixed issues with overflow between tabs and breadcrumbs in cms-content-header --- admin/css/screen.css | 12 +++++++----- admin/scss/_style.scss | 16 +++++++++++----- admin/templates/CMSBreadcrumbs.ss | 16 +++++++++------- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 286b1cde9..724e46234 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -132,7 +132,7 @@ body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; .cms .ui-state-hover { cursor: pointer; } .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; } -/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. @package framework @subpackage admin */ +/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in framework/css/Form.css. @package framework @subpackage admin */ /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */ form.nostyle .field { padding: 0; border: 0; } form.nostyle label { float: none; width: auto; } @@ -257,13 +257,15 @@ body.cms { overflow: hidden; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { *display: inline; } -.cms-content-header { padding: 0px 8px 8px; height: 32px; z-index: 60; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; } +.cms-content-header { padding: 0px 8px 8px; height: 32px; z-index: 60; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; overflow: hidden; } .cms-content-header a { color: #1556b2; } .cms-content-header .backlink span.btn-icon-back { height: 16px; } -.cms-content-header h2 { padding: 8px 8px 0 8px; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; max-width: 100%; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; display: table-cell; vertical-align: top; } -.cms-content-header div { width: 100%; overflow: hidden; display: table-row; } +.cms-content-header h2 { padding: 8px 8px 0 8px; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; margin: 0; display: table-cell; vertical-align: top; width: 100%; } +.cms-content-header h2 .breadcrumbs-wrapper { display: table-row; } +.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: table-cell; line-height: 26px; } +.cms-content-header div { display: table-row; } .cms-content-header div .cms_backlink { display: table-cell; vertical-align: middle; width: auto; } -.cms-content-header .cms-content-header-tabs { display: table-cell; white-space: nowrap; } +.cms-content-header .cms-content-header-tabs { display: table-cell; white-space: nowrap; width: 100%; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav { float: right; margin-right: 32px; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 12px; } .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { border-top: none; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e1a4a67b0..38e360239 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -94,7 +94,8 @@ body.cms { background: { image:url(../images/textures/cms_content_header.png); repeat:repeat; - } + } + overflow:hidden; a { color: $color-text-blue-link; @@ -112,16 +113,20 @@ body.cms { line-height: $grid-x * 3; font-weight: bold; text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; - max-width: 100%; margin: 0; - @include hide-text-overflow(); display:table-cell; vertical-align:top; + width:100%; + .breadcrumbs-wrapper { + display:table-row; + .crumb { + display:table-cell; + line-height:26px; + } + } } & div { - width: 100%; - overflow: hidden; display:table-row; & .cms_backlink { display:table-cell; @@ -133,6 +138,7 @@ body.cms { .cms-content-header-tabs { display:table-cell; white-space:nowrap; + width:100%; .ui-tabs-nav { float:right; margin-right:$grid-x*4; diff --git a/admin/templates/CMSBreadcrumbs.ss b/admin/templates/CMSBreadcrumbs.ss index 64855fe2a..9e6749c25 100644 --- a/admin/templates/CMSBreadcrumbs.ss +++ b/admin/templates/CMSBreadcrumbs.ss @@ -1,7 +1,9 @@ -<% control Breadcrumbs %> - <% if Last %> - $Title.XML - <% else %> - $Title.XML / - <% end_if %> -<% end_control %> \ No newline at end of file +
+ <% control Breadcrumbs %> + <% if Last %> + $Title.XML + <% else %> + $Title.XML/ + <% end_if %> + <% end_control %> +
\ No newline at end of file