mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
BUGFIX CMS Breadcrumbs and tabs as inline blocks which can span multiple lines, rather than being cropped off (fixes #6882)
This commit is contained in:
Ingo Schommer
parent
22de5c6597
commit
415a680802
@ -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; }
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 127 B |
@ -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');
|
||||
|
||||
@ -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 Last %>
|
||||
<span class="cms-panel-link crumb">$Title.XML</span>
|
||||
<% else %>
|
||||
<a class="cms-panel-link crumb" href="$Link">$Title.XML</a>/
|
||||
|
||||
<% 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 last">$Title.XML</span>
|
||||
<% else %>
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user