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

add loader to challenge submit

Browse Source
This commit is contained in:
Berkeley Martinez
2015-08-26 15:17:19 -07:00
parent e7a539704b
commit 39f636ae91
5 changed files with 151 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
public/css/main.less
View File

@ -1177,3 +1177,104 @@ hr {
// border-width: 1px;
// border-style: solid;
//}
// source: https://github.com/jlong/css-spinners/blob/master/css/spinner/inner-circles.css
// license MIT
/* :not(:required) hides this rule from IE9 and below */
.inner-circles-loader:not(:required) {
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: relative;
display: inline-block;
width: 125px;
height: 125px;
background: rgba(25, 165, 152, 0.5);
border-radius: 50%;
overflow: hidden;
text-indent: -9999px;
margin-top: 10%;
/* Hides inner circles outside base circle at safari */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after {
content: '';
position: absolute;
top: 0;
display: inline-block;
width: 125px;
height: 125px;
border-radius: 50%;
}
.inner-circles-loader:not(:required):before {
-moz-animation: inner-circles-loader 3s infinite;
-webkit-animation: inner-circles-loader 3s infinite;
animation: inner-circles-loader 3s infinite;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
left: 0;
background: #c7efcf;
}
.inner-circles-loader:not(:required):after {
-moz-animation: inner-circles-loader 3s 0.2s reverse infinite;
-webkit-animation: inner-circles-loader 3s 0.2s reverse infinite;
animation: inner-circles-loader 3s 0.2s reverse infinite;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
right: 0;
background: #eef5db;
}
@-moz-keyframes inner-circles-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes inner-circles-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes inner-circles-loader {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

16
public/js/lib/coursewares/commonFrameWork_0.0.7.js
View File

@ -273,13 +273,27 @@ function showCompletion() {
var didCompleteWith = $('#completed-with').val() || null;
$('#complete-courseware-dialog').modal('show');
$('#submit-challenge').click(function(e) {
e.preventDefault();
$('#submit-challenge')
.attr('disabled', 'true')
.removeClass('btn-primary')
.addClass('btn-warning disabled');
e.preventDefault();
var $checkmarkContainer = $('#checkmark-container');
$checkmarkContainer.css({ height: $checkmarkContainer.innerHeight() });
$('#challenge-checkmark')
.addClass('zoomOutUp')
// .removeClass('zoomInDown')
.delay(1000)
.queue(function(next) {
$(this).replaceWith(
'<div id="challenge-spinner" class="animated zoomInUp inner-circles-loader">submitting...</div>'
);
next();
});
$.post(
'/completed-bonfire/', {
challengeInfo: {

23
server/views/coursewares/showBonfire.jade
View File

@ -135,17 +135,20 @@ block content
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body
.text-center
.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
if (user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
#checkmark-container.row
#challenge-checkmark.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
.spacer
.row
if (user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
if (user.progressTimestamps.length > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
i.fa.fa-twitter &thinsp;
= phrase
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
if (user.progressTimestamps.length > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
i.fa.fa-twitter &thinsp;
= phrase
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
#reset-modal.modal(tabindex='-1')
.modal-dialog.animated.fadeInUp.fast-animation
.modal-content

15
server/views/coursewares/showHTML.jade
View File

@ -88,10 +88,13 @@ block content
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body
.text-center
.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
if(user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
#checkmark-container.row
#challenge-checkmark.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
.spacer
.row
if(user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
include ../partials/challenge-modals

23
server/views/coursewares/showJS.jade
View File

@ -82,16 +82,19 @@ block content
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
.modal-body
.text-center
.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
if (user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
if (user.progressTimestamps.length > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
i.fa.fa-twitter &thinsp;
= phrase
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
#checkmark-container.row
#challenge-checkmark.animated.zoomInDown.delay-half
span.completion-icon.ion-checkmark-circled.text-primary
.spacer
.row
if (user)
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit
if (user.progressTimestamps.length > 2)
a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(target="_blank", href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{dashedName}&hashtags=LearnToCode, JavaScript")
i.fa.fa-twitter &thinsp;
= phrase
else
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
include ../partials/challenge-modals
script.
var MDNlinks = !{JSON.stringify(MDNlinks)};