From 64fe2a240453e6fa912d32921633b41e82c5bab0 Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 15 Oct 2014 10:22:03 +0100 Subject: [PATCH] Improve CSS and layout of feature list on new subscription page --- services/web/app/views/subscriptions/new.jade | 62 ++--- .../web/app/views/subscriptions/plans.jade | 222 +++++++++--------- .../web/public/stylesheets/app/plans.less | 19 +- 3 files changed, 162 insertions(+), 141 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index fbf5f034dc..eb36b93019 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -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}") diff --git a/services/web/app/views/subscriptions/plans.jade b/services/web/app/views/subscriptions/plans.jade index 2e26e5395b..8ebbaec052 100644 --- a/services/web/app/views/subscriptions/plans.jade +++ b/services/web/app/views/subscriptions/plans.jade @@ -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}}¤cy={{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}}¤cy={{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}}¤cy={{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}}¤cy={{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}}¤cy={{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¤cy={{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}}¤cy={{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¤cy={{currencyCode}}", ng-click="signUpNowClicked('student')" + ) #{translate("buy_now")} .row.row-spaced(ng-cloak) p.text-centered #{translate("choose_plan_works_for_you", {len:14})} diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less index 7fc487743b..9324393bda 100644 --- a/services/web/public/stylesheets/app/plans.less +++ b/services/web/public/stylesheets/app/plans.less @@ -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; } }