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

Added placeholder components and skeleton for dashboard 5 prototype

Browse Source 
refs https://github.com/TryGhost/Team/issues/1432
This commit is contained in:
Simon Backx 2022-03-22 12:11:00 +01:00
parent 96d02a208d
commit 8937e09436
8 changed files with 159 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ghost/admin/app/components/dashboard/dashboard-v5.hbs
View File

@ -1,19 +1,60 @@
<section>
{{#if this.areMembersEnabled}}
<Dashboard::MembersGraphs />
<section class="prototype-section">
<Dashboard::V5::MembersCounts />
</section>
{{#if this.hasPaidTiers}}
<section class="prototype-section">
<article class="gh-dashboard-box">
These are some paid members related graphs
Dropdown: 7d/30d/90d/all time
</article>
{{/if}}
<article class="gh-dashboard-box">
Total members graph
</article>
{{#if this.hasPaidTiers}}
<article class="gh-dashboard-box">
MRR graph
</article>
<article class="gh-dashboard-box">
Total paid graph
</article>
<article class="gh-dashboard-box">
Paid members graph (new, canceled)
</article>
<article class="gh-dashboard-box">
Paid mix with cadence or tiers segmented control
</article>
{{/if}}
</section>
<section class="prototype-section">
<Dashboard::V5::MembersEngagement />
</section>
{{/if}}
{{#if this.areNewslettersEnabled}}
<article class="gh-dashboard-box">
These are newsletter related graphs
</article>
<section class="prototype-section">
<Dashboard::V5::MembersEmail />
</section>
{{/if}}
<section class="prototype-section">
<h2>Recent posts</h2>
<article class="gh-dashboard-box">
Recent posts
</article>
</section>
<section class="prototype-section">
<h2>Activity</h2>
<article class="gh-dashboard-box">
Activity feed
</article>
</section>
</section>
<div class="gh-main-section prototype-panel">

16
ghost/admin/app/components/dashboard/v5/members-counts.hbs Normal file
View File

@ -0,0 +1,16 @@
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">10.000</div>
<div>Total members</div>
</div>
<div class="prototype-box">
<div class="number">1.500</div>
<div>Paid members</div>
</div>
<div class="prototype-box">
<div class="number">8.500</div>
<div>Free members</div>
</div>
</div>

7
ghost/admin/app/components/dashboard/v5/members-counts.js Normal file
View File

@ -0,0 +1,7 @@
import Component from '@glimmer/component';
export default class MembersCounts extends Component {
get placeholderGetter() {
return '9.150';
}
}

20
ghost/admin/app/components/dashboard/v5/members-email.hbs Normal file
View File

@ -0,0 +1,20 @@
<h2>Email</h2>
<div class="prototype-counts">
<div class="prototype-counts col">
<div class="prototype-box">
<div class="number">{{this.subscribersCount}}</div>
<div>Newsletter Subscribers</div>
</div>
<div class="prototype-box">
<div class="number">40.3k</div>
<div>Emails sent in the past 30 days</div>
</div>
</div>
<div class="prototype-box">
Email open rate graph
</div>
</div>

7
ghost/admin/app/components/dashboard/v5/members-email.js Normal file
View File

@ -0,0 +1,7 @@
import Component from '@glimmer/component';
export default class MembersEmail extends Component {
get subscribersCount() {
return '9.150';
}
}

13
ghost/admin/app/components/dashboard/v5/members-engagement.hbs Normal file
View File

@ -0,0 +1,13 @@
<h2>Engagement</h2>
<div class="prototype-counts">
<div class="prototype-box">
<div class="number">67%</div>
<div>Engaged in past 30 days</div>
</div>
<div class="prototype-box">
<div class="number">31%</div>
<div>Engaged in past 7 days</div>
</div>
</div>

7
ghost/admin/app/components/dashboard/v5/members-engagement.js Normal file
View File

@ -0,0 +1,7 @@
import Component from '@glimmer/component';
export default class MembersEngagement extends Component {
get placeholderGetter() {
return '9.150';
}
}

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

@ -1078,5 +1078,44 @@ a.gh-dashboard-container {
/* Temporary section for prototype convenience */
.prototype-panel {
/* Keep it out of view */
margin-top: 100vh;
}
margin-top: 50vh;
}
.prototype-counts {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 28px;
}
.prototype-section {
margin-bottom: 40px;
}
.prototype-section > h2 {
font-size: 1.65rem;
font-weight: 600;
line-height: 1.4em;
margin-bottom: 8px;
color: var(--black);
}
.prototype-counts.col {
flex-direction: column;
}
.prototype-counts > * {
flex-grow: 1;
min-width: 0;
flex-basis: 0;
}
.prototype-box {
border: 1px solid #ebeef0;
padding: 28px;
}
.prototype-box .number {
font-size: 24px;
}