mirror of
https://github.com/overleaf/overleaf.git
synced 2025-02-23 08:10:56 +00:00
Layout and styling for simple subscription form.
This commit is contained in:
Paulo Reis
parent
097df3a771
commit
43b832965f
2 changed files with 150 additions and 68 deletions
|
|
@ -176,54 +176,73 @@ block content
|
|||
div.pull-right
|
||||
strong {{price.currency.symbol}}{{price.next.total}}
|
||||
.col-md-12(sixpack-when="simple")
|
||||
form(ng-show="planName")
|
||||
.row
|
||||
.col-md-12
|
||||
.form-group
|
||||
.row
|
||||
.col-md-6
|
||||
label.radio-inline
|
||||
input.paymentTypeOption(type="radio", value="credit_card", ng-model="paymentMethod")
|
||||
i.fa.fa-cc-mastercard.fa-3x
|
||||
span
|
||||
i.fa.fa-cc-visa.fa-3x
|
||||
.col-md-6
|
||||
label.radio-inline
|
||||
input.paymentTypeOption(type="radio", value="paypal", ng-model="paymentMethod")
|
||||
i.fa.fa-cc-paypal.fa-3x
|
||||
form(ng-if="planName")
|
||||
div.payment-method-toggle
|
||||
a.payment-method-toggle-switch(
|
||||
href
|
||||
ng-click="paymentMethod = 'credit_card'"
|
||||
ng-class="paymentMethod === 'credit_card' ? 'payment-method-toggle-switch-selected' : ''"
|
||||
)
|
||||
i.fa.fa-cc-mastercard.fa-2x
|
||||
span
|
||||
i.fa.fa-cc-visa.fa-2x
|
||||
span
|
||||
i.fa.fa-cc-amex.fa-2x
|
||||
a.payment-method-toggle-switch(
|
||||
href
|
||||
ng-click="paymentMethod = 'paypal'"
|
||||
ng-class="paymentMethod === 'paypal' ? 'payment-method-toggle-switch-selected' : ''"
|
||||
)
|
||||
i.fa.fa-cc-paypal.fa-2x
|
||||
//- TODO Validation messages
|
||||
.form-group
|
||||
label(for="card-name") Name on card
|
||||
input#card-name.form-control(type="text")
|
||||
.form-group(ng-class="validation.number == false || validation.errorFields.number ? 'has-error' : ''")
|
||||
label(for="card-no") Card number
|
||||
input#card-no.form-control(type="credit card", ng-model='data.number', ng-blur="validateCardNumber()")
|
||||
.row
|
||||
.col-xs-6
|
||||
label Valid thru {{ data.mmYY }}
|
||||
input.form-control(
|
||||
div(ng-if="paymentMethod === 'credit_card'")
|
||||
.form-group
|
||||
label(for="card-name") Name on card
|
||||
input#card-name.form-control(type="text")
|
||||
.form-group(ng-class="validation.number == false || validation.errorFields.number ? 'has-error' : ''")
|
||||
label(for="card-no") Card number
|
||||
input#card-no.form-control(
|
||||
type="text"
|
||||
ng-model="data.mmYY"
|
||||
cc-format-expiry
|
||||
)
|
||||
.col-xs-6
|
||||
.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv ? 'has-error' : ''")
|
||||
label Security code
|
||||
input.form-control(type="cvc", ng-model='data.cvv', ng-blur="validateCvv()")
|
||||
.form-control-feedback
|
||||
a.form-helper(
|
||||
href
|
||||
tooltip-template="'cvv-tooltip-tpl.html'"
|
||||
tooltip-trigger="mouseenter"
|
||||
tooltip-append-to-body="true"
|
||||
) ?
|
||||
.form-group(ng-class="validation.errorFields.country ? 'has-error' : ''")
|
||||
label(for="country") Country
|
||||
select#country.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required)
|
||||
mixin countries_options()
|
||||
.row
|
||||
.col-xs-12
|
||||
button.btn.btn-success.btn-block(ng-click="submit()", ng-disabled="processing", sixpack-convert="payment-left-menu-bottom") #{translate("upgrade_now")}
|
||||
ng-model="data.number"
|
||||
ng-blur="validateCardNumber()"
|
||||
cc-format-card-number)
|
||||
.row
|
||||
.col-xs-6
|
||||
label Expiry date
|
||||
input.form-control(
|
||||
type="text"
|
||||
ng-model="data.mmYY"
|
||||
placeholder="MM // YY"
|
||||
cc-format-expiry
|
||||
)
|
||||
.col-xs-6
|
||||
.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv ? 'has-error' : ''")
|
||||
label Security code
|
||||
input.form-control(
|
||||
type="text"
|
||||
ng-model="data.cvv"
|
||||
ng-blur="validateCvv()"
|
||||
cc-format-sec-code)
|
||||
.form-control-feedback
|
||||
a.form-helper(
|
||||
href
|
||||
tabindex="-1"
|
||||
tooltip-template="'cvv-tooltip-tpl.html'"
|
||||
tooltip-trigger="mouseenter"
|
||||
tooltip-append-to-body="true"
|
||||
) ?
|
||||
.form-group(ng-class="validation.errorFields.country ? 'has-error' : ''")
|
||||
label(for="country") Country
|
||||
select#country.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required)
|
||||
mixin countries_options()
|
||||
.row.payment-form-submit
|
||||
.col-xs-12
|
||||
button.btn.btn-success.btn-block(ng-click="submit()", ng-disabled="processing", sixpack-convert="payment-left-menu-bottom") Upgrade now, pay after 7 days
|
||||
div(ng-if="paymentMethod === 'paypal'")
|
||||
p Click the button below to login with PayPal and upgrade.
|
||||
.row.payment-form-submit
|
||||
.col-xs-12
|
||||
button.btn.btn-success.btn-block(ng-click="submit()", ng-disabled="processing", sixpack-convert="payment-left-menu-bottom") Continue
|
||||
|
||||
span(sixpack-switch="payment-left-menu-bottom")
|
||||
|
||||
|
|
@ -279,32 +298,33 @@ block content
|
|||
.paymentPageFeatures
|
||||
.page-header
|
||||
h2 #{translate("features")}
|
||||
h3
|
||||
i.fa.fa-check
|
||||
| #{translate("unlimited_projects")}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy #{translate("unlimited_projects")}
|
||||
|
||||
h3
|
||||
i.fa.fa-check
|
||||
if plan.features.collaborators == -1
|
||||
- var collaboratorCount = 'Unlimited'
|
||||
else
|
||||
- var collaboratorCount = plan.features.collaborators
|
||||
| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy
|
||||
if plan.features.collaborators == -1
|
||||
- var collaboratorCount = 'Unlimited'
|
||||
else
|
||||
- var collaboratorCount = plan.features.collaborators
|
||||
| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
|
||||
|
||||
h3
|
||||
i.fa.fa-check
|
||||
| #{translate("full_doc_history")}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy #{translate("full_doc_history")}
|
||||
|
||||
h3
|
||||
i.fa.fa-check
|
||||
| #{translate("sync_to_dropbox")}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy #{translate("sync_to_dropbox")}
|
||||
|
||||
h3
|
||||
i.fa.fa-check
|
||||
| #{translate("sync_to_github")}
|
||||
h3
|
||||
i.fa.fa-check
|
||||
| #{translate("Compile Larger Projects")}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy #{translate("sync_to_github")}
|
||||
h3.feature
|
||||
.features-check: i.fa.fa-check
|
||||
.features-copy #{translate("compile_larger_projects")}
|
||||
hr
|
||||
|
||||
h2.text-center 30 Day Guarantee
|
||||
|
|
|
|||
62
services/web/public/stylesheets/app/subscription.less
Normal file
62
services/web/public/stylesheets/app/subscription.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.form-helper {
|
||||
display: inline-block;
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
line-height: 1.3;
|
||||
vertical-align: initial;
|
||||
background-color: @gray;
|
||||
color: #FFF;
|
||||
font-weight: bolder;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-form {
|
||||
&-submit {
|
||||
padding-top: (@line-height-computed / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method-toggle {
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
|
||||
&-switch {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border: solid 1px @gray-lighter;
|
||||
border-radius: @border-radius-large 0 0 @border-radius-large;
|
||||
padding: (@line-height-computed / 2);
|
||||
color: @gray;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @gray-dark;
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-left-width: 0;
|
||||
border-radius: 0 @border-radius-large @border-radius-large 0;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
color: @link-color;
|
||||
box-shadow: inset 0 -2px 0 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue