Improve the sidebar’s styling & fix scrolling issues (#513)

Fixes #505
Fixes #507

Author: Ryan Wilson

docMap.json

@@ -136,7 +136,9 @@ QUnit.test('Search map is parsed', function(assert) {
   assert.ok(childrenLength > 1 && childrenLength < 10, 'rootPage has a reasonable number of children');
 });
 
-QUnit.test('Parents with @subchildren should show their grandchildren', function(assert) {
+// This used to test how the Recipes page had groups underneath it,
+// but that page was removed and Chasen couldn’t find another like it.
+QUnit.skip('Parents with @subchildren should show their grandchildren', function(assert) {
   var vm = new ViewModel({searchMap: searchMap});
   var pageMap = vm.pageMap;
   var guidesPage = pageMap['guides'];

sidebar/test.js

@@ -1,6 +1,6 @@
 body {
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
   margin: 0px;
 }
 html {

static/base.less

@@ -278,7 +278,7 @@ function navigate(href, updateLocation) {
 			}
 
 			// Scroll to the top of the page
-			$articleContainer.scrollTop(0);
+			$('html').scrollTop(0);
 
 			var $article = $content.find("article");
 			var currentPage = $content.filter("#everything").attr("data-current-page");

static/canjs.js

@@ -11,7 +11,10 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    grid-area: header;
     padding: 0 @gutter*2;
+    position: fixed;
+    width: 100%;
     @media screen and (max-width: 499px){
         padding: 0 @gutter;
     }
@@ -88,6 +91,7 @@
             align-items: center;
             font-size: 12px;
             height: @brand-height;
+            padding-top: 7px;
             cursor: pointer;
             .version-number::after {
                 display: inline-block;

static/header.less

@@ -1,44 +1,44 @@
 #everything {
-  .flex;
-  -webkit-flex-flow: row wrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  flex-wrap: nowrap;
   box-sizing: border-box;
-  height: calc(~"100% - 53px");// 53px header
   -webkit-overflow-scrolling: touch;
   padding-bottom: 0;
   transition: padding-bottom @transition-speed ease;
+  display:-ms-grid;
+  display: grid;
+  -ms-grid-columns: 300px 1fr;
+  grid-template-columns: max-content 1fr;
+  grid-template-areas: "header header" "left-nav content";
 }
 #left {
+  -ms-grid-row: 2;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
+  grid-area: left-nav;
+  height: calc(~"100vh - " @brand-height);// 53px header
+  overflow-y: scroll;
   position: fixed;
   scroll-behavior: smooth;
+  top: @brand-height;
   width: @sidebar-width;
-  min-width: 0;
   transition: min-width @transition-speed ease;
   border-right: 3px solid #F4F4F4;
   @media screen and (min-width: @breakpoint){
-    flex-shrink: 0;
-    padding: 0px;
-    position: relative;
+    .sticky;
+    margin: @brand-height 0 0;
     width: auto;
   }
 }
 #right {
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
   background: white;
+  display: flex;
+  -ms-grid-column: 2;
+  grid-area: content;
   overflow-x: hidden;
-  // z-index: 90;
+  padding-top: @brand-height;
   position: relative;
   left: 0;
   .transition-left;
   flex-grow: 1;
-  @media screen and (min-width: @breakpoint){
-    display: flex;
-    flex-grow: 1;
-  }
 }
 .column {
   height: 100%;

static/layout.less

@@ -35,6 +35,10 @@
   font-size: .9em;
   color: @code-color;
 }
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
 .transition-left {
   -webkit-transition: left .5s ;
   -moz-transition: left .5s;

static/mixins.less

@@ -24,9 +24,6 @@ label[for="nav-trigger"] {
 label:hover{
   background: @border-color;
 }
-.nav-trigger ~ #everything #right {
-	width: 100%;
-}
 .nav-trigger:checked ~ #everything #right {
   @media screen and (max-width: @breakpoint){
     flex-shrink: 0;