diff --git a/client/less/map.less b/client/less/map.less index 3bb9b58abf..f6c420044d 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -94,10 +94,17 @@ margin:25px 0; } } -.map-buttons button { +.map-buttons button, +.map-buttons .input-group{ width:300px; } +.map-buttons .input-group{ + margin-top: 10px; + margin-left: auto; + margin-right: auto; +} + .map-accordion { margin: 140px auto 0; width:700px; @@ -116,7 +123,7 @@ margin:15px 0; padding:0; &:first-child { - margin-top:25px + margin-top:25px } > a { padding-left: 40px; @@ -179,7 +186,7 @@ padding-right:20px; font-size:20px; } - } + } h3 { margin:10px 0; padding:0; @@ -188,7 +195,7 @@ font-size:20px; } } - } + } } .map-aside-action-item { diff --git a/client/main.js b/client/main.js index a51c262746..c78dffd8f2 100644 --- a/client/main.js +++ b/client/main.js @@ -391,6 +391,36 @@ $(document).ready(function() { } }); + // live filter + $('#map-filter').on('keyup', () => { + if($('#map-filter').val().length > 1) { + var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi"); + $('.challenge-title').each((index, title) => { + //console.log("title:", JSON.stringify(title)); + if(regex.test($(title).attr('name'))) { + $(title).removeClass('hidden'); + } else { + $(title).addClass('hidden'); + } + + }); + $.each($('.map-collapse'), function(i, div) { + console.log("bing"); + if ($(div).find('.hidden').length === + $(div).find('p').length) { + console.log("hiding parents"); + $(div).addClass('hidden'); + $(div).find('h3').addClass('hidden'); + $(div).prev('h2').addClass('hidden'); + } + }); + } else { + $('.challenge-title').each((title) => { + $(title).removeClass('hidden'); + }); + } + }); + // keyboard shortcuts: open map window.Mousetrap.bind('g m', function() { var isCollapsed = $('.map-aside').hasClass('is-collapsed'); diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 9b3134c168..aec2616d86 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -4,13 +4,18 @@ block content p Challenges required for certifications are marked with a * .row.map-buttons button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges + .row.map-buttons + .input-group + input#map-filter.form-control(type="text" placeholder="challenge name") + span.input-group-addon + i.fa.fa-search hr #accordion.map-accordion for superBlock, index in superBlocks h2 a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) span.no-link-underline - i.fa.fa-caret-down   + i.fa.fa-caret-down   | #{superBlock.name} div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") #nested @@ -18,18 +23,18 @@ block content h3 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   + i.fa.fa-caret-down   | #{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") for challenge in challengeBlock.challenges if challenge.completed - p.faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") + p.challenge-title.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.challenge-title.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" @@ -44,7 +49,7 @@ block content span.text-primary     strong * else - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") + p.challenge-title.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" @@ -67,7 +72,7 @@ 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 + | Nonprofit Projects 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 @@ -76,7 +81,7 @@ block content strong * p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2") Greenfield Nonprofit Project #2 span.text-primary     - strong * + strong * 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 * @@ -95,7 +100,7 @@ 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 + | Coding Interview Training 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 @@ -106,7 +111,7 @@ block content a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-mock-interviews') span.no-link-underline i.fa.fa-caret-down   - | Mock Interviews + | Mock Interviews 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