From 39f636ae91f2df947d897a655227809b9c906141 Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Wed, 26 Aug 2015 15:17:19 -0700 Subject: [PATCH] add loader to challenge submit --- public/css/main.less | 101 ++++++++++++++++++ .../lib/coursewares/commonFrameWork_0.0.7.js | 16 ++- server/views/coursewares/showBonfire.jade | 23 ++-- server/views/coursewares/showHTML.jade | 15 +-- server/views/coursewares/showJS.jade | 23 ++-- 5 files changed, 151 insertions(+), 27 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index 45cd2daed4..814e99cb54 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -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); + } +} diff --git a/public/js/lib/coursewares/commonFrameWork_0.0.7.js b/public/js/lib/coursewares/commonFrameWork_0.0.7.js index 8b0f257010..b712a9cb35 100644 --- a/public/js/lib/coursewares/commonFrameWork_0.0.7.js +++ b/public/js/lib/coursewares/commonFrameWork_0.0.7.js @@ -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( + '
submitting...
' + ); + next(); + }); + $.post( '/completed-bonfire/', { challengeInfo: { diff --git a/server/views/coursewares/showBonfire.jade b/server/views/coursewares/showBonfire.jade index 9c164b7269..ce78fb8ea5 100644 --- a/server/views/coursewares/showBonfire.jade +++ b/server/views/coursewares/showBonfire.jade @@ -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   - = 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   + = 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 diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 4a0e69a4dc..94399ce677 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -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 diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade index 4a3a6671dd..34bf4fa3b4 100644 --- a/server/views/coursewares/showJS.jade +++ b/server/views/coursewares/showJS.jade @@ -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   - = 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   + = 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)};