turned the challenges list into a modal
This commit is contained in:
@ -29,7 +29,7 @@ html {
|
||||
|
||||
body {
|
||||
padding-top: 80px;
|
||||
margin-bottom: 75px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
@ -31,8 +31,8 @@ $(document).ready(function() {
|
||||
});
|
||||
});
|
||||
|
||||
$('.skip-challenge').on('click', function() {
|
||||
$('#skip-dialog').modal('show');
|
||||
$('.all-challenges').on('click', function() {
|
||||
$('#all-challenges-dialog').modal('show');
|
||||
});
|
||||
|
||||
$('.next-button').on('click', function() {
|
||||
|
@ -1,21 +1,22 @@
|
||||
extends ../layout
|
||||
block content
|
||||
.row
|
||||
.col-sm-12.col-md-8.col-xs-12
|
||||
.col-sm-12.col-md-12.col-xs-12
|
||||
.panel.panel-primary
|
||||
.panel-heading #{name} (takes #{time} minutes)
|
||||
.panel-heading.text-center #{name} (takes #{time} minutes)
|
||||
.panel.panel-body
|
||||
.embed-responsive.embed-responsive-16by9
|
||||
iframe.embed-responsive-item(src='//player.vimeo.com/video/#{video}')
|
||||
h3 Steps:
|
||||
h4
|
||||
ol
|
||||
for step in steps
|
||||
li!= step
|
||||
.btn.btn-primary.btn-big.btn-block.completed-challenge I've completed this challenge
|
||||
.ten-pixel-break
|
||||
.btn.btn-success.btn-large.btn-block.skip-challenge I want to skip this challenge for now
|
||||
#complete-dialog.modal
|
||||
.col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
|
||||
h3 Steps:
|
||||
h4
|
||||
ol
|
||||
for step in steps
|
||||
li!= step
|
||||
.btn.btn-primary.btn-big.btn-block.completed-challenge I've completed this challenge
|
||||
.ten-pixel-break
|
||||
.btn.btn-success.btn-big.btn-block.all-challenges Show me all the challenges
|
||||
#complete-dialog.modal(tabindex='-1')
|
||||
.modal-dialog.animated.zoomIn.fast-animation
|
||||
.modal-content
|
||||
.modal-header
|
||||
@ -32,16 +33,9 @@ block content
|
||||
= phrase
|
||||
- else
|
||||
a.animated.fadeIn.delay-2.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
|
||||
#skip-dialog.modal
|
||||
#all-challenges-dialog.modal(tabindex='-1')
|
||||
.modal-dialog.animated.zoomIn.fast-animation
|
||||
.modal-content
|
||||
.modal-header
|
||||
a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
|
||||
.text-center
|
||||
h1.animated.zoomInDown No problem.
|
||||
h2.animated.zoomInDown You can retry this challenge any time.
|
||||
.animated.zoomInUp.delay-1
|
||||
span.landing-icon.ion-skip-forward.text-success
|
||||
a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
|
||||
.col-sm-12.col-md-4.col-xs-12
|
||||
include ../partials/challenges
|
||||
include ../partials/challenges
|
@ -1,10 +1,7 @@
|
||||
.panel.panel-primary
|
||||
.panel-heading Challenges
|
||||
.panel-body
|
||||
ol(start='0')
|
||||
for challenge in challenges
|
||||
li
|
||||
a(href="/challenges/#{challenge.challengeNumber}", class="#{ (cc && cc[challenge.challengeNumber] > 0) ? 'strikethrough' : '' }") #{challenge.name}
|
||||
| (#{challenge.time} mins)
|
||||
ol(start='0')
|
||||
for challenge in challenges
|
||||
li
|
||||
a(href="/challenges/#{challenge.challengeNumber}", class="#{ (cc && cc[challenge.challengeNumber] > 0) ? 'strikethrough' : '' }") #{challenge.name}
|
||||
| (#{challenge.time} mins)
|
||||
|
||||
a.btn.btn-primary(href="/done-with-first-100-hours", class="#{ ((cc && cc[53] === 0) || (!cc)) ? 'disabled' : '' }") I've finished all Free Code Camp challenges and all the Easy and Medium CoderByte Challenges
|
||||
a.btn.btn-primary(href="/done-with-first-100-hours", class="#{ ((cc && cc[53] === 0) || (!cc)) ? 'disabled' : '' }") I've finished all Free Code Camp challenges and all the Easy and Medium CoderByte Challenges
|
Reference in New Issue
Block a user