Permalink
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...
1 parent 22de5c6 commit 415a68080211d4c408c9f0432d237b17393ce9db @chillu chillu committed Jun 6, 2012
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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);
@@ -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
@@ -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);
}
@@ -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>
@@ -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 %>
@@ -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.