From d64b5c571863918551953a214417d8e17e483fcf Mon Sep 17 00:00:00 2001 From: Michael Q Larson Date: Wed, 25 Mar 2015 15:25:19 -0700 Subject: [PATCH] add progress bar to nonprofit project proposal wizard --- app.js | 5 +- controllers/nonprofits.js | 56 ++++++++++++------- ...already-benefiting-from-your-services.jade | 2 +- .../are-you-with-a-registered-nonprofit.jade | 18 +++--- .../how-can-free-code-camp-help-you.jade | 2 +- views/nonprofits/in-exchange-we-ask.jade | 2 +- views/nonprofits/link-us-to-your-website.jade | 2 +- views/nonprofits/ok-with-javascript.jade | 6 +- views/nonprofits/tell-us-your-email.jade | 12 ++++ .../tell-us-your-name-and-email.jade | 0 views/nonprofits/tell-us-your-name.jade | 12 ++++ .../what-does-your-nonprofit-do.jade | 2 +- ...roject-application-has-been-submitted.jade | 10 ++-- .../nonprofit-application-progress-bar.jade | 6 ++ 14 files changed, 90 insertions(+), 45 deletions(-) create mode 100644 views/nonprofits/tell-us-your-email.jade delete mode 100644 views/nonprofits/tell-us-your-name-and-email.jade create mode 100644 views/nonprofits/tell-us-your-name.jade create mode 100644 views/partials/nonprofit-application-progress-bar.jade diff --git a/app.js b/app.js index def618a07c..65c8218c65 100644 --- a/app.js +++ b/app.js @@ -15,7 +15,7 @@ process.on('uncaughtException', function (err) { }); var express = require('express'), - accepts = require('accepts'), + //accepts = require('accepts'), cookieParser = require('cookie-parser'), compress = require('compression'), session = require('express-session'), @@ -284,7 +284,8 @@ app.get('/nonprofits/ok-with-javascript', nonprofitController.okWithJavaScript); app.get('/nonprofits/other-solutions', nonprofitController.otherSolutions); app.get('/nonprofits/what-does-your-nonprofit-do', nonprofitController.whatDoesYourNonprofitDo); app.get('/nonprofits/link-us-to-your-website', nonprofitController.linkUsToYourWebsite); -app.get('/nonprofits/tell-us-your-name-and-email', nonprofitController.tellUsYourNameAndEmail); +app.get('/nonprofits/tell-us-your-name', nonprofitController.tellUsYourName); +app.get('/nonprofits/tell-us-your-email', nonprofitController.tellUsYourEmail); app.get('/nonprofits/your-nonprofit-project-application-has-been-submitted', nonprofitController.yourNonprofitProjectApplicationHasBeenSubmitted); app.get( diff --git a/controllers/nonprofits.js b/controllers/nonprofits.js index 8ea6a0f295..144c5258ef 100644 --- a/controllers/nonprofits.js +++ b/controllers/nonprofits.js @@ -22,55 +22,65 @@ exports.nonprofitsHome = function(req, res) { exports.areYouWithARegisteredNonprofit = function(req, res) { res.render('nonprofits/are-you-with-a-registered-nonprofit', { - title: 'Are you with a with a registered nonprofit' + title: 'Are you with a with a registered nonprofit', + step: 1 }); }; exports.howCanFreeCodeCampHelpYou = function(req, res) { res.render('nonprofits/how-can-free-code-camp-help-you', { - title: 'Are you with a with a registered nonprofit' + title: 'Are you with a with a registered nonprofit', + step: 2 }); }; -exports.otherSolutions = function(req, res) { - res.render('nonprofits/other-solutions', { - title: 'Here are some other possible solutions for you' - }); -}; exports.areTherePeopleThatAreAlreadyBenefitingFromYourServices = function(req, res) { res.render('nonprofits/are-there-people-that-are-already-benefiting-from-your-services', { - title: 'Are there people already benefiting from your services' - }); -}; - -exports.inExchangeWeAsk = function(req, res) { - res.render('nonprofits/in-exchange-we-ask', { - title: 'In exchange we ask that you ...' + title: 'Are there people already benefiting from your services', + step: 3 }); }; exports.okWithJavaScript = function(req, res) { res.render('nonprofits/ok-with-javascript', { - title: 'Are you OK with us using JavaScript' + title: 'Are you OK with us using JavaScript', + step: 4 + }); +}; + +exports.inExchangeWeAsk = function(req, res) { + res.render('nonprofits/in-exchange-we-ask', { + title: 'In exchange we ask that you ...', + step: 5 }); }; exports.whatDoesYourNonprofitDo = function(req, res) { res.render('nonprofits/what-does-your-nonprofit-do', { - title: 'What does your nonprofit do?' + title: 'What does your nonprofit do?', + step: 6 }); }; exports.linkUsToYourWebsite = function(req, res) { res.render('nonprofits/link-us-to-your-website', { - title: 'Link us to your website' + title: 'Link us to your website', + step: 7 }); }; -exports.tellUsYourNameAndEmail = function(req, res) { - res.render('nonprofits/tell-us-your-name-and-email', { - title: 'Tell us your name and email address' +exports.tellUsYourEmail = function(req, res) { + res.render('nonprofits/tell-us-your-email', { + title: 'Tell us your name', + step: 8 + }); +}; + +exports.tellUsYourName = function(req, res) { + res.render('nonprofits/tell-us-your-name', { + title: 'Tell us your name', + step: 9 }); }; @@ -79,3 +89,9 @@ exports.yourNonprofitProjectApplicationHasBeenSubmitted = function(req, res) { title: 'Your Nonprofit Project application has been submitted!' }); }; + +exports.otherSolutions = function(req, res) { + res.render('nonprofits/other-solutions', { + title: 'Here are some other possible solutions for you' + }); +}; diff --git a/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade b/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade index e9e18c1b3b..5f82c3c82b 100644 --- a/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade +++ b/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade @@ -2,7 +2,7 @@ extends ../layout block content .jumbotron.text-center h1.hug-top Nonprofit Sign Up - .spacer + include ../partials/nonprofit-application-progress-bar h2 We build solutions for nonprofits who are already serving a need. Are there people who already benefit from your services? .spacer .row diff --git a/views/nonprofits/are-you-with-a-registered-nonprofit.jade b/views/nonprofits/are-you-with-a-registered-nonprofit.jade index ce778cec2a..c901d7dbbb 100644 --- a/views/nonprofits/are-you-with-a-registered-nonprofit.jade +++ b/views/nonprofits/are-you-with-a-registered-nonprofit.jade @@ -1,12 +1,12 @@ extends ../layout block content .jumbotron.text-center - h1.hug-top Nonprofit Sign Up - .spacer - h2 Do you represent a nonprofit organization that is registered with your government? - .spacer - .row - .col-xs-6 - a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/how-can-free-code-camp-help-you') Yes - .col-xs-6 - a.btn.btn-warning.btn-big.btn-block(href='/nonprofits/other-solutions') No \ No newline at end of file + h1.hug-top Nonprofit Sign Up + include ../partials/nonprofit-application-progress-bar + h2 Do you represent a nonprofit organization that is registered with your government? + .spacer + .row + .col-xs-6 + a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/how-can-free-code-camp-help-you') Yes + .col-xs-6 + a.btn.btn-warning.btn-big.btn-block(href='/nonprofits/other-solutions') No \ No newline at end of file diff --git a/views/nonprofits/how-can-free-code-camp-help-you.jade b/views/nonprofits/how-can-free-code-camp-help-you.jade index deb2ad8f77..4c0dab17b4 100644 --- a/views/nonprofits/how-can-free-code-camp-help-you.jade +++ b/views/nonprofits/how-can-free-code-camp-help-you.jade @@ -2,7 +2,7 @@ extends ../layout block content .jumbotron.text-center h1.hug-top Nonprofit Sign Up - .spacer + include ../partials/nonprofit-application-progress-bar h2 How can Free Code Camp help you? .spacer .row.text-center.negative-35 diff --git a/views/nonprofits/in-exchange-we-ask.jade b/views/nonprofits/in-exchange-we-ask.jade index 87e6a90181..beb4b20da5 100644 --- a/views/nonprofits/in-exchange-we-ask.jade +++ b/views/nonprofits/in-exchange-we-ask.jade @@ -2,7 +2,7 @@ extends ../layout block content .jumbotron h1.hug-top.text-center Nonprofit Sign Up - .spacer + include ../partials/nonprofit-application-progress-bar h2 Great! In exchange for our help, we ask only that you: h3 ol diff --git a/views/nonprofits/link-us-to-your-website.jade b/views/nonprofits/link-us-to-your-website.jade index 481f527141..720aa6f338 100644 --- a/views/nonprofits/link-us-to-your-website.jade +++ b/views/nonprofits/link-us-to-your-website.jade @@ -1,6 +1,6 @@ .jumbotron.text-center h1.hug-top Nonprofit Sign Up - .spacer + include ../partials/nonprofit-application-progress-bar h2 In 140 characters or less, what does your nonprofit do? For whom? .spacer .formgroup diff --git a/views/nonprofits/ok-with-javascript.jade b/views/nonprofits/ok-with-javascript.jade index 9a3b65d8c7..1835218868 100644 --- a/views/nonprofits/ok-with-javascript.jade +++ b/views/nonprofits/ok-with-javascript.jade @@ -2,11 +2,7 @@ extends ../layout block content .jumbotron.text-center h1.hug-top Nonprofit Sign Up - .spacer - .progress - .progress-bar(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%;') - span.sr-only 60% Complete - h3.gray-text Step 4 of 9 + include ../partials/nonprofit-application-progress-bar h2 Our campers are learning to code using modern full stack JavaScript technologies like Node.js. We do not build or maintain Wordpress, Drupal, or other non-JavaScript based frameworks. .spacer .row diff --git a/views/nonprofits/tell-us-your-email.jade b/views/nonprofits/tell-us-your-email.jade new file mode 100644 index 0000000000..95318faf3e --- /dev/null +++ b/views/nonprofits/tell-us-your-email.jade @@ -0,0 +1,12 @@ +extends ../layout +block content + .jumbotron.text-center + h1.hug-top Nonprofit Sign Up + include ../partials/nonprofit-application-progress-bar + h2 Please tell us your email + .spacer + .formgroup + .input-group + input.form-control.big-text-field.field-responsive(type='text', maxlength='140', autofocus='') + span.input-group-btn + button.btn.btn-big.btn-primary.btn-responsive(href='/nonprofits/your-nonprofit-project-application-has-been-submitted') Submit \ No newline at end of file diff --git a/views/nonprofits/tell-us-your-name-and-email.jade b/views/nonprofits/tell-us-your-name-and-email.jade deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/views/nonprofits/tell-us-your-name.jade b/views/nonprofits/tell-us-your-name.jade new file mode 100644 index 0000000000..a440d89247 --- /dev/null +++ b/views/nonprofits/tell-us-your-name.jade @@ -0,0 +1,12 @@ +extends ../layout +block content + .jumbotron.text-center + h1.hug-top Nonprofit Sign Up + include ../partials/nonprofit-application-progress-bar + h2 Please tell us your name + .spacer + .formgroup + .input-group + input.form-control.big-text-field.field-responsive(type='text', maxlength='140', autofocus='') + span.input-group-btn + button.btn.btn-big.btn-primary.btn-responsive(href='/nonprofits/tell-us-your-email') Submit \ No newline at end of file diff --git a/views/nonprofits/what-does-your-nonprofit-do.jade b/views/nonprofits/what-does-your-nonprofit-do.jade index 92b65b17f4..8220e78f08 100644 --- a/views/nonprofits/what-does-your-nonprofit-do.jade +++ b/views/nonprofits/what-does-your-nonprofit-do.jade @@ -2,7 +2,7 @@ extends ../layout block content .jumbotron.text-center h1.hug-top Nonprofit Sign Up - .spacer + include ../partials/nonprofit-application-progress-bar h2 In 140 characters or less, what does your nonprofit do? For whom? .spacer .formgroup diff --git a/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade b/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade index fcc8c17a87..7190fd14ec 100644 --- a/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade +++ b/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade @@ -1,4 +1,6 @@ -.jumbotron.text-center - h1.hug-top Nonprofit Sign Up - .spacer - h2 Thank you for reaching out to us. We’ll get back with you before N of next week. \ No newline at end of file +extends ../layout +block content + .jumbotron.text-center + h1.hug-top Nonprofit Sign Up + include ../partials/nonprofit-application-progress-bar + h2 Thank you for reaching out to us. We’ll get back with you before N of next week. \ No newline at end of file diff --git a/views/partials/nonprofit-application-progress-bar.jade b/views/partials/nonprofit-application-progress-bar.jade new file mode 100644 index 0000000000..283da6db44 --- /dev/null +++ b/views/partials/nonprofit-application-progress-bar.jade @@ -0,0 +1,6 @@ +.spacer +.progress + .progress-bar(role='progressbar', aria-valuenow= (step * 10), aria-valuemin='0', aria-valuemax='100', style="width: #{step * 10}%;") + span.sr-only= step * 10 + | % Complete +h3.gray-text.text-center Step #{step} of 9 \ No newline at end of file