edit layout counts

3 files changed, 27 insertions, 14 deletions

diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
index 539a8ae..fe93499 100644
--- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js
+++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
@@ -31,46 +31,50 @@ var EditSubscriptionModal = ModalView.extend({
 	},
 
 	resetMode: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		this.$paidPlan.removeClass("editLayouts editPlan")
 		this.reset()
 	},
 
 	layoutsMode: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		this.$paidPlan.addClass("editLayouts")
 		this.tempSubscriber = defaults({}, this.subscriber)
 		this.$basicLayoutInput.val( this.subscriber.basic_layouts )
 		this.$proLayoutInput.val( this.subscriber.pro_layouts )
+		this.$basicLayoutRow.show()
+		this.$proLayoutRow.toggle(this.subscriber.plan_name == "pro")
 	},
 	updateQuantity: function(e){
-		e.preventDefault()
-		this.tempSubscriber.basic_layouts = this.$proLayoutInput.int()
-		this.tempSubscriber.pro_layouts = this.$basicLayoutInput.int()
+		e && e.preventDefault()
+		this.tempSubscriber.basic_layouts = this.$basicLayoutInput.int()
+		this.tempSubscriber.pro_layouts = this.$proLayoutInput.int()
 		
 		var plan = this.getPlan( this.tempSubscriber.plan_type )
 		this.displayTotals(this.tempSubscriber, plan)
+		this.$basicLayoutRow.show()
+		this.$proLayoutRow.toggle(plan.name == "pro")
 	},
 	saveQuantity: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		// blabla.. save
 		this.subscriber = this.tempSubscriber
 		this.resetMode()
 	},
 
 	planMode: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		this.$paidPlan.addClass("editPlan")
 		this.$planRadio.val( this.subscriber.plan_type )
 		this.tempSubscriber = defaults({}, this.subscriber)
 	},
 	updatePlan: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		var plan = this.getPlan( this.$("[name=planRadio]").val() )
 		this.displayTotals(this.tempSubscriber, plan)
 	},
 	savePlan: function(e){
-		e.preventDefault()
+		e && e.preventDefault()
 		this.subscriber.plan_type = this.$("[name=planRadio]").val()
 		this.subscriber = this.tempSubscriber
 		this.resetMode()
@@ -178,7 +182,7 @@ var EditSubscriptionModal = ModalView.extend({
 		this.$freePlan.hide()
 		this.$paidPlan.show()
 		
-		this.reset()
+		this.resetMode()
 		
 		this.__super__.show.call(this)
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b3d380c..b58bb01 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1027,6 +1027,10 @@ iframe.embed {
 	padding: 10px 3px;
 	margin: 0;
 }
+.planInfo td {
+	height: 60px;
+	vertical-align: middle;
+}
 .planInfo td:nth-child(2), 
 .planInfo th:nth-child(2), 
 .planInfo td:nth-child(3), 
@@ -1034,6 +1038,10 @@ iframe.embed {
 .planInfo th:nth-child(3) {
 	text-align: right;
 }
+.planInfo td:nth-child(4) {
+	width: 90px;
+}
+
 .planInfo [data-role="billingInterval"] {
 	font-size: 10px;
 }
@@ -1046,7 +1054,8 @@ iframe.embed {
 	margin: 5px 7px;
 }
 .paidPlan [data-role="cancelSubscription"] {
-	color: red;
+	color: #800;
+	border-color: black;
 	width: 200px;
 	float: none;
 }
@@ -1056,7 +1065,7 @@ iframe.embed {
 	border-color: red;
 }
 /* purchase mode */
-.paidPlan input[type=number] { display: none }
+.paidPlan input[type=number] { display: none; float: right; }
 form .paidPlan div { float: none; }
 form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; }
 .paidPlan .upgradeMenu div { padding: 5px 10px; }
diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs
index 086f513..19f6851 100644
--- a/views/partials/edit-subscription.ejs
+++ b/views/partials/edit-subscription.ejs
@@ -43,8 +43,8 @@
 						</tr>
 					</table>
 					<div class="billingMenu">
-						<button data-role="showLayoutsMenu">Buy layouts</button>
-						<button data-role="showPlanMenu">Upgrade your plan</button>
+						<button data-role="showLayoutsMenu">Buy layouts</button><br>
+						<button data-role="showPlanMenu">Upgrade your plan</button><br>
 						<button data-role="cancelSubscription">Cancel your subscription</button>
 					</div>
 					<div class="layoutsMenu">