From ab83f6d5fa6ec2ea143b807b8ecb40fbe7c889d0 Mon Sep 17 00:00:00 2001 From: Arsen Melikyan Date: Sat, 31 Oct 2015 17:24:05 +0400 Subject: [PATCH 1/2] adds back button for step challenges --- client/commonFramework.js | 48 +++++++++++++++++++++++++- server/views/coursewares/showStep.jade | 4 +++ 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/client/commonFramework.js b/client/commonFramework.js index 2505fe08f4..39a40923b9 100644 --- a/client/commonFramework.js +++ b/client/commonFramework.js @@ -892,12 +892,32 @@ var runTests = function(err, data) { // step challenge common.init.push((function() { var stepClass = '.challenge-step'; + var prevBtnClass = '.challenge-step-btn-prev'; var nextBtnClass = '.challenge-step-btn-next'; var actionBtnClass = '.challenge-step-btn-action'; var finishBtnClass = '.challenge-step-btn-finish'; var submitBtnId = '#challenge-step-btn-submit'; var submitModalId = '#challenge-step-modal'; + function getPreviousStep($challengeSteps) { + var length = $challengeSteps.length; + var $prevStep = false; + var prevStepIndex = 0; + $challengeSteps.each(function(index) { + var $step = $(this); + if ( + !$step.hasClass('hidden') && + index + 1 !== length + ) { + prevStepIndex = index - 1; + } + }); + + $prevStep = $challengeSteps[prevStepIndex]; + + return $prevStep; + } + function getNextStep($challengeSteps) { var length = $challengeSteps.length; var $nextStep = false; @@ -917,11 +937,36 @@ common.init.push((function() { return $nextStep; } + function handlePrevStepClick(e) { + e.preventDefault(); + var prevStep = getPreviousStep($(stepClass)); + $(this) + .parent() + .removeClass('fadeOutLeft') + .addClass('animated fadeOutRight fast-animation') + .delay(250) + .queue(function(prev) { + $(this).addClass('hidden'); + if (prevStep) { + $(prevStep) + .removeClass('hidden') + .removeClass('slideInRight') + .addClass('animated slideInLeft fast-animation') + .delay(500) + .queue(function(prev) { + prev(); + }); + } + prev(); + }); + } + function handleNextStepClick(e) { e.preventDefault(); var nextStep = getNextStep($(stepClass)); $(this) .parent() + .removeClass('fadeOutRight') .addClass('animated fadeOutLeft fast-animation') .delay(250) .queue(function(next) { @@ -929,10 +974,10 @@ common.init.push((function() { if (nextStep) { $(nextStep) .removeClass('hidden') + .removeClass('slideInLeft') .addClass('animated slideInRight fast-animation') .delay(500) .queue(function(next) { - $(this).removeClass('slideInRight'); next(); }); } @@ -1035,6 +1080,7 @@ common.init.push((function() { } return function($) { + $(prevBtnClass).click(handlePrevStepClick); $(nextBtnClass).click(handleNextStepClick); $(actionBtnClass).click(handleActionClick); $(finishBtnClass).click(handleFinishClick); diff --git a/server/views/coursewares/showStep.jade b/server/views/coursewares/showStep.jade index 74bb6705f5..16e4777c54 100644 --- a/server/views/coursewares/showStep.jade +++ b/server/views/coursewares/showStep.jade @@ -10,8 +10,12 @@ block content p.large-p!= step[2] if step[3] a.btn.btn-block.btn-primary.challenge-step-btn-action(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab + .button-spacer if index + 1 === description.length .btn.btn-block.btn-primary.challenge-step-btn-finish(id='last' class=step[3] ? 'disabled' : '') Finish challenge + else if index !== 0 + .col-xs-12.col-md-6.col-lg-6.btn.btn-danger.challenge-step-btn-prev(id='#{index - 1}' class=step[3] ? 'disabled' : '') Go to my previous step + .col-xs-12.col-md-6.col-lg-6.btn.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step else .btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step #challenge-step-modal.modal(tabindex='-1') From f7530701ca31a40175ea054d2fd28372a9468506 Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Sat, 31 Oct 2015 22:48:42 -0700 Subject: [PATCH 2/2] Change step challenge button layout --- client/less/main.less | 12 ++++++++++++ server/views/coursewares/showStep.jade | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index 31da81da7e..f5c23c4e48 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -689,6 +689,18 @@ iframe.iphone { transition: background .2s ease-in-out, border .2s ease-in-out; } +.btn-warning-ghost { + background: transparent; + color: @brand-warning; + + /* CSS Transition */ + -webkit-transition: background .2s ease-in-out, border .2s ease-in-out; + -moz-transition: background .2s ease-in-out, border .2s ease-in-out; + -ms-transition: background .2s ease-in-out, border .2s ease-in-out; + -o-transition: background .2s ease-in-out, border .2s ease-in-out; + transition: background .2s ease-in-out, border .2s ease-in-out; +} + .population-table { @media (max-width: 767px) { font-size: 16px; diff --git a/server/views/coursewares/showStep.jade b/server/views/coursewares/showStep.jade index 16e4777c54..b87811cb80 100644 --- a/server/views/coursewares/showStep.jade +++ b/server/views/coursewares/showStep.jade @@ -14,8 +14,8 @@ block content if index + 1 === description.length .btn.btn-block.btn-primary.challenge-step-btn-finish(id='last' class=step[3] ? 'disabled' : '') Finish challenge else if index !== 0 - .col-xs-12.col-md-6.col-lg-6.btn.btn-danger.challenge-step-btn-prev(id='#{index - 1}' class=step[3] ? 'disabled' : '') Go to my previous step - .col-xs-12.col-md-6.col-lg-6.btn.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step + .btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step + .btn.btn-block.btn-warning-ghost.challenge-step-btn-prev(id='#{index - 1}') Go to my previous step else .btn.btn-block.btn-primary.challenge-step-btn-next(id='#{index}' class=step[3] ? 'disabled' : '') Go to my next step #challenge-step-modal.modal(tabindex='-1')