github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Improve CSS and layout of feature list on new subscription page

Browse source
This commit is contained in:
James Allen 2014-10-15 10:22:03 +01:00
parent b32375530c
commit 64fe2a2404
3 changed files with 162 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
services/web/app/views/subscriptions/new.jade
View file

@ -13,7 +13,40 @@ block content
.content.content-alt
.container(ng-controller="NewSubscriptionController" ng-cloak)
.row.card-group
.col-md-6.col-md-offset-1
.col-lg-3
.card.card-first
.paymentPageFeatures
.page-header
h3 #{translate("features")}
h3 #{translate("unlimited_projects")}
p #{translate("create_unlimited_projects")}
h3
if plan.features.collaborators == -1
- var collaboratorCount = 'Unlimited'
else
- var collaboratorCount = plan.features.collaborators
| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
p #{translate("work_on_single_version")}. #{translate("view_collab_edits")} in real time.
h3 #{translate("full_doc_history")}
p #{translate("see_what_has_been")}
span.added #{translate("added")}
| #{translate("and")}
span.removed #{translate("removed")}.
| #{translate("restore_to_any_older_version")}.
h3 #{translate("sync_to_dropbox")}
p
| #{translate("acces_work_from_anywhere")}.
| #{translate("work_offline_and_sync_with_dropbox")}.
hr
p.small.text-center We're confident that you'll love ShareLaTeX, but if not you can cancel anytime. We'll give you your money back, no questions asked, if you let us know within 30 days.
.col-lg-6
.card.card-highlighted
.page-header
span.dropdown.changePlanButton.pull-right(ng-cloak)
@ -30,32 +63,7 @@ block content
) {{currency}} ({{value['symbol']}})
h1 #{translate("new_subscription")}
#subscribeForm(style="min-height: 400px;") #{translate("loading_billing_form")}...
.col-md-4
.card.card-last
.paymentPageFeatures
ul.list-unstyled
li
if plan.features.collaborators == -1
- var collaboratorCount = 'Unlimited'
else
- var collaboratorCount = plan.features.collaborators
i.fa.fa-check
| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
li
i.fa.fa-check
| #{translate("full_doc_history")}
li
i.fa.fa-check
| #{translate("sync_to_dropbox")}
li
i.fa.fa-check
| Cancel Anytime
li
i.fa.fa-check
| 100% Money Back Guarantee
#subscribeForm(style="min-height: 700px;") #{translate("loading_billing_form")}...
script(type="text/javascript").
ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")

222
services/web/app/views/subscriptions/plans.jade
View file

@ -49,118 +49,120 @@ block content
) {{currency}} ({{value['symbol']}})
.row(ng-cloak)
.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
.col-md-3.col-md-offset-1
.card.card-first
.card-header
h2 #{translate("personal")}
.circle #{translate("free")}
ul.list-unstyled
li #{translate("one_collaborator")}
li  
li  
li
br
a.btn.btn-info(href="/register") #{translate("sign_up_now")}
.col-md-4
.card.card-highlighted
.card-header
h2 #{translate("collaborator")}
.circle
span(ng-if="ui.view == 'monthly'")
| {{plans[currencyCode]['collaborator']['monthly']}}
span.small /mo
span(ng-if="ui.view == 'annual'")
| {{plans[currencyCode]['collaborator']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:10})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
.col-md-10.col-md-offset-1
.row
.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
.col-md-4
.card.card-first
.card-header
h2 #{translate("personal")}
.circle #{translate("free")}
ul.list-unstyled
li #{translate("one_collaborator")}
li  
li  
li
br
a.btn.btn-info(href="/register") #{translate("sign_up_now")}
.col-md-4
.card.card-highlighted
.card-header
h2 #{translate("collaborator")}
.circle
span(ng-if="ui.view == 'monthly'")
| {{plans[currencyCode]['collaborator']['monthly']}}
span.small /mo
span(ng-if="ui.view == 'annual'")
| {{plans[currencyCode]['collaborator']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:10})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('collaborator')"
)
span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
.col-md-3
.card.card-last
.card-header
h2 #{translate("professional")}
.circle
span(ng-if="ui.view == 'monthly'")
| {{plans[currencyCode]['professional']['monthly']}}
span.small /mo
span(ng-if="ui.view == 'annual'")
| {{plans[currencyCode]['professional']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("unlimited_collabs")}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('professional')"
)
span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
ng-href="#{baseUrl}/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('collaborator')"
)
span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
.col-md-4
.card.card-last
.card-header
h2 #{translate("professional")}
.circle
span(ng-if="ui.view == 'monthly'")
| {{plans[currencyCode]['professional']['monthly']}}
span.small /mo
span(ng-if="ui.view == 'annual'")
| {{plans[currencyCode]['professional']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("unlimited_collabs")}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('professional')"
)
span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
.card-group.text-centered(ng-if="ui.view == 'student'")
.col-md-3.col-md-offset-1
.card.card-first
.card-header
h2 #{translate("personal")}
.circle #{translate("free")}
ul.list-unstyled
li #{translate("one_collaborator")}
li  
li  
li
br
a.btn.btn-info(href="/register") #{translate("sign_up_now")}
.col-md-4
.card.card-highlighted
.card-header
h2 #{translate("student")}
.circle
span
| {{plans[currencyCode]['student']['monthly']}}
span.small /mo
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:6})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
) #{translate("start_free_trial")}
.col-md-3
.card.card-last
.card-header
h2 #{translate("student")} (#{translate("annual")})
.circle
span
| {{plans[currencyCode]['student']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:6})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
) #{translate("buy_now")}
.card-group.text-centered(ng-if="ui.view == 'student'")
.col-md-4
.card.card-first
.card-header
h2 #{translate("personal")}
.circle #{translate("free")}
ul.list-unstyled
li #{translate("one_collaborator")}
li  
li  
li
br
a.btn.btn-info(href="/register") #{translate("sign_up_now")}
.col-md-4
.card.card-highlighted
.card-header
h2 #{translate("student")}
.circle
span
| {{plans[currencyCode]['student']['monthly']}}
span.small /mo
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:6})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
) #{translate("start_free_trial")}
.col-md-4
.card.card-last
.card-header
h2 #{translate("student")} (#{translate("annual")})
.circle
span
| {{plans[currencyCode]['student']['annual']}}
span.small /yr
ul.list-unstyled
li
strong #{translate("collabs_per_proj", {collabcount:6})}
li #{translate("full_doc_history")}
li #{translate("sync_to_dropbox")}
li
br
a.btn.btn-info(
ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
) #{translate("buy_now")}
.row.row-spaced(ng-cloak)
p.text-centered #{translate("choose_plan_works_for_you", {len:14})}

19
services/web/public/stylesheets/app/plans.less
View file

@ -73,10 +73,21 @@
}
.paymentPageFeatures {
padding-top:200px;
li {
font-size:24px;
h1, h2, h3 {
color: @gray-dark;
}
h3 {
font-size: 18px;
&:first-child {
margin-top: 0;
}
}
p {
font-size: 14px;
color: @gray;
}
.small {
font-size: 12px;
}
}