From 2db1ef0f7ac6f72a7da675bf5c631f2d9840db0c Mon Sep 17 00:00:00 2001 From: Sabe Jones Date: Tue, 8 Dec 2015 15:56:33 -0500 Subject: [PATCH] style(subscriptions): Gem layout feedback --- common/locales/en/settings.json | 1 + common/locales/en/subscriber.json | 1 + website/public/css/shared.styl | 4 ++++ website/views/options/settings.jade | 19 +++++++++++------- website/views/shared/modals/buy-gems.jade | 24 +++++++++++------------ 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/common/locales/en/settings.json b/common/locales/en/settings.json index e36462e799..419ad59695 100644 --- a/common/locales/en/settings.json +++ b/common/locales/en/settings.json @@ -108,6 +108,7 @@ "invitedQuest": "Invited to Quest", "kickedGroup": "Kicked from group", "remindersToLogin": "Reminders to check in to Habitica", + "subscribeUsing": "Subscribe using", "unsubscribedSuccessfully": "Unsubscribed successfully!", "unsubscribedTextUsers": "You have successfully unsubscribed from all Habitica emails. You can enable only the emails you want to receive from the settings (requires login).", "unsubscribedTextOthers": "You won't receive any other email from Habitica.", diff --git a/common/locales/en/subscriber.json b/common/locales/en/subscriber.json index e9d05b2a9c..c580d91d04 100644 --- a/common/locales/en/subscriber.json +++ b/common/locales/en/subscriber.json @@ -28,6 +28,7 @@ "subscribed": "Subscribed", "manageSub": "Click to manage subscription", "cancelSub": "Cancel Subscription", + "canceledSubscription": "Canceled Subscription", "adminSub": "Administrator Subscriptions", "morePlans": "More Plans
Coming Soon", "organizationSub": "Private Organization", diff --git a/website/public/css/shared.styl b/website/public/css/shared.styl index 6aba201052..2e772ed26f 100644 --- a/website/public/css/shared.styl +++ b/website/public/css/shared.styl @@ -48,6 +48,10 @@ p.resubscribe a.purchase .buy-gems .well margin-top:15px +.noninteractive-button + padding: 0.5em + margin-right: 0.5em + // Required by angular-ui-bootstrap .nav, .pagination, .carousel, .panel-title a cursor: pointer diff --git a/website/views/options/settings.jade b/website/views/options/settings.jade index 7ae231c336..13458c0a68 100644 --- a/website/views/options/settings.jade +++ b/website/views/options/settings.jade @@ -278,7 +278,7 @@ mixin subPerks() ul li span.hint(popover=env.t('buyGemsGoldText', {gemCost: "{{Shared.planGemLimits.convRate}}", gemLimit: "{{Shared.planGemLimits.convCap}}"}),popover-trigger='mouseenter',popover-placement='right') #{env.t('buyGemsGold')}  - span.badge.badge-success(ng-show='_subscription.key!="basic_earned"') Cap raised to {{ [25 + user.purchased.plan.consecutive.gemCapExtra + Math.floor(Content.subscriptionBlocks[_subscription.key].months/3*5), 50] | min }} + span.badge.badge-success(ng-show='_subscription.key!="basic_earned"')=env.t('buyGemsGoldCap', {amount: '{{gemGoldCap(_subscription) | min }}'}) li span.hint(popover=env.t('retainHistoryText'),popover-trigger='mouseenter',popover-placement='right')=env.t('retainHistory') li @@ -336,6 +336,7 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template') .col-md-6 table.table.alert.alert-info(ng-if='user.purchased.plan.customerId') tr(ng-if='user.purchased.plan.dateTerminated'): td.alert.alert-warning + span.noninteractive-button.btn-danger=env.t('canceledSubscription') i.glyphicon.glyphicon-time | #{env.t('subCanceled')} {{moment(user.purchased.plan.dateTerminated).format('MM/DD/YYYY')}} tr(ng-if='!user.purchased.plan.dateTerminated'): td @@ -352,6 +353,7 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template') li #{env.t('gemCapExtra')} {{user.purchased.plan.consecutive.gemCapExtra}} li #{env.t('mysticHourglasses')} {{user.purchased.plan.consecutive.trinkets}} div(ng-if='!user.purchased.plan.customerId || (user.purchased.plan.customerId && user.purchased.plan.dateTerminated)') + h4(ng-if='(user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')= env.t("resubscribe") .form-group .radio(ng-repeat='block in Content.subscriptionBlocks | toArray | omit: "discount==true" | orderBy:"months"') label @@ -369,14 +371,17 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template') .form-group button.pull-right.btn.btn-small(type='button',ng-click='applyCoupon(_subscription.coupon)')= env.t("apply") - h4(ng-if='(user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')= env.t("resubscribe") p.resubscribe - small.muted Subscribe using + small.muted=env.t('subscribeUsing') a.purchase.btn.btn-primary(ng-click='Payments.showStripe({subscription:_subscription.key, coupon:_subscription.coupon})', ng-disabled='!_subscription.key')= env.t('card') - a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{user.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}', ng-disabled='!_subscription.key') - img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal')) - a.purchase(ng-click="Payments.amazonPayments.init({type: 'subscription', subscription:_subscription.key, coupon:_subscription.coupon})") - img(src='https://payments.amazon.com/gp/cba/button',alt=env.t('amazonPayments')) + .container-fluid.slight-vertical-padding + .row.text-center + .col-xs-6 + a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{user.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}', ng-disabled='!_subscription.key') + img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal')) + .col-xs-6 + a.purchase(ng-click="Payments.amazonPayments.init({type: 'subscription', subscription:_subscription.key, coupon:_subscription.coupon})") + img(src='https://payments.amazon.com/gp/cba/button',alt=env.t('amazonPayments')) div(ng-if='user.purchased.plan.customerId') .btn.btn-primary(ng-if='!user.purchased.plan.dateTerminated && user.purchased.plan.paymentMethod=="Stripe"', ng-click='Payments.showStripeEdit()')=env.t('subUpdateCard') diff --git a/website/views/shared/modals/buy-gems.jade b/website/views/shared/modals/buy-gems.jade index 5287bcd7a1..783c657f0b 100644 --- a/website/views/shared/modals/buy-gems.jade +++ b/website/views/shared/modals/buy-gems.jade @@ -3,7 +3,7 @@ mixin buyGemsDropdown() .row .col-md-4.col-md-offset-4.alert.alert-info $5  =env.t('USD') - span#TotalGemPrice.dashed-underline(popover=env.t('donateText1'),popover-trigger='mouseenter',popover-placement='right') = +20 + span#TotalGemPrice.dashed-underline(popover=env.t('donateText1'),popover-trigger='mouseenter',popover-placement='bottom') = +20 .container-fluid .row .col-md-10.col-md-offset-2 @@ -25,9 +25,6 @@ script(id='modals/buyGems.html', type='text/ng-template') .panel-body h3=env.t('buyGemsGold') p=env.t('maxBuyGems') - .well - h3=env.t('purchaseGemsSeparately') - +buyGemsDropdown() div(ng-if='user.purchased.plan.customerId && (user.purchased.plan.gemsBought < User.user.purchased.plan.consecutive.gemCapExtra + Shared.planGemLimits.convCap)') .panel.panel-default @@ -48,18 +45,25 @@ script(id='modals/buyGems.html', type='text/ng-template') .arrow .popover-content p=env.t('buyGemsAllow1') -  {{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}  + |  {{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}  =env.t('buyGemsAllow2') - + div(ng-if='user.purchased.plan.customerId') + .well + h3=env.t('purchaseGemsSeparately') + +buyGemsDropdown() div(ng-if='!user.purchased.plan.customerId') .panel.panel-default .panel-body h3=env.t('purchaseGems') .small - span.dashed-underline(popover=env.t('donateText3'),popover-trigger='mouseenter',popover-placement='right') - =env.t('donateText2') + span.dashed-underline(popover=env.t('donateText3'),popover-trigger='mouseenter',popover-placement='bottom') + =env.t('donateText2') +buyGemsDropdown() + .container-fluid + h3=env.t('freeGemsTitle') + p!=env.t('subFreeGemsHow') + .well h3 .small=env.t('buyGemsGoldTitle') @@ -67,9 +71,5 @@ script(id='modals/buyGems.html', type='text/ng-template') div(ng-include="'partials/options.settings.subscription.html'") - .container-fluid - h3=env.t('freeGemsTitle') - p!=env.t('subFreeGemsHow') - .modal-footer button.btn.btn-default(ng-click='$close()')=env.t('cancel')