From bf06d0c6a024718764edfd271387f4e07056dbb5 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sat, 9 Jan 2016 23:49:07 -0600 Subject: [PATCH] Update commit views --- server/views/commit/directory.jade | 25 +++-- server/views/commit/index.jade | 154 ++++++++++++++--------------- 2 files changed, 88 insertions(+), 91 deletions(-) diff --git a/server/views/commit/directory.jade b/server/views/commit/directory.jade index e27ba5f1cd..d2e86ef426 100644 --- a/server/views/commit/directory.jade +++ b/server/views/commit/directory.jade @@ -1,15 +1,14 @@ extends ../layout block content - .panel.panel-info - .panel-heading.text-center Commit to one of these nonprofits - .panel-body - .row - .col-xs-12.col-sm-10.col-sm-offset-1 - for nonprofit in nonprofits - .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 + h1.text-center Commit to one of these nonprofits + hr + .row + .col-xs-12.col-sm-10.col-sm-offset-1 + for nonprofit in nonprofits + .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 diff --git a/server/views/commit/index.jade b/server/views/commit/index.jade index e9a919fd5a..722654e64c 100644 --- a/server/views/commit/index.jade +++ b/server/views/commit/index.jade @@ -1,86 +1,84 @@ extends ../layout block content - .panel.panel-info - .panel-body - h2.text-center Commit to yourself. Commit to a nonprofit. - .row - .col-xs-12.col-sm-6.col-sm-offset-3 - p Give yourself external motivation and help nonprofits right away. Pledge a monthly donation to a nonprofit until you’ve earned either your Front End or Full Stack Development Certification. + h2.text-center Commit to yourself. Commit to a nonprofit. + .row + .col-xs-12.col-sm-6.col-sm-offset-3 + p Give yourself external motivation and help nonprofits right away. Pledge a monthly donation to a nonprofit until you’ve earned either your Front End or Full Stack Development Certification. - .row - .col-xs-12.col-sm-6.col-sm-offset-3.text-center - h3 Pledge to #{displayName}  - .button-spacer - a(href='#{imgUrl}' data-lightbox='img-enlarge' alt='#{imgAlt}') - img.img-responsive(src='#{imgUrl}' alt='#{imgAlt}') - p.large-p - = description - a(href='/commit/directory') ...or see other nonprofits - .spacer - form.form(name='commit') - .hidden - input(type='text' value='#{name}' name='nonprofit') - .row - .col-xs-12.col-sm-6.col-sm-offset-3 - 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 - 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 - .spacer - .row - .col-xs-12.col-sm-6.col-sm-offset-3 - 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') - | $5 per month - label.btn.btn-success.active - input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked") - | $10 per month - label.btn.btn-success - input(type='radio' id='25-dollar-pledge' value='25' name='amount') - | $25 per month - label.btn.btn-success - input(type='radio' id='50-dollar-pledge' value='50' name='amount') - | $50 per month - .spacer - .col-xs-12.col-sm-6.col-sm-offset-3 - h3 Step 3: Set up your monthly donation - .row - .col-xs-12.col-sm-6.col-sm-offset-3.text-center - a#commit-btn-donate.btn.btn-block.btn-lg.btn-primary(href=donateUrl target='_blank') Open the #{displayName} donation page + .row + .col-xs-12.col-sm-6.col-sm-offset-3.text-center + h3 Pledge to #{displayName}  + .button-spacer + a(href='#{imgUrl}' data-lightbox='img-enlarge' alt='#{imgAlt}') + img.img-responsive(src='#{imgUrl}' alt='#{imgAlt}') + p.large-p + = description + p + a(href='/commit/directory') ...or see other nonprofits + .spacer + form.form(name='commit') + .hidden + input(type='text' value='#{name}' name='nonprofit') + .row + .col-xs-12.col-sm-6.col-sm-offset-3 + 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 + 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 + .spacer + .row + .col-xs-12.col-sm-6.col-sm-offset-3 + 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-primary + input(type='radio' id='5-dollar-pledge' value='5' name='amount') + | $5 per month + label.btn.btn-primary.active + input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked") + | $10 per month + label.btn.btn-primary + input(type='radio' id='25-dollar-pledge' value='25' name='amount') + | $25 per month + label.btn.btn-primary + input(type='radio' id='50-dollar-pledge' value='50' name='amount') + | $50 per month + .spacer + .col-xs-12.col-sm-6.col-sm-offset-3 + h3 Step 3: Set up your monthly donation + .row + .col-xs-12.col-sm-6.col-sm-offset-3.text-center + a#commit-btn-donate.btn.btn-block.btn-lg.btn-primary(href=donateUrl target='_blank') Open the #{displayName} donation page - .spacer - .col-xs-12.col-sm-6.col-sm-offset-3 - h3#commit-step4-text.disabled - Step 4: Confirm - span#commit-step4-hidden.disabled (Do step 3 first) - span#commit-step4-show.hidden your commitment to your goal - .row - .col-xs-12.col-sm-6.col-sm-offset-3.text-center - button#commit-btn-submit.btn.btn-block.btn-lg.btn-primary.disabled Commit + .spacer + .col-xs-12.col-sm-6.col-sm-offset-3 + h3#commit-step4-text.disabled + Step 4: Confirm + span#commit-step4-hidden.disabled (Do step 3 first) + span#commit-step4-show.hidden your commitment to your goal + .row + .col-xs-12.col-sm-6.col-sm-offset-3.text-center + button#commit-btn-submit.btn.btn-block.btn-lg.btn-primary.disabled Commit - if pledge - form.row(name='stop-pledge' action='/commit/stop-commitment' method='post') - .col-xs-12.col-sm-6.col-sm-offset-3.text-center - .button-spacer - button.btn.btn-block.btn-lg.btn-default(name='submit' type='submit') Stop my current pledge - else - .row - .col-xs-12.col-sm-6.col-sm-offset-3.text-center - .button-spacer - a.btn.btn-block.btn-lg.btn-default(href='/map') Maybe later - .spacer + if pledge + form.row(name='stop-pledge' action='/commit/stop-commitment' method='post') + .col-xs-12.col-sm-6.col-sm-offset-3.text-center + .button-spacer + button.btn.btn-block.btn-lg.btn-default(name='submit' type='submit') Stop my current pledge + else + .row + .col-xs-12.col-sm-6.col-sm-offset-3.text-center + .button-spacer + a.btn.btn-block.btn-lg.btn-default(href='/map') Maybe later script. $(function() { $('#commit-btn-donate').click(function() {