Merge pull request #6281 from codeurge/feature/fixed_map_header_area

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

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;
+      var scrollTo = $(lastChallenge).offset().top - 400;
-      $('html, body').scrollTop(scrollTo);
+      $('.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