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

Fix map's layout

Browse Source 
Centering in screen, responsive and indented.

Adittional styling to enhance visual hyerarchies, and then some UX colour-loving care to ease use on the sidebar+menu.
This commit is contained in:
Hallaathrad
2016-01-23 21:25:57 -05:00
parent 80524d4694
commit 253b3a55bd
2 changed files with 138 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
client/less/map.less
View File

@ -15,8 +15,8 @@
flex-direction: row;
background-color: @body-bg;
border-left: 1px solid #333;
box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.3);
border-left: 1px solid #ddd;
box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
@ -60,7 +60,12 @@
border: 0;
overflow: auto;
margin-top: 40px;
}
}
.map-aside-body {
#nested {
margin:0 20px;
}
}
@ -73,27 +78,121 @@
display: flex;
justify-content: flex-end;
padding-bottom: 0.7em;
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
padding-bottom: 5px;
padding-right:10px;
padding-top:5px;
z-index: 100;
}
.map-fixed-header {
position: fixed;
background: white;
padding-top:15px;
padding-top: 15px;
width: 100%;
z-index: 1;
left: 0;
top: 0;
}
.map-fixed-header p {
margin: 10px 0 20px;
}
.map-fixed-header hr {
margin:30px 0;
}
.map-buttons button {
width:300px;
}
.map-accordion {
position: absolute;
margin-top: 135px;
margin: 155px auto 0;
width:700px;
overflow-y: auto;
position:relative;
h2 > a {
width:100%;
display:block;
background:#efefef;
padding:10px 0;
padding-left:50px;
padding-right:20px;
}
h3 {
margin:15px 0;
padding:0;
&:first-child {
margin-top:25px
}
> a {
padding-left: 40px;
padding-bottom: 10px;
display:block;
}
}
#nested div :before {
margin-right: 15px;
}
#nested div p {
text-indent: -15px;
margin-left: 60px;
padding-right: 20px
}
.challengeBlockDescription {
margin:0;
margin-top:-10px;
padding:0 15px 23px 30px;
}
span.no-link-underline {
position:absolute;
margin-left:-30px;
color: #666;
}
div > div:last-child {
margin-bottom:30px
}
}
.challengeBlockTime {
margin-right: 20px;
margin-top:5px;
float:right;
font-size: 18px;
color: #BBBBBB;
}
@media (max-width: 720px) {
.map-accordion {
left:0;
right:0;
width:100%;
margin-top:194px;
h2 {
margin:15px 0;
padding:0;
> a {
padding:10px 0;
padding-left:50px;
padding-right:20px;
font-size:20px;
}
}
h3 {
margin:10px 0;
padding:0;
> a {
clear:both;
font-size:20px;
}
}
}
.challengeBlockTime {
float:none;
display:block;
}
}
.map-aside-action-item {
@ -132,10 +231,6 @@
}
}
.map-aside-body {
margin: 0 20px 40px 60px
}
.map-aside-action-pop-out {
margin-right: -4px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)

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

@ -1,16 +1,12 @@
extends ../layout-wide
block content
.text-center.map-fixed-header
p Required challenges are marked with a *
.row
.col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
.row
.col-xs-12.col-sm-8.col-sm-offset-2.col-md-6.col-md-offset-3
.btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges
.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all
p Challenges marked with * are required for certification
.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
hr
#accordion.map-accordion
.button-spacer
for superBlock, index in superBlocks
h2
a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
@ -24,17 +20,17 @@ block content
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  
| #{challengeBlock.name} (#{challengeBlock.time})
| #{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")
.button-spacer
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.slightly-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.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"
@ -49,7 +45,7 @@ block content
span.text-primary    
strong *
else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
p.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"
@ -72,24 +68,23 @@ 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 (800 hours)
| Nonprofit Projects
span.challengeBlockTime (800 hours)
div.margin-left-10(id = "nested-collapse-nonprofit-projects" class = "collapse in map-collapse no-transition")
.button-spacer
p To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
.button-spacer
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1")     Greenfield Nonprofit Project #1
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
span.text-primary    
strong *
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2")     Greenfield Nonprofit Project #2
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #2") Greenfield Nonprofit Project #2
span.text-primary    
strong *
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #1")     Legacy Code Nonprofit Project #1
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 *
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2")     Legacy Code Nonprofit Project #2
p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Legacy Code Nonprofit Project #2") Legacy Code Nonprofit Project #2
span.text-primary    
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.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Claim your Full Stack Development Certification") Claim your Full Stack Development Certification
h2
a(data-toggle='collapse', data-parent='#accordion', href='#collapse-coding-interview-preparation')
span.no-link-underline
@ -101,24 +96,22 @@ 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 (70 hours)
| Coding Interview Training
span.challengeBlockTime (70 hours)
div.margin-left-10(id = "nested-collapse-coding-interview-training" class = "collapse in map-collapse no-transition")
.button-spacer
p To qualify for this coding interview training, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
.button-spacer
p.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.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Whiteboard Coding Training")     Whiteboard Coding Training
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
p.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
h3
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse-mock-interviews')
span.no-link-underline
i.fa.fa-caret-down  
| Mock Interviews (10 hours)
| Mock Interviews
span.challengeBlockTime (10 hours)
div.margin-left-10(id = "nested-collapse-mock-interviews" class = "collapse in map-collapse no-transition")
.button-spacer
p To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
.button-spacer
p.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.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #3")     Mock Interview #3
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
p.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
.spacer