Refactor card css for use in new subscription page

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 {

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

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}}&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)

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

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