Breadcrumb: reworked the disposition (when wrapping onto a second line, the last item could be strangely placed between both lines on Chrome)

SVN:trunk[4082]
This commit is contained in:
Romain Quetiez
2016-05-13 15:24:17 +00:00
parent d0d761236b
commit 7380f56a50
3 changed files with 18 additions and 29 deletions

View File

@@ -2263,16 +2263,11 @@ span.refresh-button {
background: #f1f1f1;
}
#itop-breadcrumb ul {
display: inline;
}
#itop-breadcrumb li {
list-style: none;
#itop-breadcrumb .breadcrumb-item {
float: left;
margin: 0 22px 0px 0;
margin: 3px 22px 2px 0px;
}
#itop-breadcrumb li .icon img {
#itop-breadcrumb .breadcrumb-item .icon img {
height: 15px;
width: auto;
margin-right: 5px;
@@ -2282,30 +2277,30 @@ span.refresh-button {
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
opacity: 0.5;
}
#itop-breadcrumb li a {
#itop-breadcrumb .breadcrumb-item a {
text-decoration: none;
color: #555555;
font-size: 9pt;
padding: 0;
background: none;
}
#itop-breadcrumb li a:hover .icon img {
#itop-breadcrumb .breadcrumb-item a:hover .icon img {
-webkit-filter: none;
filter: none;
opacity: 1;
}
#itop-breadcrumb li a span.truncate {
#itop-breadcrumb .breadcrumb-item a span.truncate {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
#itop-breadcrumb li a:hover {
#itop-breadcrumb .breadcrumb-item a:hover {
text-decoration: none;
color: #e87c1e;
}
#itop-breadcrumb li a::after {
#itop-breadcrumb .breadcrumb-item a::after {
content: '';
position: absolute;
background-image: url(../images/breadcrumb-separator.png?v=v2.2.0);
@@ -2314,17 +2309,17 @@ span.refresh-button {
height: 16px;
margin-left: 5px;
}
#itop-breadcrumb li:last-child a::after {
#itop-breadcrumb .breadcrumb-item:last-child a::after {
display: none;
}
#itop-breadcrumb li .itop-breadcrumb-current {
#itop-breadcrumb .breadcrumb-item.breadcrumb-current {
text-decoration: none;
color: #555555;
font-size: 9pt;
padding: 0;
background: none;
}
#itop-breadcrumb li .itop-breadcrumb-current span.truncate {
#itop-breadcrumb .breadcrumb-item.breadcrumb-current span.truncate {
max-width: 200px;
white-space: nowrap;
overflow: hidden;

View File

@@ -1677,14 +1677,9 @@ span.refresh-button {
float: left;
background: $frame-background-color;
ul {
display: inline;
}
li{
list-style: none;
.breadcrumb-item{
float: left;
margin: 0 22px 0px 0;
margin: 3px 22px 2px 0px;
.icon img{
height: 15px;
@@ -1743,7 +1738,7 @@ span.refresh-button {
display: none;
}
.itop-breadcrumb-current{
&.breadcrumb-current{
text-decoration: none;
color: #555;
font-size: 9pt;

View File

@@ -52,7 +52,7 @@ $(function()
aBreadCrumb = aBreadCrumb.slice(-(this.options.max_count));
}
this._Write(aBreadCrumb);
var sBreadCrumbHtml = '<ul>';
var sBreadCrumbHtml = '';
for (iEntry in aBreadCrumb)
{
//if (iEntry >= iDisplayableItems) break; // skip the current page
@@ -71,15 +71,14 @@ $(function()
if ((this.options.new_entry !== null) && (iEntry == aBreadCrumb.length - 1))
{
// Last entry is the current page
sBreadCrumbHtml += '<li><div class="itop-breadcrumb-current" breadcrumb-entry="'+iEntry+'" title="'+sTitle+'">'+sIconSpec+'<span class="truncate">'+oEntry['label']+'</span></div></li>';
sBreadCrumbHtml += '<div class="breadcrumb-item breadcrumb-current" breadcrumb-entry="'+iEntry+'" title="'+sTitle+'">'+sIconSpec+'<span class="truncate">'+oEntry['label']+'</span></div>';
}
else
{
sBreadCrumbHtml += '<li><a class="itop-breadcrumb-link" breadcrumb-entry="'+iEntry+'" href="'+oEntry['url']+'" title="'+sTitle+'">'+sIconSpec+'<span class="truncate">'+oEntry['label']+'</span></a></li>';
sBreadCrumbHtml += '<div class="breadcrumb-item"><a class="breadcrumb-link" breadcrumb-entry="'+iEntry+'" href="'+oEntry['url']+'" title="'+sTitle+'">'+sIconSpec+'<span class="truncate">'+oEntry['label']+'</span></a></div>';
}
}
}
sBreadCrumbHtml += '</ul>';
$('#itop-breadcrumb').html(sBreadCrumbHtml);
}
else
@@ -137,7 +136,7 @@ $(function()
if (this.options.new_entry !== null) {
// The current page is the last entry in the breadcrumb, let's refresh it
aBreadCrumb[aBreadCrumb.length - 1].url = window.location.href;
$('#itop-breadcrumb li:last-of-type a').attr('href', window.location.href);
$('#itop-breadcrumb .breadcrumb-current:last-of-type a').attr('href', window.location.href);
}
this._Write(aBreadCrumb);
}