diff options
| -rw-r--r-- | public/assets/javascripts/ui/site/EditSubscriptionModal.js | 4 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 27 | ||||
| -rw-r--r-- | views/partials/edit-subscription.ejs | 27 |
3 files changed, 44 insertions, 14 deletions
diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 28d699c..0d54d8f 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -30,7 +30,7 @@ var EditSubscriptionModal = ModalView.extend({ this.$billingInterval = this.$("[data-role=billingInterval]") - this.$planType = this.$("[data-role=planType]") + this.$planName = this.$("[data-role=planName]") this.$planCost = this.$("[data-role=planCost]") this.$planTotal = this.$("[data-role=planTotal]") @@ -114,7 +114,7 @@ var EditSubscriptionModal = ModalView.extend({ var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ] var totals = this.calculateTotals(subscriber, plan) - this.$planType.html ( plan.name ) + this.$planName.html ( plan.name ) this.$planCost.toDollars ( totals.plan_price ) this.$billingInterval.html ( totals.is_monthly ? "mo." : "yr." ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4826aef..bedf2c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1000,6 +1000,33 @@ iframe.embed { from { transform: rotate(0deg); } to { transform: rotate(720deg); } } +.paidPlan { + text-align: left; + font-size: 14px; +} +.planInfo { + margin: 10px 0; + width: 100%; + padding: 0; +} +.planInfo td, .planInfo th { + text-align: left; + padding: 10px 3px; + margin: 0; +} +.planInfo td:nth-child(2), +.planInfo th:nth-child(2), +.planInfo td:nth-child(3), +.planInfo td:nth-child(4), +.planInfo th:nth-child(3) { + text-align: right; +} +.planInfo [data-role="billingInterval"] { + font-size: 10px; +} +.totalRow td:nth-child(4) { + border-top: 1px solid; +} /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index cfd5728..266d43b 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -16,29 +16,32 @@ </li> <li class="paidPlan"> Your current plan level is <span data-role="planName"></span> - <table> + <table class="planInfo"> <tr class="planRow"> - <td><span data-role="planName"></span></td> + <th><span data-role="planName"></span></th> <td></td> - <td>@ $<span data-role="planCost"></span>/<span data-role="billingInterval"></span></td> + <td></td> + <td>$<span data-role="planCost"></span>/<span data-role="billingInterval"></span></td> </tr> <tr class="basicLayoutRow"> - <td>Additional Basic layouts</td> + <th>Additional Basic layouts</th> <td><span data-role="basicLayoutQuantity"></span></td> - <td>@ $<span data-role="basicLayoutCost"></span>/<span data-role="billingInterval"></span></td> - <td>$<span data-role="basicLayoutTotal"></span></td> + <td>each $<span data-role="basicLayoutCost"></span>/<span data-role="billingInterval"></span></td> + <td>$<span data-role="basicLayoutTotal"></span>/<span data-role="billingInterval"></span></td> <td>Buy more</td> </tr> <tr class="proLayoutRow"> - <td>Additional Pro layouts</td> + <th>Additional Pro layouts</th> <td><span data-role="proLayoutQuantity"></span></td> - <td>@ $<span data-role="proLayoutCost"></span>/<span data-role="billingInterval"></span></td> - <td>$<span data-role="proLayoutTotal"></span></td> + <td>@ $<span data-role="proLayoutCost"></span> ...</td> + <td>$<span data-role="proLayoutTotal"></span>/<span data-role="billingInterval"></span></td> + <td>Buy more</td> </tr> <tr class="totalRow"> - <td>Total</td> - <td></td><td></td> - <td>$<span data-role="planTotal"></span></td> + <td></td> + <td></td> + <th>Total</th> + <td>$<span data-role="planTotal"></span>/<span data-role="billingInterval"></span></td> </tr> </table> <button data-role="upgradeSubscription">Upgrade your subscription</button> |