TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-20 17:17:36 +03:00
Code Issues Projects Releases Wiki Activity

Added free trial indicator to tier card in Admin

Browse Source 
refs. https://github.com/TryGhost/Team/issues/1806

- free trial indicator - which helps users identify tiers easier - was missing on tier cards in Settings / Membership in the Admin
This commit is contained in:
Peter Zimon 2022-08-16 14:15:31 +02:00
parent e4d02657ee
commit 1b6b905dcd
4 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ghost/admin/app/components/gh-tier-card.hbs
View File

@ -36,22 +36,29 @@
</div>
{{/if}}
{{#if (eq @tier.type "paid" )}}
<div class="gh-tier-card-block">
<div class="gh-tier-card-block price-block">
<div class="gh-tier-price-container">
<div class="gh-tier-card-price" data-test-monthly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
<span class="amount">{{gh-price-amount @tier.monthlyPrice}}</span>
<div class="gh-tier-price-cards">
<div class="gh-tier-card-price" data-test-monthly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
<span class="amount">{{gh-price-amount @tier.monthlyPrice}}</span>
</div>
<div class="period">Monthly</div>
</div>
<div class="period">Monthly</div>
</div>
<div class="gh-tier-card-price" data-test-yearly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
<span class="amount">{{gh-price-amount @tier.yearlyPrice}}</span>
<div class="gh-tier-card-price" data-test-yearly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
<span class="amount">{{gh-price-amount @tier.yearlyPrice}}</span>
</div>
<div class="period">Yearly</div>
</div>
<div class="period">Yearly</div>
</div>
{{#if (and (feature 'freeTrial') this.isFreeTrialEnabled)}}
<div class="gh-tier-free-trial-label">
<span class="gh-tier-free-trial-days">{{this.tierTrialDays}} day</span> free trial
</div>
{{/if}}
</div>
</div>
{{/if}}

8
ghost/admin/app/components/gh-tier-card.js
View File

@ -45,6 +45,14 @@ export default class extends Component {
return this.tier.type === 'free';
}
get isFreeTrialEnabled() {
return this.tier.trialDays > 0;
}
get tierTrialDays() {
return this.tier.trialDays;
}
@action
async openEditTier(tier) {
this.args.openEditTier(tier);

35
ghost/admin/app/styles/layouts/tiers.css
View File

@ -139,9 +139,21 @@
flex-grow: 1;
}
.gh-tier-card-block.price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 0 70px 0 20px;
}
.gh-tier-price-container {
display: flex;
margin: 0 60px 0 20px;
flex-direction: column;
border: 1px solid var(--whitegrey);
}
.gh-tier-price-cards {
display: inline-flex;
justify-content: flex-end;
}
@ -150,16 +162,31 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 12px 2px 0;
font-size: 1.3rem;
color: var(--midgrey);
padding: 12px 8px;
border: 1px solid var(--whitegrey);
padding: 12px 8px 14px;
border-radius: 3px;
min-width: 90px;
min-height: 66px;
}
.gh-tier-free-trial-label {
text-align: center;
font-size: 1.25rem;
color: var(--midgrey);
padding: 4px;
border-top: 1px solid var(--whitegrey);
}
.gh-tier-free-trial-days {
font-weight: 600;
color: var(--darkgrey);
}
.gh-tier-card-price:first-of-type {
border-right: 1px solid var(--whitegrey);
}
.gh-tier-card-price .currency-symbol,
.gh-tier-card-price .amount,
.gh-tier-card-price .currency,

2
ghost/core/content/themes/casper

@ -1 +1 @@
Subproject commit 2aaf7441af62c6814685a4876c4ba0fbfaa35dab
Subproject commit e2096ee731d071d9a32b4e0fab84272b14ba7203