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

Adjust spaces and sizes on sidebar

Browse Source 
Addressing the changes discussed over skype to fix #6564, and an incoming issue with #6584 in which the absence of the button will create awkward empty spaces.
Took that chance to improve the spacing even further —vertical real state.

----

bonus: changed the colour for the navbar hover status (brown -> darkgreen)
This commit is contained in:
Hallaathrad
2016-01-29 19:45:21 -05:00
committed by SaintPeter
parent c62b7abf8f
commit 81f9b92bed
3 changed files with 27 additions and 31 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%);

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 {

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

@ -20,7 +20,7 @@ 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
@ -68,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
@ -96,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
@ -107,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