Discource-C
/
discourse-subscriptions
mirror of https://github.com/discourse/discourse-subscriptions.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Adjust repurchase styles to look better (#53) 

Suggested here: https://meta.discourse.org/t/subscriptions-suggestions-for-interface-improvements/177970

Changes order and alignment so it makes a bit more sense in the UX of the /s route. Otherwise it looks too cluttered. This specifically impacted products that can be repurchased.
This commit is contained in:
Justin DiRose 2021-02-15 15:17:45 -06:00 committed by GitHub
parent cab037574c
commit ab9b81471b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/javascripts/discourse/templates/components/product-item.hbs
View File

@ -7,15 +7,14 @@
{{#if isLoggedIn}} {{#if isLoggedIn}}
<div class="product-purchase"> <div class="product-purchase">
{{#if product.repurchaseable}} {{#if product.repurchaseable}}
{{#if product.subscribed}}
<span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
{{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
{{i18n 'discourse_subscriptions.subscribe.go_to_billing'}}
{{/link-to}}
{{/if}}
{{#link-to "s.show" product.id class="btn btn-primary"}} {{#link-to "s.show" product.id class="btn btn-primary"}}
{{i18n 'discourse_subscriptions.subscribe.title'}} {{i18n 'discourse_subscriptions.subscribe.title'}}
{{/link-to}} {{/link-to}}
{{#if product.subscribed}}
{{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
{{i18n 'discourse_subscriptions.subscribe.view_past'}}
{{/link-to}}
{{/if}}
{{else}} {{else}}
{{#if product.subscribed}} {{#if product.subscribed}}
<span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span> <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>

8
assets/stylesheets/common/layout.scss
View File

@ -52,13 +52,17 @@
flex-grow: 1; flex-grow: 1;
} }
.product-purchase { .product-purchase {
align-self: baseline;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: row wrap;
justify-content: space-between;
.purchased { .purchased {
color: $success; color: $success;
} }
.billing-link { .billing-link {
align-self: flex-end;
@include breakpoint(large) {
margin-top: 1em;
}
font-size: $font-down-1; font-size: $font-down-1;
} }
} }

1
config/locales/client.en.yml
View File

@ -63,6 +63,7 @@ en:
confirm: Are you sure you want to cancel this subscription? confirm: Are you sure you want to cancel this subscription?
subscribe: subscribe:
title: Subscribe title: Subscribe
view_past: View past purchases
no_products: There are currently no products available. no_products: There are currently no products available.
unauthenticated: Log in or create an account to subscribe. unauthenticated: Log in or create an account to subscribe.
card: card: