improve the challenge accordion
This commit is contained in:
Quincy Larson
@ -400,7 +400,7 @@ p {
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 26px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.btn-responsive {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "Getting Started",
|
||||
"name": "Join the Free Code Camp Community",
|
||||
"order": 1,
|
||||
"time": "15 minutes",
|
||||
"helpRoom": "Help",
|
||||
|
||||
@ -1,125 +1,58 @@
|
||||
extends ../layout-wide
|
||||
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
|
||||
for superBlock, index in superBlocks
|
||||
.panel.panel-default
|
||||
.panel-heading
|
||||
h4.panel-title
|
||||
a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
|
||||
| #{superBlock.name}
|
||||
div(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse")
|
||||
.panel-body
|
||||
#nested.panel-group
|
||||
h3
|
||||
a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
|
||||
| #{superBlock.name}
|
||||
ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse")
|
||||
#nested.panel-group
|
||||
for challengeBlock in superBlock.blocks
|
||||
.panel.panel-default
|
||||
.panel-heading
|
||||
h4.panel-title
|
||||
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.split(' ').join('-'))
|
||||
| #{challengeBlock.name}
|
||||
div(id = "nested-collapse"+challengeBlock.name.split(' ').join('-') class = "panel-collapse collapse")
|
||||
.panel-body
|
||||
for challenge in challengeBlock.challenges
|
||||
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
|
||||
.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
|
||||
h4
|
||||
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
|
||||
| #{challengeBlock.name}
|
||||
div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse")
|
||||
ul
|
||||
br
|
||||
for challenge in challengeBlock.challenges
|
||||
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
|
||||
.spacer
|
||||
|
||||
Reference in New Issue
Block a user