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

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4082 a333f486-631f-4898-b8df-5754b55c2be0

css/light-grey.css

@@ -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;

css/light-grey.scss

@@ -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;

js/breadcrumb.js

@@ -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);
 		}