github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Refactor card css for use in new subscription page

Browse source
This commit is contained in:
James Allen 2014-10-14 15:46:44 +01:00
parent b2b13ef9a7
commit b32375530c
5 changed files with 84 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/coffee/Features/Subscription/SubscriptionController.coffee
View file

@ -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 {

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

@ -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").

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

@ -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}}&currency={{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&currency={{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)

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

@ -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);

36
services/web/public/stylesheets/components/card.less
View file

@ -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;
}
}
}