gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Filter functions almost ready.

Browse Source 
Our pretty bar changes visual state of the filtered elements, clears with the X, restores hidden elements when deleting characters. Etc.

For the future: if a chapterBlock is collapsed but has results, expand it. No?
Also, hopefully getting fontawesome to the latest version... Regardless of that, this is a great opportunity for a legendary 404.

Expansion of containers achieved

Still working on collapsing them back when search terms change.
If users had just pressed "collapse all" before the search, they should remain thus afterwards.

The UX focus here is not to change the users' expected behaviour and final result.

Future: updating font awesome.
Working on a legendary "not found" image to make FCC join the internet hall of fame.
(btw, where would I keep that file in the server?)
This commit is contained in:
Hallaathrad
2016-01-30 20:31:26 -05:00
committed by SaintPeter
parent fa18734a59
commit d1993ea4b6
3 changed files with 130 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/less/map.less
View File

@ -43,15 +43,9 @@
flex: 1; flex: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 0; border: 0;
overflow: auto; overflow: scroll;
} -webkit-overflow-scrolling: touch;
}
.map-aside-body {
#nested {
margin:0 20px;
} }
} }
@ -73,43 +67,69 @@
.map-fixed-header { .map-fixed-header {
position: fixed; position: fixed;
background: white; background: white;
padding-top: 20px; padding-top: 13px;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
left: 0; left: 0;
top: 0; top: 0;
@media (max-width: 720px) { @media (max-width: 720px) {
padding-top:35px; padding-top:30px;
} }
} p {
.map-fixed-header p {
margin: 10px 0 20px; margin: 10px 0 20px;
@media (max-width: 720px) { @media (max-width: 720px) {
margin-bottom:15px; margin-bottom:10px;
}
} }
} hr {
.map-fixed-header hr { margin:30px 0;
margin:35px 0; @media (max-width: 720px) {
@media (max-width: 720px) { margin:25px 0;
margin:25px 0; }
} }
} }
.map-buttons button, .map-buttons button,
.map-buttons .input-group{ .map-buttons .input-group{
width:300px; width:300px;
} }
.map-buttons .input-group{ .map-buttons .input-group{
margin-top: 10px; margin-top: 15px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#map-filter {
background:#fff;
border-color: darkgreen;
}
.input-group-addon {
width:40px;
color: darkgreen;
background: #fff;
border-color: darkgreen;
&.filled{
background: darkgreen;
border-color: #000d00;
color: #fff;
cursor: pointer;
}
.fa {
position:absolute;
top:50%;
transform: translateY(-50%);
right:10px;
}
}
.map-accordion { .map-accordion {
margin: 140px auto 0; margin: 170px auto 0;
width:700px; width:700px;
overflow-y: auto; overflow-y: auto;
position:relative; position:relative;
#nested {
margin:0 15px;
}
h2 > a { h2 > a {
width:100%; width:100%;
display:block; display:block;
@ -132,11 +152,11 @@
} }
} }
#nested div :before { div.chapterBlock :before {
margin-right: 15px; margin-right: 15px;
} }
#nested div p { div.chapterBlock p {
text-indent: -15px; text-indent: -15px;
margin-left: 60px; margin-left: 60px;
padding-right: 20px padding-right: 20px
@ -176,7 +196,7 @@
left:0; left:0;
right:0; right:0;
width:100%; width:100%;
margin-top:165px; margin-top:205px;
h2 { h2 {
margin:15px 0; margin:15px 0;
padding:0; padding:0;
@ -234,6 +254,18 @@
} }
} }
#noneFound {
display:none;
margin:60px 30px 0;
font-size:60px;
text-align: center;
color:darkgreen;
.fa {
display:block;
font-size:300px;
}
}
.map-aside-action-pop-out { .map-aside-action-pop-out {
margin-right: -4px; margin-right: -4px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=) background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)

62
client/main.js
View File

@ -392,34 +392,68 @@ $(document).ready(function() {
}); });
// live filter // live filter
$('#map-filter').on('keyup', () => {
function clearMapFilter(){
$('#map-filter').val('');
$('#map-filter').next().children().removeClass('fa-times').addClass('fa-search');
$('#map-filter').next().removeClass('filled');
$('.map-accordion').find('.hidden').removeClass('hidden');
$('#noneFound').hide();
}
$('#map-filter').on('keyup', () => {
if($('#map-filter').val().length > 1) { if($('#map-filter').val().length > 1) {
var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi"); var regex = new RegExp($('#map-filter').val().replace(/ /g, '-'), "gi");
$('.challenge-title').each((index, title) => { $('.challenge-title').each((index, title) => {
//console.log("title:", JSON.stringify(title));
if(regex.test($(title).attr('name'))) { if(regex.test($(title).attr('name'))) {
$(title).removeClass('hidden'); expandBlock($(title).closest('.chapterBlock'));
expandBlock($(title).closest('.chapterBlock').prev('h3'));
expandBlock($(title).closest('.certBlock'));
expandBlock($(title).closest('.certBlock').prev('h2'));
$(title).removeClass('hidden');
} else { } else {
$(title).addClass('hidden'); $(title).addClass('hidden');
} }
}); });
$.each($('.map-collapse'), function(i, div) {
console.log("bing"); $.each($('.chapterBlock'), function(i, div) {
if ($(div).find('.hidden').length === if ($(div).find('.hidden').length ===
$(div).find('p').length) { $(div).find('p').length) {
console.log("hiding parents"); $(div).addClass('hidden');
$(div).addClass('hidden'); $(div).prev('h3').addClass('hidden');
$(div).find('h3').addClass('hidden'); } else {
$(div).prev('h2').addClass('hidden'); $(div).removeClass('hidden');
$(div).prev('h3').removeClass('hidden');
} }
}); });
} else {
$('.challenge-title').each((title) => { $.each($('.certBlock'), function(i, div) {
$(title).removeClass('hidden'); if ($(div).children('#nested').children('h3.hidden').length ===
$(div).children('#nested').children('h3').length) {
$(div).prev('h2').addClass('hidden');
} else {
$(div).prev('h2').removeClass('hidden');
}
}); });
} else if ($('#map-filter').val().length === 0) {
clearMapFilter();
} else {
$('#map-filter').next()
.children()
.removeClass('fa-search')
.addClass('fa-times');
$('#map-filter').next().addClass('filled');
}
if ($.find('.certBlock').length===$('.map-accordion').children('.hidden').length) {
console.log("yass");
$('#noneFound').show();
} else {
$('#noneFound').hide();
} }
}); });
$('.map-buttons .input-group-addon').on('click', clearMapFilter);
// keyboard shortcuts: open map // keyboard shortcuts: open map
window.Mousetrap.bind('g m', function() { window.Mousetrap.bind('g m', function() {

48
server/views/map/show.jade
View File

@ -11,22 +11,24 @@ block content
i.fa.fa-search i.fa.fa-search
hr hr
#accordion.map-accordion #accordion.map-accordion
#noneFound Nope! Your search has produced no results
i.fa.fa-hand-spock-o
for superBlock, index in superBlocks for superBlock, index in superBlocks
h2 h2
a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
span.no-link-underline span.no-link-underline
i.fa.fa-caret-down   i.fa.fa-caret-down
| #{superBlock.name} | #{superBlock.name}
div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition") div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition certBlock")
#nested #nested
for challengeBlock in superBlock.blocks for challengeBlock in superBlock.blocks
h3 h3
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
span.no-link-underline span.no-link-underline
i.fa.fa-caret-down   i.fa.fa-caret-down
| #{challengeBlock.name} | #{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") div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition chapterBlock")
for challenge in challengeBlock.challenges for challenge in challengeBlock.challenges
if challenge.completed if challenge.completed
p.challenge-title.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}")
@ -66,7 +68,7 @@ block content
span.no-link-underline span.no-link-underline
i.fa.fa-caret-down   i.fa.fa-caret-down  
| Full Stack Development Certification | Full Stack Development Certification
div.margin-left-10(id = 'collapse-full-stack-development-certification' class = "collapse in map-collapse no-transition") div.margin-left-10(id = 'collapse-full-stack-development-certification' class = "collapse in map-collapse no-transition certBlock")
#nested #nested
h3 h3
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-nonprofit-projects') a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-nonprofit-projects')
@ -74,27 +76,27 @@ block content
i.fa.fa-caret-down   i.fa.fa-caret-down  
| Nonprofit Projects | 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") div.margin-left-10(id = "nested-collapse-nonprofit-projects" class = "collapse in map-collapse no-transition chapterBlock")
p.challengeBlockDescription To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End .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 p.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1") Greenfield Nonprofit Project #1
span.text-primary     span.text-primary    
strong * strong *
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2") Greenfield Nonprofit Project #2 p.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2") Greenfield Nonprofit Project #2
span.text-primary     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 p.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #1") Legacy Code Nonprofit Project #1
span.text-primary     span.text-primary    
strong * strong *
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2") Legacy Code Nonprofit Project #2 p.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2") Legacy Code Nonprofit Project #2
span.text-primary     span.text-primary    
strong * 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.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Claim your Full Stack Development Certification") Claim your Full Stack Development Certification
h2 h2
a(data-toggle='collapse', data-parent='#accordion', href='#collapse-coding-interview-preparation') a(data-toggle='collapse', data-parent='#accordion', href='#collapse-coding-interview-preparation')
span.no-link-underline span.no-link-underline
i.fa.fa-caret-down   i.fa.fa-caret-down  
| Coding Interview Preparation | Coding Interview Preparation
div.margin-left-10(id = 'collapse-coding-interview-preparation' class = "collapse in map-collapse no-transition") div.margin-left-10(id = 'collapse-coding-interview-preparation' class = "collapse in map-collapse no-transition certBlock")
#nested #nested
h3 h3
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-coding-interview-training') a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-coding-interview-training')
@ -102,20 +104,20 @@ block content
i.fa.fa-caret-down   i.fa.fa-caret-down  
| Coding Interview Training | 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") div.margin-left-10(id = "nested-collapse-coding-interview-training" class = "collapse in map-collapse no-transition chapterBlock")
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 .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.challenge-title.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.challenge-title.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.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Whiteboard Coding Training") Whiteboard Coding Training
h3 h3
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-mock-interviews') a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-mock-interviews')
span.no-link-underline span.no-link-underline
i.fa.fa-caret-down   i.fa.fa-caret-down  
| Mock Interviews | 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") div.margin-left-10(id = "nested-collapse-mock-interviews" class = "collapse in map-collapse no-transition chapterBlock")
p.challengeBlockDescription To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack .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.challenge-title.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.challenge-title.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.challenge-title.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3") Mock Interview #3
.spacer .spacer