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

Fixed MRR summary formatting on Dashboard

Browse Source 
- added thousands separator to MRR summary data
- separated currency from amount for better readability
This commit is contained in:
Peter Zimon 2021-03-08 18:08:53 +01:00
parent 14fcd3c7fa
commit e489b1765a
3 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/app/controllers/dashboard.js
View File

@ -83,7 +83,9 @@ export default class DashboardController extends Controller {
const rangeStartMRR = dateValues.length ? dateValues[0] : 0;
const percentGrowth = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0;
this.mrrStatsData = {
current: `${getSymbol(currencyStats.currency)}${currentMRR}`,
currentAmount: currentMRR,
currency: getSymbol(currencyStats.currency),
currencyClass: (getSymbol(currencyStats.currency).length === 3 ? 'post' : 'pre'),
percentGrowth: percentGrowth.toFixed(1),
percentClass: (percentGrowth > 0 ? 'positive' : (percentGrowth < 0 ? 'negative' : '')),
options: {

8
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -264,6 +264,8 @@
}
.gh-dashboard-summary .data {
display: flex;
align-items: flex-start;
font-size: 3.9rem;
line-height: 4rem;
font-weight: 600;
@ -273,6 +275,12 @@
white-space: nowrap;
}
.gh-dashboard-summary .data .currency {
font-size: 0.66em;
line-height: 1.25em;
margin-right: 2px;
}
.gh-dashboard-summary.small .data {
font-size: 2.8rem;
letter-spacing: -0.1px;

2
ghost/admin/app/templates/dashboard.hbs
View File

@ -44,7 +44,7 @@
</p>
{{else}}
<div class="gh-dashboard-summary">
<div class="data">{{this.mrrStatsData.current}}</div>
<div class="data"><span class="currency {{this.mrrStatsData.currencyClass}}">{{this.mrrStatsData.currency}}</span>{{format-number this.mrrStatsData.currentAmount}}</div>
<div class="growth {{this.mrrStatsData.percentClass}}">{{this.mrrStatsData.percentGrowth}}%</div>
</div>
{{#if this.mrrStatsData}}