Fix map's layout

Centering in screen, responsive and indented.

Adittional styling to enhance visual hyerarchies, and then some UX colour-loving care to ease use on the sidebar+menu.

client/less/map.less

@@ -15,8 +15,8 @@
     flex-direction: row;
 
     background-color: @body-bg;
-    border-left: 1px solid #333;
+    border-left: 1px solid #ddd;
-    box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.3);
+    box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
 
     transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
 
@@ -60,7 +60,12 @@
 
       border: 0;
       overflow: auto;
-      margin-top: 40px;
+    }
+}
+
+.map-aside-body {
+    #nested {
+      margin:0 20px;
     }
 }
 
@@ -73,27 +78,121 @@
     display: flex;
     justify-content: flex-end;
 
-    padding-bottom: 0.7em;
+    padding-bottom: 5px;
-
+    padding-right:10px;
-    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
+    padding-top:5px;
-
     z-index: 100;
 }
 
 .map-fixed-header {
   position: fixed;
   background: white;
-  padding-top:15px;
+  padding-top: 15px;
   width: 100%;
   z-index: 1;
   left: 0;
   top: 0;
 }
+.map-fixed-header p {
+  margin: 10px 0 20px;
+}
+.map-fixed-header hr {
+  margin:30px 0;
+}
+.map-buttons button {
+  width:300px;
+}
 
 .map-accordion {
-  position: absolute;
+  margin: 155px auto 0;
-  margin-top: 135px;
+  width:700px;
   overflow-y: auto;
+  position:relative;
+  h2 > a {
+      width:100%;
+      display:block;
+      background:#efefef;
+      padding:10px 0;
+      padding-left:50px;
+      padding-right:20px;
+    }
+
+  h3 {
+    margin:15px 0;
+    padding:0;
+    &:first-child {
+      margin-top:25px      
+    }
+    > a {
+      padding-left: 40px;
+      padding-bottom: 10px;
+      display:block;
+    }
+  }
+
+  #nested div :before {
+    margin-right: 15px;
+  }
+
+  #nested div p {
+      text-indent: -15px;
+      margin-left: 60px;
+      padding-right: 20px
+    }
+
+  .challengeBlockDescription {
+      margin:0;
+      margin-top:-10px;
+      padding:0 15px 23px 30px;
+    }
+
+  span.no-link-underline {
+    position:absolute;
+    margin-left:-30px;
+    color: #666;
+  }
+
+  div > div:last-child {
+    margin-bottom:30px
+  }
+}
+.challengeBlockTime {
+  margin-right: 20px;
+  margin-top:5px;
+  float:right;
+  font-size: 18px;
+  color: #BBBBBB;
+}
+
+@media (max-width: 720px) {
+  .map-accordion {
+    left:0;
+    right:0;
+    width:100%;
+    margin-top:194px;
+    h2 {
+      margin:15px 0;
+      padding:0;
+      > a {
+        padding:10px 0;
+        padding-left:50px;
+        padding-right:20px;
+        font-size:20px;
+      }
+    }  
+    h3 {
+      margin:10px 0;
+      padding:0;
+      > a {
+        clear:both;
+        font-size:20px;
+      }
+    }
+  }    
+  .challengeBlockTime {
+    float:none;
+    display:block;
+  }
 }
 
 .map-aside-action-item {
@@ -132,10 +231,6 @@
     }
 }
 
-.map-aside-body {
-    margin: 0 20px 40px 60px
-}
-
 .map-aside-action-pop-out {
     margin-right: -4px;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)

server/views/map/show.jade

@@ -1,16 +1,12 @@
 extends ../layout-wide
 block content
         .text-center.map-fixed-header
-            p Required challenges are marked with a *
+            p Challenges marked with * are required for certification
-            .row
+            .row.map-buttons
-                .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
+                button.center-block.btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges
-                  .row
+                button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all
-                    .col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3
-                      .btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges
-                      .btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all
             hr
         #accordion.map-accordion
-          .button-spacer
           for superBlock, index in superBlocks
               h2
                 a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
@@ -24,17 +20,17 @@ block content
                             a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
                               span.no-link-underline
                                 i.fa.fa-caret-down   
-                              | #{challengeBlock.name} (#{challengeBlock.time})
+                              | #{challengeBlock.name}
+                              span.challengeBlockTime (#{challengeBlock.time})
                           div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition")
-                              .button-spacer
                               for challenge in challengeBlock.challenges
                                   if challenge.completed
-                                      p.slightly-faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
+                                      p.slightly-faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
                                           a(href="/challenges/#{challenge.dashedName}" target='_parent')
                                               = challenge.title
                                               span.sr-only= " Complete"
                                   else if challenge.isRequired
-                                      p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
+                                      p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
                                           a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                               span= challenge.title
                                               span.sr-only= " Incomplete"
@@ -49,7 +45,7 @@ block content
                                           span.text-primary    
                                               strong *
                                   else
-                                      p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
+                                      p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
                                           a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                               span= challenge.title
                                               span.sr-only= " Incomplete"
@@ -72,24 +68,23 @@ block content
                   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-nonprofit-projects')
                     span.no-link-underline
                       i.fa.fa-caret-down  
-                    | Nonprofit Projects (800 hours)
+                    | Nonprofit Projects 
+                    span.challengeBlockTime (800 hours)
                 div.margin-left-10(id = "nested-collapse-nonprofit-projects" class = "collapse in map-collapse no-transition")
-                    .button-spacer
+                      p.challengeBlockDescription To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
-                      p To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1") Greenfield Nonprofit Project #1
-                      .button-spacer
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1")     Greenfield Nonprofit Project #1
                         span.text-primary    
                           strong *
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2")     Greenfield Nonprofit Project #2
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2") Greenfield Nonprofit Project #2
                         span.text-primary    
                           strong *  
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #1")     Legacy Code Nonprofit Project #1
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #1") Legacy Code Nonprofit Project #1
                         span.text-primary    
                           strong *
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2")     Legacy Code Nonprofit Project #2
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2") Legacy Code Nonprofit Project #2
                         span.text-primary    
                           strong *
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Claim your Full Stack Development Certification")     Claim your Full Stack Development Certification
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Claim your Full Stack Development Certification") Claim your Full Stack Development Certification
           h2
             a(data-toggle='collapse', data-parent='#accordion', href='#collapse-coding-interview-preparation')
               span.no-link-underline
@@ -101,24 +96,22 @@ block content
                   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-coding-interview-training')
                     span.no-link-underline
                       i.fa.fa-caret-down  
-                    | Coding Interview Training (70 hours)
+                    | Coding Interview Training 
+                    span.challengeBlockTime (70 hours)
                 div.margin-left-10(id = "nested-collapse-coding-interview-training" class = "collapse in map-collapse no-transition")
-                    .button-spacer
+                      p.challengeBlockDescription To qualify for this coding interview training, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
-                      p To qualify for this coding interview training, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Soft Skill Training") Soft Skill Training
-                      .button-spacer
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Critical Thinking Training") Critical Thinking Training
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Soft Skill Training")     Soft Skill Training
+                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Whiteboard Coding Training") Whiteboard Coding Training
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Critical Thinking Training")     Critical Thinking Training
-                      p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Whiteboard Coding Training")     Whiteboard Coding Training
                   h3
                     a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-mock-interviews')
                       span.no-link-underline
                         i.fa.fa-caret-down  
-                      | Mock Interviews (10 hours)
+                      | Mock Interviews 
+                      span.challengeBlockTime (10 hours)
                   div.margin-left-10(id = "nested-collapse-mock-interviews" class = "collapse in map-collapse no-transition")
-                      .button-spacer
+                        p.challengeBlockDescription To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
-                        p To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
+                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #1") Mock Interview #1
-                        .button-spacer
+                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #2") Mock Interview #2
-                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #1")     Mock Interview #1
+                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3") Mock Interview #3
-                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #2")     Mock Interview #2
-                        p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3")     Mock Interview #3
           .spacer