diff --git a/client/less/main.less b/client/less/main.less index 478f7a3a5a..e3084e0e1a 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -537,10 +537,14 @@ thead { border-radius: 5px; } -.story-section { +.height-500 { height: 500px; } +.height-400 { + height: 400px; +} + .testimonial-copy { text-align: justify; font-size: 18px !important; diff --git a/server/boot/commit.js b/server/boot/commit.js index 4ba0f3801e..5e613d65fd 100644 --- a/server/boot/commit.js +++ b/server/boot/commit.js @@ -106,10 +106,9 @@ export default function commit(app) { Object.assign( { title: 'Commit to a nonprofit. Commit to your goal.', - pledge, - frontEndCert: commitGoals.frontEndCert, - fullStackCert: commitGoals.fullStackCert + pledge }, + commitGoals, nonprofit ) ); diff --git a/server/utils/commit-goals.json b/server/utils/commit-goals.json index d9f20e47ff..9c7c69721b 100644 --- a/server/utils/commit-goals.json +++ b/server/utils/commit-goals.json @@ -1,4 +1,6 @@ { "frontEndCert": "Front End Development Certification", + "backEndCert": "Back End Development Certification", + "dataVisCert": "Data Visualisation Certification", "fullStackCert": "Full Stack Development Certification" } diff --git a/server/views/commit/directory.jade b/server/views/commit/directory.jade index 5133e89116..e27ba5f1cd 100644 --- a/server/views/commit/directory.jade +++ b/server/views/commit/directory.jade @@ -6,15 +6,10 @@ block content .row .col-xs-12.col-sm-10.col-sm-offset-1 for nonprofit in nonprofits - .col-xs-12.col-sm-6.col-md-4.story-section + .col-xs-12.col-sm-6.col-md-4.height-400 .text-center h2= nonprofit.displayName img.testimonial-image.img-responsive.img-center(src=nonprofit.imgUrl) .button-spacer a.text-center(href='/commit?nonprofit=#{nonprofit.name}') Commit to #{nonprofit.displayName} p= nonprofit.description - .spacer - .col-xs-12 - a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='mailto:team@freecodecamp.com?subject=Supporting%20Nonprofits') - span.ion-email - | Email us about adding your nonprofit here diff --git a/server/views/commit/index.jade b/server/views/commit/index.jade index 876eb81362..e9a919fd5a 100644 --- a/server/views/commit/index.jade +++ b/server/views/commit/index.jade @@ -22,18 +22,24 @@ block content input(type='text' value='#{name}' name='nonprofit') .row .col-xs-12.col-sm-6.col-sm-offset-3 - h3 Step 1: Choose your goal + h3 Step 1: Which certification do you pledge to complete? .btn-group.btn-group-justified(data-toggle='buttons' role='group') label.btn.btn-primary.btn-lg.active input(type='radio' id=frontEndCert value=frontEndCert name='goal' checked="checked") - | Front End Development Certification (takes about 400 hours) + | Front End + label.btn.btn-primary.btn-lg + input(type='radio' id=dataVisCert value=dataVisCert name='goal') + | Data + label.btn.btn-primary.btn-lg + input(type='radio' id=backEndCert value=backEndCert name='goal') + | Back End label.btn.btn-primary.btn-lg input(type='radio' id=fullStackCert value=fullStackCert name='goal') - | Full Stack Development Certification (takes about 800 hours) + | Full Stack .spacer .row .col-xs-12.col-sm-6.col-sm-offset-3 - h3 Step 2: Choose your monthly pledge + h3 Step 2: How much do you want to pledge monthly until you earn that certification? .btn-group.btn-group-justified(data-toggle='buttons' role='group') label.btn.btn-success input(type='radio' id='5-dollar-pledge' value='5' name='amount') @@ -85,6 +91,15 @@ block content }); $('#commit-btn-submit').click(function() { + + if ( + history && + typeof history.pushState === 'function' + ) { + history.pushState(history.state, null, '/commit/pledge?' + $('form').serialize()); + return null; + } + window.location.href = '/commit/pledge?' + $('form').serialize(); }); }); diff --git a/server/views/resources/stories.jade b/server/views/resources/stories.jade index 37548a054d..794c4badea 100644 --- a/server/views/resources/stories.jade +++ b/server/views/resources/stories.jade @@ -8,7 +8,7 @@ block content .row for story in stories .col-xs-12.col-sm-6.col-md-4 - .story-section + .height-500 a(href=story.linkedin target='_blank') img.testimonial-image.img-responsive.img-center(src=story.image) h3.text-center= story.camper