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

improve the challenge accordion

Browse Source
This commit is contained in:
Quincy Larson
2016-01-15 18:00:13 -08:00
parent e02000bddd
commit 932a0a975b
3 changed files with 55 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/less/main.less
View File

@ -400,7 +400,7 @@ p {
} }
h4 { h4 {
font-size: 26px; font-size: 22px;
} }
.btn-responsive { .btn-responsive {

2
seed/challenges/00-getting-started/getting-started.json
View File

@ -1,5 +1,5 @@
{ {
"name": "Getting Started", "name": "Join the Free Code Camp Community",
"order": 1, "order": 1,
"time": "15 minutes", "time": "15 minutes",
"helpRoom": "Help", "helpRoom": "Help",

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

@ -1,125 +1,58 @@
extends ../layout-wide extends ../layout-wide
block content block content
.text-center
h1 Challenge Map
p Required challenges are marked with a *
p Click the  
i.fa.fa-external-link
|  button to view this map in full screen.
hr
#accordion.panel-group #accordion.panel-group
for superBlock, index in superBlocks for superBlock, index in superBlocks
.panel.panel-default h3
.panel-heading a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
h4.panel-title | #{superBlock.name}
a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse")
| #{superBlock.name} #nested.panel-group
div(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse")
.panel-body
#nested.panel-group
for challengeBlock in superBlock.blocks for challengeBlock in superBlock.blocks
.panel.panel-default h4
.panel-heading a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
h4.panel-title | #{challengeBlock.name}
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.split(' ').join('-')) div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse")
| #{challengeBlock.name} ul
div(id = "nested-collapse"+challengeBlock.name.split(' ').join('-') class = "panel-collapse collapse") br
.panel-body for challenge in challengeBlock.challenges
for challenge in challengeBlock.challenges if challenge.completed
if challenge.completed p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   a.faded(href="/challenges/#{challenge.dashedName}" target='_parent')
a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title
= challenge.title span.sr-only= " Complete"
span.sr-only= " Complete" else if challenge.isRequired
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' : '')
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title
span= challenge.title span.sr-only= " Incomplete"
span.sr-only= " Incomplete" if challenge.markNew
if challenge.markNew span.text-success.small    
span.text-success.small     strong
strong em New
em New if challengeBlock.isComingSoon
if challengeBlock.isComingSoon span.text-success.small    
span.text-success.small     strong
strong em Coming Soon
em Coming Soon span.text-primary    
span.text-primary     strong *
strong * else
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' : '')
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span= challenge.title
span= challenge.title span.sr-only= " Incomplete"
span.sr-only= " Incomplete" if challenge.markNew
if challenge.markNew span.text-success.small    
span.text-success.small     strong
strong em New
em New if challengeBlock.isComingSoon
if challengeBlock.isComingSoon span.text-success.small    
span.text-success.small     strong
strong em Coming Soon
em Coming Soon .spacer
.row
.col-xs-12.col-md-6.col-md-offset-3
for superBlock, index in superBlocks
if index > 0
.row
h2.text-center #{superBlock.name}
.text-center.small Requires completion of the below challenges marked with a *
hr
for challengeBlock in superBlock.blocks
.row
a(href='#' name=challengeBlock.dashedName)
.spacer.negative-55
.row
h3.bold #{challengeBlock.name} (#{challengeBlock.time})
for challenge in challengeBlock.challenges
.col-xs-12.col-sm-9.col-md-10
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
a.faded(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}")  
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
span.text-primary    
strong *
else
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"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
.row
h2.text-center Full Stack Development Certification
hr
p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15   Claim your Full Stack Development Certification
.row
h2.text-center Coding Interview Preparation
hr
p.ion-locked.padded-ionic-icon.negative-15   Whiteboard Coding Interview Training
p.ion-locked.padded-ionic-icon.negative-15   Critical Thinking Interview Training
p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 1
p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 2
p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 3
.spacer