Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

BUGFIX CMS Breadcrumbs and tabs as inline blocks which can span multi…

…ple lines, rather than being cropped off (fixes #6882)
  • Loading branch information...
commit 415a68080211d4c408c9f0432d237b17393ce9db 1 parent 22de5c6
Ingo Schommer chillu authored
44 admin/css/screen.css
View
@@ -82,15 +82,15 @@ If more variables exist in the future, consider creating a variables file.*/
.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -176px; }
.icon { text-indent: -9999px; border: none; outline: none; }
-.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-sedfac01ed1.png'); }
-.icon.icon-24.icon-assetadmin { background-position: 0 -120px; }
-.icon.icon-24.icon-cmsmain { background-position: 0 -48px; }
-.icon.icon-24.icon-cmspagescontroller { background-position: 0 -192px; }
-.icon.icon-24.icon-cmssettingscontroller { background-position: 0 0; }
-.icon.icon-24.icon-securityadmin { background-position: 0 -24px; }
-.icon.icon-24.icon-reportadmin { background-position: 0 -72px; }
-.icon.icon-24.icon-commentadmin { background-position: 0 -168px; }
-.icon.icon-24.icon-help { background-position: 0 -96px; }
+.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-sb373738c7b.png'); }
+.icon.icon-24.icon-assetadmin { background-position: 0 -136px; }
+.icon.icon-24.icon-cmsmain { background-position: 0 -64px; }
+.icon.icon-24.icon-cmspagescontroller { background-position: 0 -208px; }
+.icon.icon-24.icon-cmssettingscontroller { background-position: 0 -16px; }
+.icon.icon-24.icon-securityadmin { background-position: 0 -40px; }
+.icon.icon-24.icon-reportadmin { background-position: 0 -88px; }
+.icon.icon-24.icon-commentadmin { background-position: 0 -184px; }
+.icon.icon-24.icon-help { background-position: 0 -112px; }
.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-sb173d358c2.png'); }
.icon.icon-16.icon-assetadmin { background-position: 0 -80px; }
.icon.icon-16.icon-cmsmain { background-position: 0 -16px; }
@@ -263,24 +263,22 @@ 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 0 8px 8px; height: 32px; z-index: 60; overflow: hidden; -webkit-box-shadow: rgba(201, 205, 206, 0.8) 0 0 4px inset; -moz-box-shadow: rgba(201, 205, 206, 0.8) 0 0 4px inset; box-shadow: rgba(201, 205, 206, 0.8) 0 0 4px inset; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; background-position: 0 1px; }
+.cms-content-header { padding-left: 16px; z-index: 60; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -moz-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 .cms-content-header-info *, .cms-content-header .cms-content-header-tabs * { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
+.cms-content-header .cms-content-header-info *, .cms-content-header .cms-content-header-tabs * { *display: inline; }
.cms-content-header a { color: #1556b2; }
.cms-content-header .backlink span.btn-icon-back { height: 16px; }
-.cms-content-header h2 { padding: 6px 8px 0 8px; font-size: 14px; line-height: 24px; font-weight: bold; /* text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; */ margin: 0; display: table-cell; vertical-align: top; width: 60%; }
-.cms-content-header h2 .section-icon { display: inline-block; vertical-align: middle; }
-.cms-content-header h2 .breadcrumbs-wrapper { display: inline-block; vertical-align: middle; }
-.cms-content-header h2 .breadcrumbs-wrapper .crumb { display: inline; line-height: 26px; padding: 0 5px; }
-.cms-content-header h2 .breadcrumbs-wrapper .crumb:first-child { padding-left: 0px; }
-.cms-content-header h2 .breadcrumbs-wrapper .crumb:last-child { padding-right: 0px; }
-.cms-content-header > div { display: table; width: 100%; }
-.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; width: 40%; }
-.cms-content-header .cms-content-header-tabs .ui-tabs-nav { float: right; /* margin-right:$grid-x*4; */ }
-.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 h2 { font-size: 14px; font-weight: bold; margin: 0; }
+.cms-content-header .cms-content-header-info { float: left; line-height: 38px; }
+.cms-content-header .cms-content-header-tabs { float: right; padding-right: 24px; line-height: 40px; }
+.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; float: none; line-height: 40px; font-weight: bold; margin: 0; padding: 0 16px; }
+.cms-content-header .cms-content-header-tabs .ui-tabs-nav li a { *display: inline; }
.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; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; padding-bottom: 0px; -webkit-box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; -moz-box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; box-shadow: rgba(201, 205, 206, 0.8) 0 0 2px; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr { border-radius: 0; }
.cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-left, .cms-content-header .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
+.cms-content-header .ss-ui-button { line-height: 24px; }
+.cms-content-header .ss-ui-button .ui-button-text { line-height: 1.4; }
.cms-edit-form .cms-content-header-tabs .ui-tabs-nav li a { text-indent: 0; }
@@ -316,7 +314,7 @@ body.cms { overflow: hidden; }
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
/** -------------------------------------------- Actions -------------------------------------------- */
-.cms-content-actions { margin: 0; padding: 12px 16px; height: 32px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; }
+.cms-content-actions { margin: 0; padding: 12px 16px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; }
/** -------------------------------------------- Messages -------------------------------------------- */
.message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
@@ -453,7 +451,7 @@ form.member-profile-form .ui-tabs-nav li { margin: 0 0 -1px 0; }
form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form .ui-tabs-nav .ui-corner-top, form.member-profile-form .ui-tabs-nav .ui-corner-right, form.member-profile-form .ui-tabs-nav .ui-corner-tr { border-radius: 0; }
form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form .ui-tabs-nav .ui-corner-top, form.member-profile-form .ui-tabs-nav .ui-corner-left, form.member-profile-form .ui-tabs-nav .ui-corner-tl { border-radius: 0; }
-.cms .cms-content { /* border-right: 1px solid $color-light-separator; */ -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+.cms .cms-content { -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; }
.cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; }
.cms .cms-content-fields #Root_Main .customFormat { max-width: 80px; }
BIN  admin/images/textures/cms_content_header.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 admin/javascript/LeftAndMain.Content.js
View
@@ -13,8 +13,10 @@
onmatch: function() {
var self = this;
- // Force initialization of tabsets to avoid layout glitches
+ // Force initialization of certain UI elements to avoid layout glitches
this.find('.cms-tabset').redrawTabs();
+ this.find('.ss-ui-tabs-nav').redraw();
+ this.find('.Actions').redraw();
this._super();
},
@@ -27,8 +29,8 @@
// Force initialization of tabsets to avoid layout glitches
this.add(this.find('.cms-tabset')).redrawTabs();
-
- this.layout();
+ this.find('.cms-content-header').redraw();
+ this.layout({resize: false});
}
});
@@ -82,6 +84,23 @@
this._super();
}
});
+
+ $('.cms-content .cms-content-header').entwine({
+ redraw: function() {
+ if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
+
+ // Fix height to actual extents, in preparation for a relayout via jslayout.
+ $('.cms-content .cms-content-header, .cms-content .cms-content-actions').entwine({
+ redraw: function() {
+ if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
+
+ // Fix dimensions to actual extents, in preparation for a relayout via jslayout.
+ this.height('auto');
+ this.height(this.innerHeight()-this.css('padding-top')-this.css('padding-bottom'));
+ }
+ });
+
+
});
})(jQuery);
1  admin/javascript/LeftAndMain.EditForm.js
View
@@ -113,6 +113,7 @@
redraw: function() {
// Force initialization of tabsets to avoid layout glitches
this.add(this.find('.cms-tabset')).redrawTabs();
+ this.find('.cms-content-header').redraw();
var approxWidth = $('.cms-container').width() - $('.cms-menu').width();
this.find('.cms-content-actions').width(approxWidth).height('auto');
79 admin/scss/_style.scss
View
@@ -87,17 +87,19 @@ body.cms {
}
.cms-content-header {
- padding: ($grid-y - 8) 0 $grid-y $grid-x;
- height: $grid-y * 4;
+ padding-left: $grid-x * 2;
z-index: 60;
- overflow:hidden;
- @include box-shadow($color-shadow-light 0 0 ($grid-x / 2) inset);
+ @include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset);
background: {
image:url(../images/textures/cms_content_header.png);
repeat:repeat;
- position: 0 1px;
}
-
+
+ .cms-content-header-info *,
+ .cms-content-header-tabs * {
+ @include inline-block;
+ }
+
a {
color: $color-text-blue-link;
}
@@ -109,60 +111,31 @@ body.cms {
}
h2 {
- padding: $grid-y - 2 $grid-x 0 $grid-x;
font-size: $font-base-size + 2;
- line-height: $grid-x * 3;
font-weight: bold;
- /* text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; */ // Gives wrong effect
margin: 0;
- display:table-cell;
- vertical-align:top;
- width:60%;
-
- .section-icon {
- display: inline-block;
- vertical-align: middle;
- }
-
- .breadcrumbs-wrapper {
- display: inline-block;
- vertical-align: middle;
- .crumb {
- display: inline;
- line-height:26px;
- padding:0 5px;
- }
- .crumb:first-child {
- padding-left:0px;
- }
- .crumb:last-child {
- padding-right:0px;
- }
- }
}
- & > div {
- display:table;
- width: 100%;
- .cms_backlink {
- display:table-cell;
- vertical-align:middle;
- width:auto;
- }
+ .cms-content-header-info {
+ float:left;
+ // TODO 2px less than tabs to ensure tabs bottom align correctly, shouldn't be necessary
+ line-height: 38px;
}
.cms-content-header-tabs {
- display:table-cell;
- white-space:nowrap;
- width:40%;
+ float: right;
+ padding-right: $grid-x*3;
+ line-height: 40px;
+
.ui-tabs-nav {
- float:right;
- /* margin-right:$grid-x*4; */ // Removed to make tabs align far right
li {
a {
+ @include inline-block;
+ float: none;
+ line-height: 40px;
font-weight: bold;
- line-height: $grid-y * 2;
- padding: $grid-y*1.5 $grid-x*2.5 $grid-y*1.5;
+ margin: 0;
+ padding: 0 $grid-x*2;
}
}
@@ -192,6 +165,14 @@ body.cms {
}
}
}
+
+ // Reset to default styles
+ .ss-ui-button {
+ line-height: $grid-x*3;
+ .ui-button-text {
+ line-height: 1.4;
+ }
+ }
}
.cms-edit-form {
@@ -1069,8 +1050,6 @@ form.member-profile-form {
.cms {
.cms-content {
- /* border-right: 1px solid $color-light-separator; */ // This holds the cms away from the right side by 1px so removed
-
@include box-shadow(3px 0 4px rgba(0,0,0,0.15));
@include border-radius(0);
}
17 admin/templates/CMSBreadcrumbs.ss
View
@@ -1,9 +1,22 @@
<div class="breadcrumbs-wrapper" data-pjax-fragment="Breadcrumbs">
<% loop Breadcrumbs %>
+
+ <% if First %>
+ <% if ToplevelController %>
+ <span class="section-icon icon icon-16 icon-{$ToplevelController.MenuCurrentItem.Code.LowerCase}"></span>
+ <% else_if Controller %>
+ <span class="section-icon icon icon-16 icon-{$Controller.MenuCurrentItem.Code.LowerCase}"></span>
+ <% else %>
+ <span class="section-icon icon icon-16 icon-{$MenuCurrentItem.Code.LowerCase}"></span>
+ <% end_if %>
+ <% end_if %>
+
<% if Last %>
- <span class="cms-panel-link crumb">$Title.XML</span>
+ <span class="cms-panel-link crumb last">$Title.XML</span>
<% else %>
- <a class="cms-panel-link crumb" href="$Link">$Title.XML</a>/
+ <a class="cms-panel-link crumb" href="$Link">$Title.XML</a>
+ <span class="sep">/</span>
<% end_if %>
+
<% end_loop %>
</div>
31 admin/templates/Includes/LeftAndMain_EditForm.ss
View
@@ -2,30 +2,27 @@
<form $FormAttributes data-layout-type="border">
<% end_if %>
<div class="cms-content-header north">
- <div>
+ <div class="cms-content-header-info">
<% include BackLink_Button %>
-
<h2 id="page-title-heading">
<% with Controller %>
- <% include CMSSectionIcon %>
<% include CMSBreadcrumbs %>
<% end_with %>
</h2>
- <% if Fields.hasTabset %>
- <% with Fields.fieldByName('Root') %>
- <div class="cms-content-header-tabs">
- <ul>
- <% loop Tabs %>
- <li<% if extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
- <% end_loop %>
- </ul>
- </div>
- <% end_with %>
- <% end_if %>
-
- <!-- <div class="cms-content-search">...</div> -->
-
</div>
+ <% if Fields.hasTabset %>
+ <% with Fields.fieldByName('Root') %>
+ <div class="cms-content-header-tabs">
+ <ul>
+ <% loop Tabs %>
+ <li<% if extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
+ <% end_loop %>
+ </ul>
+ </div>
+ <% end_with %>
+ <% end_if %>
+
+ <!-- <div class="cms-content-search">...</div> -->
</div>
<% with Controller %>
21 admin/templates/Includes/ModelAdmin_Content.ss
View
@@ -1,7 +1,7 @@
<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content-header north">
- <div>
+ <div class="cms-content-header-info">
<h2>
<% include CMSSectionIcon %>
<% if SectionTitle %>
@@ -10,17 +10,16 @@
<% _t('ModelAdmin.Title', 'Data Models') %>
<% end_if %>
</h2>
+ </div>
- <div class="cms-content-header-tabs ss-ui-tabs-nav">
- <ul>
- <% loop ManagedModelTabs %>
- <li class="tab-$ClassName $LinkOrCurrent">
- <a href="$Link" class="cms-panel-link">$Title</a>
- </li>
- <% end_loop %>
- </ul>
- </div>
-
+ <div class="cms-content-header-tabs ss-ui-tabs-nav">
+ <ul>
+ <% loop ManagedModelTabs %>
+ <li class="tab-$ClassName $LinkOrCurrent">
+ <a href="$Link" class="cms-panel-link">$Title</a>
+ </li>
+ <% end_loop %>
+ </ul>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.