mirror of
https://github.com/overleaf/overleaf.git
synced 2025-01-11 16:34:28 +00:00
centered the billing forms
This commit is contained in:
Henry Oswald
parent
236d4d7ab3
commit
9d57288809
1 changed files with 99 additions and 96 deletions
|
|
@ -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")}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue