diff --git a/client/less/lib/bootstrap/variables.less b/client/less/lib/bootstrap/variables.less index 99210569f7..ad85a1261b 100755 --- a/client/less/lib/bootstrap/variables.less +++ b/client/less/lib/bootstrap/variables.less @@ -360,7 +360,7 @@ // Navbar links @navbar-default-link-color: @gray-lighter; -@navbar-default-link-hover-color: #4a2b0f; +@navbar-default-link-hover-color: darkgreen; @navbar-default-link-hover-bg: @gray-lighter; @navbar-default-link-active-color: @gray-lighter; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); diff --git a/client/less/main.less b/client/less/main.less index 3e610dc2dc..9ac5f78e94 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -1018,6 +1018,14 @@ hr { color: @gray-light; } +.asterisk-explanation { + margin-top: -15px; +} + +.map-buttons { + margin-top: -10px; +} + code { padding: 0; } diff --git a/client/less/map.less b/client/less/map.less index 722e9f6018..3bb9b58abf 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -3,11 +3,11 @@ * license: MIT */ .map-aside { + width:500px; z-index: 20000; position: fixed; top: 0; - left: 60%; bottom: 0; right: 0; @@ -39,20 +39,6 @@ background-color: @body-bg; } - @media (max-width: 1150px) { - left: 45%; - } - @media (max-width: 944px) { - left: 30%; - } - @media (max-width: 600px) { - left: 15%; - } - @media (max-width: 500px) { - left: 0; - border-left: none; - } - & > iframe { flex: 1; width: 100%; @@ -87,24 +73,33 @@ .map-fixed-header { position: fixed; background: white; - padding-top: 15px; + padding-top: 20px; width: 100%; z-index: 1; left: 0; top: 0; + @media (max-width: 720px) { + padding-top:35px; + } } .map-fixed-header p { margin: 10px 0 20px; + @media (max-width: 720px) { + margin-bottom:15px; + } } .map-fixed-header hr { - margin:30px 0; + margin:35px 0; + @media (max-width: 720px) { + margin:25px 0; + } } .map-buttons button { width:300px; } .map-accordion { - margin: 155px auto 0; + margin: 140px auto 0; width:700px; overflow-y: auto; position:relative; @@ -157,11 +152,16 @@ } } .challengeBlockTime { - margin-right: 20px; - margin-top:5px; - float:right; font-size: 18px; color: #BBBBBB; + display:block; + margin-left: 40px; + margin-bottom: 20px; + @media (min-width: 721px) { + margin-right: 20px; + margin-top:-30px; + float:right; + } } @media (max-width: 720px) { @@ -169,7 +169,7 @@ left:0; right:0; width:100%; - margin-top:194px; + margin-top:165px; h2 { margin:15px 0; padding:0; @@ -189,10 +189,6 @@ } } } - .challengeBlockTime { - float:none; - display:block; - } } .map-aside-action-item { diff --git a/client/main.js b/client/main.js index 48a973b051..a51c262746 100644 --- a/client/main.js +++ b/client/main.js @@ -280,6 +280,43 @@ $(document).ready(function() { window.location.href = link; }); + function expandCaret(item) { + $(item) + .prev().find('.fa-caret-right') + .removeClass('fa-caret-right').addClass('fa-caret-down'); + } + + function collapseCaret(item) { + $(item) + .prev().find('.fa-caret-down') + .removeClass('fa-caret-down').addClass('fa-caret-right'); + } + + function expandBlock(item) { + $(item).addClass('in').css('height', '100%'); + expandCaret(item); + } + + function collapseBlock(item) { + $(item).removeClass('in').css('height', '100%'); + collapseCaret(item); + } + + $.each($('.sr-only'), function(i, span) { + if ($(span).text() === ' Complete') { + $(span).parents('p').addClass('manip-hidden'); + } + }); + + $.each($('.map-collapse'), function(i, div) { + if ($(div).find('.manip-hidden').length === + $(div).find('p').length) { + collapseBlock(div); + $(div).find('h3 > a').addClass('faded'); + $(div).prev('h2').addClass('faded'); + } + }); + var scrollTo, dashedName = localStorage.getItem('currentDashedName'), elemsToSearch = $('p.padded-ionic-icon a'), currOrLastChallenge; if (!dashedName && $('.sr-only').length) { @@ -323,63 +360,31 @@ $(document).ready(function() { } $('#accordion').on('show.bs.collapse', function(e) { - $(e.target) - .prev().find('.fa-caret-right') - .removeClass('fa-caret-right').addClass('fa-caret-down'); + expandCaret(e.target); if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) { $('#showAll').text('Collapse all challenges'); $('#showAll').addClass('active'); } }).on('hide.bs.collapse', function(e) { - $(e.target) - .prev().find('.fa-caret-down') - .removeClass('fa-caret-down').addClass('fa-caret-right'); + collapseCaret(e.target); if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) { $('#showAll').text('Expand all challenges'); $('#showAll').removeClass('active'); } }); - $('#manipAll').on('click', () => { - var showAll = $('#manipAll').hasClass('active'); - if (showAll) { - $.each($('.sr-only'), function(i, item) { - if ($(item).text() === ' Complete') { - $(item).parents('p').css('display', 'none'); - $(item).parents('p').addClass('manip-hidden'); - } - }); - $('#manipAll').text('Show all challenges'); - return $('#manipAll').removeClass('active'); - } else { - $.each($('.manip-hidden'), function(i, item) { - $(item).css('display', 'block'); - $(item).removeClass('manip-hidden'); - }); - $('#manipAll').text('Show incomplete challenges'); - return $('#manipAll').addClass('active'); - } - }); - $('#showAll').on('click', () => { var mapExpanded = $('#showAll').hasClass('active'); if (!mapExpanded) { - $.each($('.map-collapse:not(".in")'), function(i, item) { - $(item).css('height', '100%'); - $(item).addClass('in'); - $(item) - .prev().find('.fa-caret-right') - .removeClass('fa-caret-right').addClass('fa-caret-down'); + $.each($('.map-collapse:not(".in")'), + function(i, div) { + expandBlock(div); }); $('#showAll').text('Collapse all challenges'); return $('#showAll').addClass('active'); } else { - $.each($('.map-collapse.in'), function(i, item) { - $(item).css('height', '100%'); - $(item).removeClass('in'); - $(item) - .prev().find('.fa-caret-down') - .removeClass('fa-caret-down').addClass('fa-caret-right'); + $.each($('.map-collapse.in'), function(i, div) { + collapseBlock(div); }); $('#showAll').text('Expand all challenges'); return $('#showAll').removeClass('active'); diff --git a/server/views/map/show.jade b/server/views/map/show.jade index edf7120ed0..9b3134c168 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -1,10 +1,9 @@ extends ../layout-wide block content - .text-center.map-fixed-header - p Challenges marked with * are required for certification + .text-center.map-fixed-header.asterisk-explanation + p Challenges required for certifications are marked with a * .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 + button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges hr #accordion.map-accordion for superBlock, index in superBlocks @@ -21,11 +20,11 @@ block content span.no-link-underline i.fa.fa-caret-down   | #{challengeBlock.name} - span.challengeBlockTime (#{challengeBlock.time}) + 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") 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.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" @@ -69,7 +68,7 @@ block content span.no-link-underline i.fa.fa-caret-down   | Nonprofit Projects - span.challengeBlockTime (800 hours) + span.challengeBlockTime (800 hours) div.margin-left-10(id = "nested-collapse-nonprofit-projects" class = "collapse in map-collapse no-transition") 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 @@ -97,7 +96,7 @@ block content span.no-link-underline i.fa.fa-caret-down   | Coding Interview Training - span.challengeBlockTime (70 hours) + span.challengeBlockTime (70 hours) div.margin-left-10(id = "nested-collapse-coding-interview-training" class = "collapse in map-collapse no-transition") 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 @@ -108,7 +107,7 @@ block content span.no-link-underline i.fa.fa-caret-down   | Mock Interviews - span.challengeBlockTime (10 hours) + span.challengeBlockTime (10 hours) div.margin-left-10(id = "nested-collapse-mock-interviews" class = "collapse in map-collapse no-transition") 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