Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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
@chillu chillu authored
View
44 admin/css/screen.css
@@ -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; }
View
BIN  admin/images/textures/cms_content_header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
25 admin/javascript/LeftAndMain.Content.js
@@ -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);
View
1  admin/javascript/LeftAndMain.EditForm.js
@@ -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');
View
79 admin/scss/_style.scss
@@ -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);
}
View
17 admin/templates/CMSBreadcrumbs.ss
@@ -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>
View
31 admin/templates/Includes/LeftAndMain_EditForm.ss
@@ -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 %>
View
21 admin/templates/Includes/ModelAdmin_Content.ss
@@ -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>

0 comments on commit 415a680

Please sign in to comment.
Something went wrong with that request. Please try again.