style(subscriptions): Gem layout feedback

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 <a href=\"/#/options/settings/notifications\">the settings</a> (requires login).",
     "unsubscribedTextOthers": "You won't receive any other email from Habitica.",

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<br/>Coming Soon",
     "organizationSub": "Private Organization",

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

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')} <strong>{{moment(user.purchased.plan.dateTerminated).format('MM/DD/YYYY')}}</strong>
           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')
+            .container-fluid.slight-vertical-padding
-              img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
+              .row.text-center
-            a.purchase(ng-click="Payments.amazonPayments.init({type: 'subscription', subscription:_subscription.key, coupon:_subscription.coupon})")
+                .col-xs-6
-              img(src='https://payments.amazon.com/gp/cba/button',alt=env.t('amazonPayments'))
+                  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')

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 class="Pet_Currency_Gem1x inline-gems"/>
+        span#TotalGemPrice.dashed-underline(popover=env.t('donateText1'),popover-trigger='mouseenter',popover-placement='bottom') = +20 <span class="Pet_Currency_Gem1x inline-gems"/>
   .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')
-                        &nbsp;{{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}&nbsp; 
+                        | &nbsp;{{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}&nbsp; 
                         =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')
+              span.dashed-underline(popover=env.t('donateText3'),popover-trigger='mouseenter',popover-placement='bottom')
-                  =env.t('donateText2')
+                =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')