diff --git a/client/less/map.less b/client/less/map.less index a1eda748d0..5f53c4ae9b 100644 --- a/client/less/map.less +++ b/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 */ diff --git a/client/main.js b/client/main.js index a81e14578f..a34ef6bd33 100644 --- a/client/main.js +++ b/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); } } diff --git a/server/views/map/show.jade b/server/views/map/show.jade index a52215180f..7e39fd789b 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -1,61 +1,62 @@ extends ../layout-wide block content - .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 - for superBlock, index in superBlocks - h2 - i.fa.fa-caret-down - |   - a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) - | #{superBlock.name} - div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") - #nested - for challengeBlock in superBlock.blocks - h3 - i.fa.fa-caret-down - |   - a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) - | #{challengeBlock.name} (#{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.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.slightly-faded.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" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - span.text-primary     - strong * - else - p.slightly-faded.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" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - .spacer + .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.map-accordion + for superBlock, index in superBlocks + h2 + i.fa.fa-caret-down + |   + a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) + | #{superBlock.name} + div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") + #nested + for challengeBlock in superBlock.blocks + h3 + i.fa.fa-caret-down + |   + a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) + | #{challengeBlock.name} (#{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.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.slightly-faded.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" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + span.text-primary     + strong * + else + p.slightly-faded.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" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + .spacer