From 9d572888097ca08b53926c612e60a65ded318288 Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Sun, 28 Dec 2014 18:23:08 +0000 Subject: [PATCH] centered the billing forms --- services/web/app/views/subscriptions/new.jade | 195 +++++++++--------- 1 file changed, 99 insertions(+), 96 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 35a67d2683..44b50c5280 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -40,107 +40,110 @@ block content ) {{currency}} ({{value['symbol']}}) div .  h2.pull-right {{price}} - form(ng-show="planName") - - hr + hr + .row + .col-md-offset-1.col-md-10 + form(ng-show="planName") + - .row - .col-md-12 - .form-group + .row + .col-md-12 + .form-group + .row + .col-md-3 + label.radio-inline + img(src="/recurly/images/credit_cards/mastercard.png") + img(src="/recurly/images/credit_cards/visa.png") + input(type="radio",value="credit_card", ng-model="paymentMethod") + .col-md-4 + label.radio-inline + img(src="/recurly/images/paypal_logo.png") + input(type="radio", value="paypal", ng-model="paymentMethod") + + .alert.alert-warning.small(ng-show="genericError") + strong {{genericError}} + + .div(ng-hide="paymentMethod == 'paypal'") .row + .col-md-12 + .form-group + div(ng-hide="validation.correctCvv") #{translate("invalid")} CVV + div(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")} + .row + .col-md-6 + .form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ") + input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}") .col-md-3 - label.radio-inline - img(src="/recurly/images/credit_cards/mastercard.png") - img(src="/recurly/images/credit_cards/visa.png") - input(type="radio",value="credit_card", ng-model="paymentMethod") - .col-md-4 - label.radio-inline - img(src="/recurly/images/paypal_logo.png") - input(type="radio", value="paypal", ng-model="paymentMethod") + .form-group(ng-class="validation.correctCvv ? '' : 'has-error' ") + input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV") + .row + div(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")} + .col-md-2 + .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") + select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month') + option(value="", disabled, selected) Month + option(value="01") 01 + option(value="02") 02 + option(value="03") 03 + option(value="04") 04 + option(value="05") 05 + option(value="06") 06 + option(value="07") 07 + option(value="08") 08 + option(value="09") 09 + option(value="10") 10 + option(value="11") 11 + option(value="12") 12 + .col-md-3 + .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") + select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year') + option(value="", disabled, selected) Year + option(value="2015") 2015 + option(value="2016") 2016 + option(value="2017") 2017 + option(value="2018") 2018 + option(value="2019") 2019 + option(value="2020") 2020 + option(value="2021") 2021 + option(value="2022") 2022 + option(value="2023") 2023 + option(value="2024") 2024 + option(value="2025") 2025 + option(value="2026") 2026 + .row + .col-md-6 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}") + .col-md-6 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}") + hr + .row + .col-md-12 + .form-group + label #{translate("billing_address")} + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address1") + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address2") + .row + .col-md-8 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city", placeholder="#{translate('city')}") + .col-md-4 + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code", placeholder="#{translate('zip_post_code')}") + .row + .col-md-8 + .form-group + select.form-control(data-recurly="country", ng-model="data.country", required) + mixin countries_options() + .row + .col-md-8 + if showCouponField == 'true' + .form-group + input.form-control(type='text', ng-blur="applyCoupon()", ng-model="data.coupon", placeholder="#{translate('coupon')}") - .alert.alert-warning.small(ng-show="genericError") - strong {{genericError}} - - .div(ng-hide="paymentMethod == 'paypal'") - .row - .col-md-12 - .form-group - div(ng-hide="validation.correctCvv") #{translate("invalid")} CVV - div(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")} - .col-md-5 - .form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ") - input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}") - .col-md-3 - .form-group(ng-class="validation.correctCvv ? '' : 'has-error' ") - input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV") - .row - div(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")} - .col-md-2 - .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") - select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month') - option(value="", disabled, selected) Month - option(value="01") 01 - option(value="02") 02 - option(value="03") 03 - option(value="04") 04 - option(value="05") 05 - option(value="06") 06 - option(value="07") 07 - option(value="08") 08 - option(value="09") 09 - option(value="10") 10 - option(value="11") 11 - option(value="12") 12 - .col-md-3 - .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") - select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year') - option(value="", disabled, selected) Year - option(value="2015") 2015 - option(value="2016") 2016 - option(value="2017") 2017 - option(value="2018") 2018 - option(value="2019") 2019 - option(value="2020") 2020 - option(value="2021") 2021 - option(value="2022") 2022 - option(value="2023") 2023 - option(value="2024") 2024 - option(value="2025") 2025 - option(value="2026") 2026 - .row - .col-md-4 .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}") - .col-md-4 - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}") - hr - .row - .col-md-8 - .form-group - label #{translate("billing_address")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address1") - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address2") - .row - .col-md-4 - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city", placeholder="#{translate('city')}") - .col-md-4 - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code", placeholder="#{translate('zip_post_code')}") - .row - .col-md-8 - .form-group - select.form-control(data-recurly="country", ng-model="data.country", required) - mixin countries_options() - .row - .col-md-8 - if showCouponField == 'true' - .form-group - input.form-control(type='text', ng-blur="applyCoupon()", ng-model="data.coupon", placeholder="#{translate('coupon')}") - - .form-group - button.btn.btn-success(ng-click="submit()", ng-disabled="processing") #{translate("upgrade_now")} + button.btn.btn-success(ng-click="submit()", ng-disabled="processing") #{translate("upgrade_now")}