diff --git a/client/less/map.less b/client/less/map.less index bf9ab26cbb..722e9f6018 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -15,8 +15,8 @@ flex-direction: row; background-color: @body-bg; - border-left: 1px solid #333; - box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.3); + border-left: 1px solid #ddd; + 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; - - background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%); - + padding-bottom: 5px; + padding-right:10px; + 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-top: 135px; + margin: 155px auto 0; + 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=) diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 83612c9fd0..edf7120ed0 100644 --- a/server/views/map/show.jade +++ b/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 * - .row - .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4 - .row - .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 + p Challenges marked with * are required for certification + .row.map-buttons + button.center-block.btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges + button.center-block.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 To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End - .button-spacer - p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1")     Greenfield Nonprofit Project #1 + p.challengeBlockDescription 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 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 To qualify for this coding interview training, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack - .button-spacer - 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="Critical Thinking Training")     Critical Thinking Training - p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Whiteboard Coding Training")     Whiteboard Coding Training + 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.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="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 To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack - .button-spacer - 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 #2")     Mock Interview #2 - p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3")     Mock Interview #3 + 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.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 #2") Mock Interview #2 + p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3") Mock Interview #3 .spacer