From b32375530c83b977910d149454e0bf002aeafd9d Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 14 Oct 2014 15:46:44 +0100 Subject: [PATCH] Refactor card css for use in new subscription page --- .../SubscriptionController.coffee | 2 + services/web/app/views/subscriptions/new.jade | 31 ++++---- .../web/app/views/subscriptions/plans.jade | 38 ++++++---- .../web/public/stylesheets/app/plans.less | 70 +++---------------- .../public/stylesheets/components/card.less | 36 +++++++++- 5 files changed, 84 insertions(+), 93 deletions(-) diff --git a/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee b/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee index 6e4c147e9b..ffd1bf475f 100644 --- a/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee +++ b/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee @@ -36,11 +36,13 @@ module.exports = SubscriptionController = return next(error) if error? plan = PlansLocator.findLocalPlanInSettings(req.query.planCode) LimitationsManager.userHasSubscription user, (err, hasSubscription)-> + return next(err) if err? if hasSubscription or !plan? res.redirect "/user/subscription" else currency = req.query.currency?.toUpperCase() GeoIpLookup.getCurrencyCode req.ip, (err, recomendedCurrency)-> + return next(err) if err? if recomendedCurrency? and !currency? currency = recomendedCurrency RecurlyWrapper.sign { diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index bbbc6dcda7..fbf5f034dc 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -11,31 +11,30 @@ block content script(src=jsPath+'libs/recurly.min.js') .content.content-alt - .container - .row + .container(ng-controller="NewSubscriptionController" ng-cloak) + .row.card-group .col-md-6.col-md-offset-1 - .card + .card.card-highlighted .page-header - h1.text-centered #{translate("new_subscription")} - #subscribeForm #{translate("loading_billing_form")}... - .col-md-5(ng-controller="NewSubscriptionController" ng-cloak) - .row - .col-md-12 - span.dropdown.col-md-1.changePlanButton() - a.btn.btn-primary.dropdown-toggle( + span.dropdown.changePlanButton.pull-right(ng-cloak) + a.btn.btn-default.dropdown-toggle( href="#", data-toggle="dropdown" ) - | {{currencyCode}} ({{plans[currencyCode]['symbol']}}) + | {{currencyCode}} ({{plans[currencyCode]['symbol']}}) + span.caret ul.dropdown-menu(role="menu") li(ng-repeat="(currency, value) in plans", dropdown-toggle) a( ng-click="changeCurrency(currency)", ) {{currency}} ({{value['symbol']}}) - - - .row - .col-md-12.paymentPageFeatures + 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 @@ -55,7 +54,7 @@ block content | Cancel Anytime li i.fa.fa-check - | 100% Money Back Guarantee + | 100% Money Back Guarantee script(type="text/javascript"). diff --git a/services/web/app/views/subscriptions/plans.jade b/services/web/app/views/subscriptions/plans.jade index bd7ad28151..2e26e5395b 100644 --- a/services/web/app/views/subscriptions/plans.jade +++ b/services/web/app/views/subscriptions/plans.jade @@ -32,15 +32,16 @@ block content href, ng-click="switchToStudent()" ) #{translate("half_price_student")} - .col-md-2 - .dropdown() - a.btn.btn-primary.dropdown-toggle#currenyDropdown( + .col-md-2.text-right + .dropdown.currency-dropdown + a.btn.btn-default.dropdown-toggle#currenyDropdown( href="#", data-toggle="dropdown" ) - | {{currencyCode}} ({{plans[currencyCode]['symbol']}}) + | {{currencyCode}} ({{plans[currencyCode]['symbol']}}) + span.caret - ul.dropdown-menu(role="menu") + ul.dropdown-menu.dropdown-menu-right.text-left(role="menu") li(ng-repeat="(currency, value) in plans", dropdown-toggle) a( href, @@ -48,9 +49,9 @@ block content ) {{currency}} ({{value['symbol']}}) .row(ng-cloak) - .col-md-12 - .card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'") - .card + .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")} @@ -61,7 +62,8 @@ block content li br a.btn.btn-info(href="/register") #{translate("sign_up_now")} - .card.highlighted + .col-md-4 + .card.card-highlighted .card-header h2 #{translate("collaborator")} .circle @@ -84,7 +86,8 @@ block content ) span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")} span(ng-show="ui.view == 'annual'") #{translate("buy_now")} - .card + .col-md-3 + .card.card-last .card-header h2 #{translate("professional")} .circle @@ -107,8 +110,9 @@ block content 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'") - .card + .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")} @@ -119,7 +123,9 @@ block content li br a.btn.btn-info(href="/register") #{translate("sign_up_now")} - .card.highlighted + + .col-md-4 + .card.card-highlighted .card-header h2 #{translate("student")} .circle @@ -136,7 +142,9 @@ block content a.btn.btn-info( ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}¤cy={{currencyCode}}", ng-click="signUpNowClicked('student')" ) #{translate("start_free_trial")} - .card + + .col-md-3 + .card.card-last .card-header h2 #{translate("student")} (#{translate("annual")}) .circle @@ -154,7 +162,7 @@ block content ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual¤cy={{currencyCode}}", ng-click="signUpNowClicked('student')" ) #{translate("buy_now")} - .row(ng-cloak) + .row.row-spaced(ng-cloak) p.text-centered #{translate("choose_plan_works_for_you", {len:14})} .row(ng-cloak) diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less index d6c9ee1759..7fc487743b 100644 --- a/services/web/public/stylesheets/app/plans.less +++ b/services/web/public/stylesheets/app/plans.less @@ -26,76 +26,24 @@ margin: 0; } } - .card { - background-color: white; - border-radius: 3px; - -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - margin: @line-height-computed 0; - padding: @line-height-computed; - .card-header { - border-bottom: 1px solid @gray-lighter; - padding-bottom: @line-height-computed; - margin-bottom: @line-height-computed; - h2 { - margin: 0; - } - } - .circle { - font-size: 1.5rem; - font-weight: 700; - padding: 38px 18px; - margin: 0 auto @line-height-computed; - text-shadow: 0 -1px 1px darken(@link-color, 10%); - width: 120px; - height: 120px; - small { - margin-top: @line-height-computed / 2; - } - } - &.first { - margin-top: 0; - } - &.card-thin { - padding: @line-height-computed / 4; - } - } - .card-group { - margin: @line-height-computed 0; - .card { - border-radius: 0; - display: inline-block; - margin: 0; - &:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - width: 300px; - } - .highlighted { - box-shadow: 0 4px 8px rgba(0,0,0,0.1); - margin-top: -@line-height-computed * 2; + .card-highlighted { padding-top: @line-height-computed * 2; padding-bottom: @line-height-computed * 2; - position: relative; - z-index: 10; } } - > .card-group > .card { - padding-left: 1rem; - padding-right: 1rem; - } + .circle { + font-size: 1.5rem; + font-weight: 700; + padding: 38px 18px; + margin: 0 auto @line-height-computed; + text-shadow: 0 -1px 1px darken(@link-color, 10%); + width: 120px; + height: 120px; border-radius: 50%; background-color: @red; color: white; - padding: @line-height-computed / 2; - margin-bottom: @line-height-computed; white-space: nowrap; span.small { color: rgba(255, 255, 255, 0.75); diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less index 993034c64d..2619686b0a 100644 --- a/services/web/public/stylesheets/components/card.less +++ b/services/web/public/stylesheets/components/card.less @@ -2,7 +2,7 @@ background-color: white; border-radius: @border-radius-base; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0,0,0,0.15); padding: @line-height-computed; .page-header { margin: 0 0 1.5625rem; @@ -13,8 +13,42 @@ > .container-fluid { padding: 0; } + + .card-header { + border-bottom: 1px solid @gray-lighter; + padding-bottom: @line-height-computed; + margin-bottom: @line-height-computed; + h2 { + margin: 0; + } + } } .card-thin { padding: @line-height-computed / 2 +} + +.card-group { + .card { + margin: @line-height-computed -15px 0 -15px; + border-radius: 0; + + &.card-highlighted { + // Bring card in front of other cards + position: relative; + z-index: 1; + // Make it taller and card like + margin-top: 0; + border-radius: @border-radius-base; + } + + &.card-first { + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } + &.card-last { + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } + } } \ No newline at end of file