Merge pull request #306 from canjs/menu-fix

fix css issues with breadcrumb nav

Author: chasenlehara

static/breadcrumb.less

@@ -12,6 +12,8 @@
 			color: lighten(@gray, 10%);
 			a {
 				cursor: pointer;
+			}
+			> a {
 				color: white;
 				font-weight: 700;
 			}
@@ -62,13 +64,19 @@
 				padding: @gutter/4 0;
 			}
 		}
+
+		.breadcrumb-dropdown-separator {
+			display: none;
+		}
+
+		&.dropdown-has-items .breadcrumb-dropdown-separator {
+			display: inline-block;
+		}
 	}
 }
 
 .on-this-page {
-	width: 100%;
 	font-size: 14px;
-	margin-top:@gutter/2;
 	margin-bottom: @gutter !important;
 	background: #fff;
 	list-style: none;
@@ -78,7 +86,6 @@
 	}
 	@media screen and (min-width: @breakpoint) {
 		padding: @gutter;
-		margin: 0;
 		position: fixed;
 		.box-shadow;
 			z-index: 15;

static/canjs.js

@@ -282,9 +282,18 @@ function scrollToElement($element) {
 }
 
 function setOnThisPageContent() {
-	// don't bother with 1 header
+	var $breadcrumb = $(".breadcrumb");
 	var $h2 = $('h2');
-	if ($h2.length < 2) {
+	var showDropdown = $h2.length > 1;
+
+	if (showDropdown) {
+		$breadcrumb.addClass('dropdown-has-items');
+	} else {
+		$breadcrumb.removeClass('dropdown-has-items');
+	}
+
+	// don't bother with 1 header
+	if (!showDropdown) {
 		return;
 	}
 

static/mixins.less

@@ -27,7 +27,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.box-shadow (@horizontal: 3px, @vertical: 3px, @blur: 10px, @color: rgba(0,0,0,.3)) {
+.box-shadow (@horizontal: 0px, @vertical: 7px, @blur: 10px, @color: rgba(0,0,0,.2)) {
   box-shadow: @horizontal @vertical @blur @color;
 }
 .code {

templates/breadcrumb.mustache

@@ -6,8 +6,8 @@
 	{{#with (getCurrent)}}
 	<li><a href="{{urlTo name}}">{{getShortTitle .}}</a></li>
 	{{/with}}
+	<li class="breadcrumb-dropdown-separator"> / </li>
 	<li class="breadcrumb-dropdown">
-		/
 		<a> On this page</a>
 		<ul class="on-this-page"></ul>
 	</li>