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

Merge pull request #6592 from SaintPeter/fix/remove-filter-adjust-spacing

Browse Source 
Fix/Remove Filter and Adjust Map Spacing and Coloring
This commit is contained in:
Rex Schrader
2016-01-31 14:34:47 -08:00
parent 08d170aa08 806b196d5e
commit d049d7b646
5 changed files with 83 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/less/lib/bootstrap/variables.less
View File

@ -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%);

8
client/less/main.less
View File

@ -1018,6 +1018,14 @@ hr {
color: @gray-light;
}
.asterisk-explanation {
margin-top: -15px;
}
.map-buttons {
margin-top: -10px;
}
code {
padding: 0;
}

48
client/less/map.less
View File

@ -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 {

83
client/main.js
View File

@ -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');

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

@ -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