refactor map view and make buttons and text bigger

This commit is contained in:
Quincy Larson
2016-01-14 23:06:06 -08:00
committed by Berkeley Martinez
parent 3105dda128
commit 1e5f3dc61c
16 changed files with 166 additions and 324 deletions

View File

@ -14,7 +14,7 @@
@gray-light: lighten(@gray-base, 46.7%); // #777 @gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee @gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: #009901; @brand-primary: forestgreen;
@brand-success: #457e86; @brand-success: #457e86;
@brand-info: #2b414f; @brand-info: #2b414f;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;

View File

@ -6,7 +6,6 @@
html,body,div,span,a,li,td,th { html,body,div,span,a,li,td,th {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-weight: 300;
} }
bold { bold {
@ -246,7 +245,7 @@ ul {
} }
.text-success { .text-success {
color: @brand-success; color: @brand-primary;
} }
.fast-animation { .fast-animation {
@ -328,6 +327,18 @@ ul {
background-color: @brand-primary; background-color: @brand-primary;
} }
a {
font-weight: bold;
}
p {
font-size: 20px;
}
.map-aside-body p {
line-height: 1.8;
}
.navbar-nav > li > a { .navbar-nav > li > a {
color: @body-bg; color: @body-bg;
&:hover { &:hover {
@ -375,6 +386,7 @@ ul {
.btn-big { .btn-big {
font-size: 30px; font-size: 30px;
border-radius: 6px;
} }
.big-text-field { .big-text-field {
@ -382,6 +394,10 @@ ul {
height: 57px; height: 57px;
} }
h4 {
font-size: 26px;
}
.btn-responsive { .btn-responsive {
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 15px; font-size: 15px;
@ -995,10 +1011,6 @@ code {
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
#submitButton {
font: normal normal normal 14px/1 FontAwesome !important;
}
#testSuite > div >.row { #testSuite > div >.row {
margin: 0!important; margin: 0!important;
} }

View File

@ -433,7 +433,7 @@ module.exports = function(app) {
Observable.combineLatest( Observable.combineLatest(
firstChallenge$, firstChallenge$,
lastChallenge$, lastChallenge$
) )
.flatMap(([firstChallenge, { id: lastChallengeId } ]) => { .flatMap(([firstChallenge, { id: lastChallengeId } ]) => {
// no id supplied, load first challenge // no id supplied, load first challenge
@ -623,10 +623,10 @@ module.exports = function(app) {
getSuperBlocks$(challenge$, getCompletedChallengeIds(user)) getSuperBlocks$(challenge$, getCompletedChallengeIds(user))
.subscribe( .subscribe(
superBlocks => { superBlocks => {
const view = showAside ? 'map/showAside' : 'map/show'; res.render('map/show', {
res.render(view, {
superBlocks, superBlocks,
title: 'A Map to Learn to Code and Become a Software Engineer' title: 'A Map to Learn to Code and Become a Software Engineer',
showAside
}); });
}, },
next next

View File

@ -177,39 +177,33 @@ block content
a(href='/challenges/' + challenge.name + '?solution=' + encodeURIComponent(encodeFcc(challenge.solution)), target='_blank')= challenge.name a(href='/challenges/' + challenge.name + '?solution=' + encodeURIComponent(encodeFcc(challenge.solution)), target='_blank')= challenge.name
else else
a(href='/challenges/' + challenge.name)= challenge.name a(href='/challenges/' + challenge.name)= challenge.name
if (user && user.username === username) if (user && user.username === username)
.panel.panel-info h1.text-center Manage your account
.panel-heading.text-center Manage your account hr
.panel-body
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-warning.btn-link-social(href='/logout') a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/logout')
span.ion-android-exit
| Sign me out of Free Code Camp | Sign me out of Free Code Camp
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='mailto:team@freecodecamp.com') a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='mailto:team@freecodecamp.com')
span.ion-email
| Email us at team@freecodecamp.com | Email us at team@freecodecamp.com
if (!user.isLocked) if (!user.isLocked)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-info.btn-link-social(href='/toggle-lockdown-mode') a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/toggle-lockdown-mode')
span.ion-locked
| Hide all my solutions from other people | Hide all my solutions from other people
br br
| (this will disable your certificates) | (this will disable your certificates)
else else
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-info.btn-link-social(href='/toggle-lockdown-mode') a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/toggle-lockdown-mode')
span.ion-unlocked
| Let other people see all my solutions | Let other people see all my solutions
br br
| (this will enable your certificates) | (this will enable your certificates)
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-success.btn-link-social(href='/commit') a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/commit')
span.ion-edit
| Edit my pledge | Edit my pledge
.col-xs-12 .col-xs-12
a.btn.btn-lg.btn-block.btn-danger.btn-link-social.confirm-deletion a.btn.btn-lg.btn-block.btn-danger.btn-link-social.confirm-deletion
span.ion-trash-b
| Delete my Free Code Camp account | Delete my Free Code Camp account
script. script.
$('.confirm-deletion').on("click", function () { $('.confirm-deletion').on("click", function () {
@ -229,11 +223,10 @@ block content
| . | .
.modal-footer .modal-footer
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true') a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
span.ion-happy
| Nevermind, I don't want to delete all of my progress | Nevermind, I don't want to delete all of my progress
.spacer .spacer
form(action='/account/delete', method='POST') form(action='/account/delete', method='POST')
input(type='hidden', name='_csrf', value=_csrf) input(type='hidden', name='_csrf', value=_csrf)
button.btn.btn-danger.btn-block(type='submit') button.btn.btn-danger.btn-block(type='submit')
span.ion-trash-b
| I am 100% sure I want to delete my account and all of my progress | I am 100% sure I want to delete my account and all of my progress
>>>>>>> refactor map view and make buttons and text bigger

View File

@ -31,18 +31,14 @@ block content
.button-spacer .button-spacer
if (user) if (user)
label.negative-10.btn.btn-primary.btn-block.btn-lg#submitButton label.negative-10.btn.btn-primary.btn-block.btn-lg#submitButton
i.fa.fa-play | Run tests (ctrl + enter)
|   Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost#trigger-reset-modal label.btn.btn-primary.btn-primary-ghost#trigger-reset-modal
i.fa.fa-refresh
|   Reset |   Reset
label.btn.btn-primary.btn-primary-ghost#challenge-help-btn label.btn.btn-primary.btn-primary-ghost#challenge-help-btn
i.fa.fa-medkit
|   Help |   Help
label.btn.btn-primary.btn-primary-ghost#trigger-issue-modal label.btn.btn-primary.btn-primary-ghost#trigger-issue-modal
i.fa.fa-bug
|   Bug |   Bug
if (!user) if (!user)
.button-spacer .button-spacer

View File

@ -10,34 +10,25 @@ block content
.innerMarginFix(style = "width: 99%;") .innerMarginFix(style = "width: 99%;")
.row .row
.col-xs-12 .col-xs-12
h3.text-center.negative-10= name h3.text-center= name
if (isCompleted) if (isCompleted)
|   |  
i.ion-checkmark-circled.text-primary(title="Completed") i.ion-checkmark-circled.text-primary(title="Completed")
hr hr
.bonfire-instructions .bonfire-instructions
for sentence in description for sentence in description
p.wrappable.negative-10!= sentence p.wrappable!= sentence
.negative-bottom-margin-30 .negative-bottom-margin-30
.button-spacer .button-spacer
label.negative-10.btn.btn-primary.btn-lg.btn-block#submitButton .btn-big.btn.btn-primary.btn-block#submitButton
i.fa.fa-play | Run tests (ctrl + enter)
|   Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-primary.btn-primary-ghost#trigger-reset-modal label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
i.fa.fa-refresh
|   Reset
label.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg label.btn.btn-primary.btn-primary-ghost.hidden-sm.hidden-md.hidden-lg
a(href='//gitter.im/freecodecamp/help') a(href='//gitter.im/freecodecamp/help') Help
i.fa.fa-medkit label.btn.btn-primary.btn-primary-ghost.hidden-xs.btn-lg#challenge-help-btn Help
|   Help label.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug
label.btn.btn-primary.btn-primary-ghost.hidden-xs#challenge-help-btn
i.fa.fa-medkit
|   Help
label.btn.btn-primary.btn-primary-ghost#trigger-issue-modal
i.fa.fa-bug
|   Bug
script. script.
var userLoggedIn = true; var userLoggedIn = true;
if (!user) if (!user)

View File

@ -9,7 +9,7 @@ block content
.scroll-locker(id = "scroll-locker") .scroll-locker(id = "scroll-locker")
.innerMarginFix(style = "width: 99%;") .innerMarginFix(style = "width: 99%;")
#testCreatePanel #testCreatePanel
h3.text-center.negative-10= name h3.text-center= name
if (isCompleted) if (isCompleted)
|   |  
i.ion-checkmark-circled.text-primary(title="Completed") i.ion-checkmark-circled.text-primary(title="Completed")
@ -21,34 +21,25 @@ block content
if (/blockquote|h4|table/.test(sentence)) if (/blockquote|h4|table/.test(sentence))
!=sentence !=sentence
else else
p.wrappable.negative-10!= sentence p.wrappable!= sentence
if (MDNlinks.length) if (MDNlinks.length)
.negative-bottom-margin-30 .negative-bottom-margin-30
#MDN-links #MDN-links
p.negative-10 Here are some helpful links: p Here are some helpful links:
for link, index in MDNlinks for link, index in MDNlinks
.negative-10
ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]} ul: li: a(href="" + link, target="_blank") !{MDNkeys[index]}
.button-spacer .button-spacer
if (user) if (user)
form.form-horizontal(novalidate='novalidate', name='completedWithForm') form.form-horizontal(novalidate='novalidate', name='completedWithForm')
.form-group.text-center.negative-10 .form-group.text-center
.col-xs-12 .col-xs-12
// extra field to distract password tools like lastpass from injecting css into our username field // extra field to distract password tools like lastpass from injecting css into our username field
label.negative-10.btn.btn-primary.btn-lg.btn-block#submitButton label.btn.btn-primary.btn-big.btn-block#submitButton Run tests (ctrl + enter)
i.fa.fa-play
|   Run tests (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
label.btn.btn-success#trigger-reset-modal label.btn.btn-primary.btn-lg#trigger-reset-modal Reset
i.fa.fa-refresh label.btn.btn-primary.btn-lg#challenge-help-btn Help
|   Reset label.btn.btn-primary.btn-lg#trigger-issue-modal Bug
label.btn.btn-success#challenge-help-btn
i.fa.fa-medkit
|   Help
label.btn.btn-success#trigger-issue-modal
i.fa.fa-bug
|   Bug
if (!user) if (!user)
.button-spacer .button-spacer
a.btn.signup-btn.btn-block.btn-block(href='/login') Sign in so you can save your progress a.btn.signup-btn.btn-block.btn-block(href='/login') Sign in so you can save your progress
@ -59,7 +50,7 @@ block content
.form-group.codeMirrorView .form-group.codeMirrorView
textarea#codeOutput(style='display: none;') textarea#codeOutput(style='display: none;')
br br
#testSuite.negative-10 #testSuite
br br
.col-md-8.col-lg-9 .col-md-8.col-lg-9
.editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;") .editorScrollDiv(style = "overflow-y: auto; overflow-x: hidden;")

View File

@ -22,6 +22,7 @@ block content
else else
.btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-next(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step .btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-next(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step
.clearfix .clearfix
.spacer
#challenge-step-modal.modal(tabindex='-1') #challenge-step-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeIn.fast-animation .modal-dialog.animated.fadeIn.fast-animation
.modal-content .modal-content

View File

View File

@ -24,12 +24,8 @@ block content
var userLoggedIn = true; var userLoggedIn = true;
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
.btn.btn-success.btn-big#challenge-help-btn .btn.btn-success.btn-big#challenge-help-btn Get help
i.fa.fa-medkit .btn.btn-success.btn-big#trigger-issue-modal Report a bug
|   Get help
.btn.btn-success.btn-big#trigger-issue-modal
i.fa.fa-bug
|   Report a bug
if (!user) if (!user)
.button-spacer .button-spacer
a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress

View File

@ -24,12 +24,8 @@ block content
a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + id) Go to my next challenge (ctrl + enter) a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + id) Go to my next challenge (ctrl + enter)
.button-spacer .button-spacer
.btn-group.input-group.btn-group-justified .btn-group.input-group.btn-group-justified
.btn.btn-primary.btn-primary-ghost.btn-big#challenge-help-btn .btn.btn-primary.btn-primary-ghost.btn-big#challenge-help-btn Help
i.fa.fa-medkit .btn.btn-primary.btn-primary-ghost.btn-big#trigger-issue-modal Bug
|   Help
.btn.btn-primary.btn-primary-ghost.btn-big#trigger-issue-modal
i.fa.fa-bug
|   Bug
if (!user) if (!user)
.button-spacer .button-spacer
a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress a.btn.btn-big.signup-btn.btn-block(href='/login') Sign in so you can save your progress

View File

@ -1,8 +0,0 @@
doctype html
html(lang='en')
head
include partials/meta
include partials/stylesheets
body.map-aside-body
include partials/scripts
block content

View File

@ -3,6 +3,11 @@ html(lang='en')
head head
include partials/meta include partials/meta
include partials/stylesheets include partials/stylesheets
if showAside
body.map-aside-body
include partials/scripts
block content
else
body.no-top-and-bottom-margins.full-screen-body-background body.no-top-and-bottom-margins.full-screen-body-background
include partials/scripts include partials/scripts
include partials/navbar include partials/navbar

View File

@ -1,114 +1,29 @@
extends ../layout-wide extends ../layout-wide
block content block content
.row
.col-xs-12.col-md-6.col-md-offset-3
ul
for superBlock in superBlocks
h2= superBlock.name
for challengeBlock in superBlock.blocks
.row
if (user)
.col-xs-11.col-sm-8.col-md-9
li.map-p.negative-10
|   
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
if challengeBlock.markNew
span.text-info.small    
strong
em NEW
if challengeBlock.isComingSoon
span.text-info.small    
strong
em Coming Soon
else
.hidden-xs.col-sm-3.col-md-2
.col-xs-10.col-sm-8.col-md-9
span.map-p.negative-10
a(href='#' + challengeBlock.dashedName)= challengeBlock.name
if challengeBlock.markNew
span.text-info.small    
strong
em NEW
if challengeBlock.isComingSoon
span.text-info.small    
strong
em Coming Soon
h2 Full Stack Development Certification
.row
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Greenfield Nonprofit Project 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Greenfield Nonprofit Project 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Legacy Nonprofit Project 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Legacy Nonprofit Project 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Claim your Full Stack Development Certification
h2 Coding Interview Preparation
.row
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Whiteboard Coding Interview Training
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Critical Thinking Interview Training
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 1
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 2
.col-xs-12.col-sm-9.col-md-10
li.map-p.negative-10
|   
span.ion-locked.padded-ionic-icon
| Mock Interview 3
hr
.row .row
.col-xs-12.col-md-6.col-md-offset-3 .col-xs-12.col-md-6.col-md-offset-3
for superBlock, index in superBlocks 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 for challengeBlock in superBlock.blocks
.row .row
a(href='#' name=challengeBlock.dashedName) a(href='#' name=challengeBlock.dashedName)
.spacer.negative-55 .spacer.negative-55
.row .row
h4.bold #{challengeBlock.name} (#{challengeBlock.time}) h3.bold #{challengeBlock.name} (#{challengeBlock.time})
for challenge in challengeBlock.challenges for challenge in challengeBlock.challenges
.col-xs-12.col-sm-9.col-md-10 .col-xs-12.col-sm-9.col-md-10
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(href="/challenges/#{challenge.dashedName}") a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title = challenge.title
span.sr-only= " Complete" span.sr-only= " Complete"
else if (challenge.type === "bonfire") else if challenge.isRequired
p.ion-asterisk.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}" 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
@ -119,9 +34,11 @@ block content
span.text-success.small     span.text-success.small    
strong strong
em Coming Soon em Coming Soon
span.text-primary    
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}" 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
@ -132,22 +49,21 @@ block content
span.text-success.small     span.text-success.small    
strong strong
em Coming Soon em Coming Soon
if (index < superBlocks.length) .row
h2.text-center Full Stack Development Certification
hr hr
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Greenfield Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Greenfield Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Legacy Nonprofit Project 1
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Legacy Nonprofit Project 2
p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Claim your Full Stack Development Certification
script. .row
var username = !{JSON.stringify(user && user.username || '')}; h2.text-center Coding Interview Preparation
var lastCompleted = !{JSON.stringify(lastCompleted || false)} hr
$(document).ready(function () { p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Whiteboard Coding Interview Training
if (!localStorage || !localStorage.hideRedditNotice) { p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Critical Thinking Interview Training
$("#map-notice").removeClass("hidden"); p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 1
} p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 2
$("#hide-map-notice-button").on("click", function(e) { p.ion-locked.padded-ionic-icon.negative-15 &nbsp; Mock Interview 3
e.preventDefault(); .spacer
$("#map-notice").addClass('animated fadeOut');
setTimeout(function() {
$("#map-notice").hide();
}, 1000);
localStorage.hideRedditNotice = "true";
});
});

View File

@ -1,47 +0,0 @@
extends ../layout-map-aside
block content
.row
.col-xs-12.col-md-6.col-md-offset-3
for superBlock, index in superBlocks
for challengeBlock in superBlock.blocks
.row
a(href='#' name=challengeBlock.dashedName)
.spacer.negative-55
.row
h4.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}") &nbsp;
a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title
span.sr-only= " Complete"
else if (challenge.type === "bonfire")
p.ion-asterisk.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
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 &thinsp; &thinsp;
strong
em New
if challengeBlock.isComingSoon
span.text-success.small &thinsp; &thinsp;
strong
em Coming Soon
else
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}") &nbsp;
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 &thinsp; &thinsp;
strong
em New
if challengeBlock.isComingSoon
span.text-success.small &thinsp; &thinsp;
strong
em Coming Soon
if (index < superBlocks.length)
hr