Load map aside as an iframe on every page

client/less/map.less

@@ -53,7 +53,7 @@
       border-left: none;
     }
 
-    & > .map-aside-container {
+    & > iframe {
       flex: 1;
       width: 100%;
       height: 100%;
@@ -116,6 +116,10 @@
     }
 }
 
+.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=)

client/main.js

@@ -262,6 +262,12 @@ $(document).ready(function() {
 
   // map
   $('#nav-map-btn').on('click', () => {
+    if (!main.isMapAsideLoad) {
+      var mapAside = $('<iframe>');
+      mapAside.attr('src', '/map-minimal');
+      $('.map-aside').append(mapAside);
+      main.isMapAsideLoad = true;
+    }
     $('.map-aside').removeClass('is-collapsed');
   });
 

server/boot/challenge.js

@@ -418,19 +418,8 @@ module.exports = function(app) {
 
   function showChallenge(req, res, next) {
     const solution = req.query.solution;
-    const completedChallenges = getCompletedChallengeIds(req.user);
 
-    Observable.combineLatest(
+    getRenderData$(req.user, challenge$, req.params.challengeName, solution)
-      getRenderData$(req.user, challenge$, req.params.challengeName, solution),
-      getSuperBlocks$(challenge$, completedChallenges),
-      ({ data, ...rest }, superBlocks) => ({
-        ...rest,
-        data: {
-          ...data,
-          superBlocks
-        }
-      })
-    )
       .subscribe(
         ({ type, redirectUrl, message, data }) => {
           if (message) {

server/views/layout-wide.jade

@@ -3,10 +3,14 @@ html(lang='en')
   head
     include partials/meta
     include partials/stylesheets
-  body.no-top-and-bottom-margins.full-screen-body-background
+  if showMinimal
-    include partials/scripts
+    body.map-aside-body
-    if !showMinimal
+      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
+      block content
-    include partials/footer
+      include partials/footer

server/views/partials/challenge-footer.jade

@@ -5,50 +5,3 @@ script.
   if (typeof localStorage !== 'undefined') {
     localStorage.setItem('currentDashedName', typeof common !== 'undefined' && common.dashedName || '');
   }
-aside.map-aside.is-collapsed
-  .map-aside-action-bar
-      a.map-aside-action-item.map-aside-action-pop-out(href='/map' target='_blank' aria-label='open map in new tap')
-      button.map-aside-action-item.map-aside-action-collapse(aria-label='close map aside')
-  .map-aside-container
-      .col-xs-10.col-xs-offset-1
-          for superBlock, index in superBlocks
-            for challengeBlock in superBlock.blocks
-              h4.bold #{challengeBlock.name} (#{challengeBlock.time})
-              for challenge in challengeBlock.challenges
-                  if challenge.completed
-                      p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
-                          a(href="/challenges/#{challenge.dashedName}")
-                              = challenge.title
-                              span.sr-only= " Complete"
-                  else
-                      if challenge.isRequired
-                          p.ion-ios-circle-outline.negative-15(name="#{challenge.dashedName}")  
-                              a(name="#{challenge.dashedName}" href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
-                                  span= challenge.title
-                              span.text-primary.small    
-                                strong
-                                    em Required
-                              span.sr-only= " Incomplete"
-                              if challenge.markNew
-                                  span.text-success.small    
-                                      strong
-                                          em New
-                              if challengeBlock.isComingSoon
-                                  span.text-success.small    
-                                      strong
-                                          em Coming Soon
-                      else
-                          p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
-                              a(name="#{challenge.dashedName}" href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
-                                  span= challenge.title
-                                  span.sr-only= " Incomplete"
-                              if challenge.markNew
-                                  span.text-success.small    
-                                      strong
-                                          em New
-                              if challengeBlock.isComingSoon
-                                  span.text-success.small    
-                                      strong
-                                          em Coming Soon
-                if (index < superBlocks.length)
-                  hr

server/views/partials/footer.jade

@@ -1,2 +1,6 @@
 // scripts should be moved here
 script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
+aside.map-aside.is-collapsed
+  .map-aside-action-bar
+      a.map-aside-action-item.map-aside-action-pop-out(href='/map' target='_blank' aria-label='open map in new tap')
+      button.map-aside-action-item.map-aside-action-collapse(aria-label='close map aside')