From 95dfd2304e4c15b738e3c27f4e06554708dc313c Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Thu, 14 Jan 2016 16:03:55 -0800
Subject: [PATCH] Use specific layout for map aside Links in aside change
 parent location

---
 client/main.js                     |   2 +-
 server/boot/challenge.js           |  10 +-
 server/views/layout-map-aside.jade |   8 ++
 server/views/layout-wide.jade      |  17 +--
 server/views/map/show.jade         | 177 ++++++++++++++---------------
 server/views/map/showAside.jade    |  47 ++++++++
 6 files changed, 155 insertions(+), 106 deletions(-)
 create mode 100644 server/views/layout-map-aside.jade
 create mode 100644 server/views/map/showAside.jade

diff --git a/client/main.js b/client/main.js
index e8614eeb8a..eb58096ddd 100644
--- a/client/main.js
+++ b/client/main.js
@@ -264,7 +264,7 @@ $(document).ready(function() {
   $('#nav-map-btn').on('click', () => {
     if (!main.isMapAsideLoad) {
       var mapAside = $('<iframe>');
-      mapAside.attr('src', '/map-minimal');
+      mapAside.attr('src', '/map-aside');
       $('.map-aside').append(mapAside);
       main.isMapAsideLoad = true;
     }
diff --git a/server/boot/challenge.js b/server/boot/challenge.js
index a125fb6efa..8b62713902 100644
--- a/server/boot/challenge.js
+++ b/server/boot/challenge.js
@@ -398,7 +398,7 @@ module.exports = function(app) {
   );
 
   router.get('/map', showMap.bind(null, false));
-  router.get('/map-minimal', showMap.bind(null, true));
+  router.get('/map-aside', showMap.bind(null, true));
   router.get(
     '/challenges/current-challenge',
     redirectToCurrentChallenge
@@ -618,15 +618,15 @@ module.exports = function(app) {
       );
   }
 
-  function showMap(showMinimal, { user }, res, next) {
+  function showMap(showAside, { user }, res, next) {
 
     getSuperBlocks$(challenge$, getCompletedChallengeIds(user))
       .subscribe(
         superBlocks => {
-          res.render('map/show', {
+          const view = showAside ? 'map/showAside' : 'map/show';
+          res.render(view, {
             superBlocks,
-            title: 'A Map to Learn to Code and Become a Software Engineer',
-            showMinimal
+            title: 'A Map to Learn to Code and Become a Software Engineer'
           });
         },
         next
diff --git a/server/views/layout-map-aside.jade b/server/views/layout-map-aside.jade
new file mode 100644
index 0000000000..27f32f3eff
--- /dev/null
+++ b/server/views/layout-map-aside.jade
@@ -0,0 +1,8 @@
+doctype html
+html(lang='en')
+  head
+    include partials/meta
+    include partials/stylesheets
+  body.map-aside-body
+    include partials/scripts
+    block content
diff --git a/server/views/layout-wide.jade b/server/views/layout-wide.jade
index 6d652c9670..df33c7b4aa 100644
--- a/server/views/layout-wide.jade
+++ b/server/views/layout-wide.jade
@@ -3,14 +3,9 @@ html(lang='en')
   head
     include partials/meta
     include partials/stylesheets
-  if showMinimal
-    body.map-aside-body
-      include partials/scripts
-      block content
-  else
-    body.no-top-and-bottom-margins.full-screen-body-background
-      include partials/scripts
-      include partials/navbar
-      include partials/flash
-      block content
-      include partials/footer
+  body.no-top-and-bottom-margins.full-screen-body-background
+    include partials/scripts
+    include partials/navbar
+    include partials/flash
+    block content
+    include partials/footer
diff --git a/server/views/map/show.jade b/server/views/map/show.jade
index 3878524de3..c4bfd3f5e2 100644
--- a/server/views/map/show.jade
+++ b/server/views/map/show.jade
@@ -1,95 +1,94 @@
 extends ../layout-wide
 block content
-    if !showMinimal
-        .row
-            .col-xs-12.col-md-6.col-md-offset-3
-                ul
-                    for superBlock in superBlocks
-                      h2= superBlock.name
-                      for challengeBlock in superBlock.blocks
-                          .row
-                              if (user)
-                                  .col-xs-11.col-sm-8.col-md-9
-                                      li.map-p.negative-10
-                                          | &nbsp;&nbsp;
-                                          a(href='#' + challengeBlock.dashedName)= challengeBlock.name
-                                          if challengeBlock.markNew
-                                              span.text-info.small &thinsp; &thinsp;
-                                                  strong
-                                                      em NEW
-                                          if challengeBlock.isComingSoon
-                                              span.text-info.small &thinsp; &thinsp;
-                                                  strong
-                                                      em Coming Soon
-                              else
-                                  .hidden-xs.col-sm-3.col-md-2
-                                  .col-xs-10.col-sm-8.col-md-9
-                                      span.map-p.negative-10
-                                          a(href='#' + challengeBlock.dashedName)= challengeBlock.name
-                                          if challengeBlock.markNew
-                                              span.text-info.small &thinsp; &thinsp;
-                                                  strong
-                                                      em NEW
-                                          if challengeBlock.isComingSoon
-                                              span.text-info.small &thinsp; &thinsp;
-                                                  strong
-                                                      em Coming Soon
-                    h2 Full Stack Development Certification
-                    .row
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Greenfield Nonprofit Project 1
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Greenfield Nonprofit Project 2
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Legacy Nonprofit Project 1
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Legacy Nonprofit Project 2
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Claim your Full Stack Development Certification
+    .row
+        .col-xs-12.col-md-6.col-md-offset-3
+            ul
+                for superBlock in superBlocks
+                  h2= superBlock.name
+                  for challengeBlock in superBlock.blocks
+                      .row
+                          if (user)
+                              .col-xs-11.col-sm-8.col-md-9
+                                  li.map-p.negative-10
+                                      | &nbsp;&nbsp;
+                                      a(href='#' + challengeBlock.dashedName)= challengeBlock.name
+                                      if challengeBlock.markNew
+                                          span.text-info.small &thinsp; &thinsp;
+                                              strong
+                                                  em NEW
+                                      if challengeBlock.isComingSoon
+                                          span.text-info.small &thinsp; &thinsp;
+                                              strong
+                                                  em Coming Soon
+                          else
+                              .hidden-xs.col-sm-3.col-md-2
+                              .col-xs-10.col-sm-8.col-md-9
+                                  span.map-p.negative-10
+                                      a(href='#' + challengeBlock.dashedName)= challengeBlock.name
+                                      if challengeBlock.markNew
+                                          span.text-info.small &thinsp; &thinsp;
+                                              strong
+                                                  em NEW
+                                      if challengeBlock.isComingSoon
+                                          span.text-info.small &thinsp; &thinsp;
+                                              strong
+                                                  em Coming Soon
+                h2 Full Stack Development Certification
+                .row
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Greenfield Nonprofit Project 1
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Greenfield Nonprofit Project 2
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Legacy Nonprofit Project 1
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Legacy Nonprofit Project 2
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Claim your Full Stack Development Certification
 
-                    h2 Coding Interview Preparation
-                    .row
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Whiteboard Coding Interview Training
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Critical Thinking Interview Training
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Mock Interview 1
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Mock Interview 2
-                        .col-xs-12.col-sm-9.col-md-10
-                          li.map-p.negative-10
-                            | &nbsp;&nbsp;
-                            span.ion-locked.padded-ionic-icon 
-                            | Mock Interview 3
-                    hr
+                h2 Coding Interview Preparation
+                .row
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Whiteboard Coding Interview Training
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Critical Thinking Interview Training
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Mock Interview 1
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Mock Interview 2
+                    .col-xs-12.col-sm-9.col-md-10
+                      li.map-p.negative-10
+                        | &nbsp;&nbsp;
+                        span.ion-locked.padded-ionic-icon 
+                        | Mock Interview 3
+                hr
     .row
         .col-xs-12.col-md-6.col-md-offset-3
             for superBlock, index in superBlocks
diff --git a/server/views/map/showAside.jade b/server/views/map/showAside.jade
new file mode 100644
index 0000000000..866c03fc8a
--- /dev/null
+++ b/server/views/map/showAside.jade
@@ -0,0 +1,47 @@
+extends ../layout-map-aside
+block content
+    .row
+        .col-xs-12.col-md-6.col-md-offset-3
+            for superBlock, index in superBlocks
+                for challengeBlock in superBlock.blocks
+                    .row
+                        a(href='#' name=challengeBlock.dashedName)
+                        .spacer.negative-55
+                    .row
+                        h4.bold #{challengeBlock.name} (#{challengeBlock.time})
+                        for challenge in challengeBlock.challenges
+
+                          .col-xs-12.col-sm-9.col-md-10
+                            if challenge.completed
+                                p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
+                                    a(href="/challenges/#{challenge.dashedName}" target='_parent')
+                                        = challenge.title
+                                        span.sr-only= " Complete"
+                            else if (challenge.type === "bonfire")
+                                p.ion-asterisk.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
+                                    a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
+                                        span= challenge.title
+                                        span.sr-only= " Incomplete"
+                                    if challenge.markNew
+                                        span.text-success.small &thinsp; &thinsp;
+                                            strong
+                                                em New
+                                    if challengeBlock.isComingSoon
+                                        span.text-success.small &thinsp; &thinsp;
+                                            strong
+                                                em Coming Soon
+                            else
+                                p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
+                                    a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
+                                        span= challenge.title
+                                        span.sr-only= " Incomplete"
+                                    if challenge.markNew
+                                        span.text-success.small &thinsp; &thinsp;
+                                            strong
+                                                em New
+                                    if challengeBlock.isComingSoon
+                                        span.text-success.small &thinsp; &thinsp;
+                                            strong
+                                                em Coming Soon
+                  if (index < superBlocks.length)
+                    hr