Fix #354 Search results on certain pages are getting pushed up

Author: imaustink

static/canjs.js

@@ -121,7 +121,7 @@ function init() {
 function scrollToCurrentMenuItem(){
 	var currentPageLi = $('li.current');
 	if(currentPageLi.length){
-		$('.bottom-left').scrollTop(currentPageLi.offset().top - $('.bottom-left').offset().top);
+		$('.nav-menu').scrollTop(currentPageLi.offset().top - $('.nav-menu').offset().top);
 	}
 }
 
@@ -227,11 +227,11 @@ function navigate(href) {
 			if (!$content.length) {
 				window.location.reload();
 			}
-			var $nav = $content.find(".bottom-left > ul"),
+			var $nav = $content.find(".bottom-left .scrollable-contents > ul"),
 					$article = $content.find("article"),
 					$breadcrumb = $content.find(".breadcrumb"),
 					homeLink = $content.find(".logo > a").attr('href'),
-					$navReplace = $(".bottom-left>ul"),
+					$navReplace = $(".bottom-left .scrollable-contents > ul"),
 
 					//root elements - use .filter; not .find
 					$pathPrefixDiv = $content.filter("[path-prefix]");

static/layout.less

@@ -67,11 +67,8 @@
 }
 .bottom-left {
   flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: @gutter*2;
-  padding-bottom: 0;
   background: white;
+  height: inherit;
 }
 .bottom-right {
   flex-grow: 1;

static/sidebar.less

@@ -79,40 +79,48 @@ img.social-icon-small{
 		color: darken(@link-color,10%);
 	}
 	// Highest parent level
-	> ul {
-		padding-left: 0;
-		> li {
-			list-style: none;
-			list-style-type: none;
-			padding: 0;
-			.border-bottom;
-			> a {
-				font-size: 110%;
-				padding-bottom: @gutter;
-				padding-top: @gutter;
-			}
-			&.expanded > a {
-				padding-bottom: @gutter/3;
-			}
-			// Second level
-			> ul {
+	.nav-menu { 
+		height: inherit;
+		overflow-y: scroll;
+		& > .scrollable-contents {
+			padding: @gutter*2;
+			& > ul {
+				padding: 0;
+				height: inherit;
 				> li {
+					list-style: none;
+					list-style-type: none;
+					padding: 0;
+					.border-bottom;
 					> a {
-						padding-bottom: @gutter/3;
-						padding-top: @gutter/3;
+						font-size: 110%;
+						padding-bottom: @gutter;
+						padding-top: @gutter;
 					}
-					&.expanded {
-						> a {
-							padding-bottom: @gutter/2;
-							margin-left: -1px;
-						}
+					&.expanded > a {
+						padding-bottom: @gutter/3;
 					}
-					 //Third level
+					// Second level
 					> ul {
-						border-left: 1px solid @border-color;
-						li {
-							ul {
-								margin-top: @gutter/3;
+						> li {
+							> a {
+								padding-bottom: @gutter/3;
+								padding-top: @gutter/3;
+							}
+							&.expanded {
+								> a {
+									padding-bottom: @gutter/2;
+									margin-left: -1px;
+								}
+							}
+							//Third level
+							> ul {
+								border-left: 1px solid @border-color;
+								li {
+									ul {
+										margin-top: @gutter/3;
+									}
+								}
 							}
 						}
 					}

templates/content.mustache

@@ -6,13 +6,17 @@
       {{/with}}
     </div>
     <div class="bottom-left">
-       <div class="social-side-container">
-        {{>social.mustache}}
+      <div class="nav-menu">
+        <div class="scrollable-contents">
+          <div class="social-side-container">
+            {{>social.mustache}}
+          </div>
+          {{#with (getCurrentTree)}}
+              {{>menu.mustache}}
+          {{/with}}
+        </div>
       </div>
-        {{#with (getCurrentTree)}}
-            {{>menu.mustache}}
-        {{/with}}
-        {{>search-results.mustache}}
+      {{>search-results.mustache}}
     </div>
   </div>
   <div id="right" class="column">