Make map header area fixed with flex layout and overflow scroll.

This commit makes the map header with the collapse button fixed by using
flex and overflow. This commit implements the behavior on both the aside
and map (mobile) page.

closes #6276

client/less/map.less

@@ -2,6 +2,12 @@
  * based off of https://github.com/gitterHQ/sidecar
  * license: MIT
  */
+.map {
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+
 .map-aside {
 
     z-index: 20000;
@@ -80,6 +86,18 @@
     z-index: 100;
 }
 
+.map-fixed-header {
+  background: white;
+  z-index: 1;
+  flex: 1;
+  padding-bottom: 25px;
+}
+
+.map-accordion {
+  flex: 9;
+  overflow-y: auto;
+}
+
 .map-aside-action-item {
     display: flex;
     /* main axis */

client/main.js

@@ -269,8 +269,8 @@ $(document).ready(function() {
     });
     if (lastChallenge.length) {
       lastChallenge = lastChallenge[lastChallenge.length - 1];
-      var scrollTo = $(lastChallenge).offset().top - 250;
-      $('html, body').scrollTop(scrollTo);
+      var scrollTo = $(lastChallenge).offset().top - 400;
+      $('.map-accordion').scrollTop(scrollTo);
     }
   }
 

server/views/map/show.jade

@@ -1,13 +1,14 @@
 extends ../layout-wide
 block content
-      .text-center
+      .map
+        .map-fixed-header.text-center
             h1 Challenge Map
             p Required challenges are marked with a *
             .row
                 .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
                     .btn.btn-primary.btn-block.active#showAll Collapse all challenges
             hr
-      #accordion
+        #accordion.map-accordion
           for superBlock, index in superBlocks
               h2
                 i.fa.fa-caret-down