Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added more tweaks for Dashboard 5.0

Browse source 
refs: https://github.com/TryGhost/Team/issues/1445

- includes more tweaks
- adds on to recent merged conflicts commit
This commit is contained in:
James Morris 2022-03-24 15:06:17 +00:00
parent 5134e0822d
commit 1fc31fa60d
5 changed files with 85 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
ghost/admin/app/components/dashboard/dashboard-v5.hbs
View file

@ -1,4 +1,4 @@
<section {{did-insert this.onInsert}}>
<section {{did-insert this.onInsert}} class="gh-dashboard5">
{{#if this.isLoading }}
<GhLoadingSpinner />
@ -9,20 +9,23 @@
</section>
<section class="gh-dashboard5-section">
<div class="prototype-selection">
<PowerSelect
@selected={{this.selectedDaysOption}}
@options={{this.daysOptions}}
@searchEnabled={{false}}
@onChange={{this.onDaysChange}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown"
@matchTriggerWidth={{false}}
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
<div class="gh-dashboard5-header">
<h3>Members</h3>
<div class="prototype-selection">
<PowerSelect
@selected={{this.selectedDaysOption}}
@options={{this.daysOptions}}
@searchEnabled={{false}}
@onChange={{this.onDaysChange}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown"
@matchTriggerWidth={{false}}
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
</div>
<div class="gh-dashboard5-growth">
@ -60,20 +63,28 @@
</section>
{{/if}}
<section class="gh-dashboard5-section">
<h2>Recent posts</h2>
<article class="gh-dashboard5-box">
Recent posts
</article>
<section class="gh-dashboard5-split">
<section class="gh-dashboard5-section">
<div class="gh-dashboard5-header">
<h3>Recent posts</h3>
</div>
<article class="gh-dashboard5-box">
<!-- TODO: insert module -->
</article>
</section>
<section class="gh-dashboard5-section">
<div class="gh-dashboard5-header">
<h3>Recent activity</h3>
</div>
<Dashboard::LatestMemberActivity />
</section>
</section>
<section class="gh-dashboard5-section">
<h2>Activity</h2>
<Dashboard::LatestMemberActivity />
</section>
<section class="gh-dashboard5-section">
<h2>Resources</h2>
<div class="gh-dashboard5-header">
<h3>Resources</h3>
</div>
<article class="gh-dashboard5-box">
<Dashboard::V5::ResourceGeneral />
</article>

4
ghost/admin/app/components/dashboard/v5/chart-email.hbs
View file

@ -1,4 +1,6 @@
<h3 {{did-insert this.loadCharts}}>Email</h3>
<div class="gh-dashboard5-header">
<h3 {{did-insert this.loadCharts}}>Email</h3>
</div>
<div class="gh-dashboard5-container gh-dashboard5-email">
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">Newsletter subscribers</h4>

33
ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
View file

@ -1,19 +1,20 @@
<h2 {{did-insert this.loadCharts}}>Engagement</h2>
<div class="prototype-selection">
<PowerSelect
@selected={{this.selectedStatusOption}}
@options={{this.statusOptions}}
@searchEnabled={{false}}
@onChange={{this.onSwitchStatus}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown"
@matchTriggerWidth={{false}}
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
<div class="gh-dashboard5-header">
<h3 {{did-insert this.loadCharts}}>Engagement</h3>
<div class="prototype-selection">
<PowerSelect
@selected={{this.selectedStatusOption}}
@options={{this.statusOptions}}
@searchEnabled={{false}}
@onChange={{this.onSwitchStatus}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown"
@matchTriggerWidth={{false}}
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
</div>
<div class="gh-dashboard5-container">

4
ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs
View file

@ -1,4 +1,6 @@
<h3 {{did-insert this.loadCharts}}>Overview</h3>
<div class="gh-dashboard5-header">
<h3 {{did-insert this.loadCharts}}>Overview</h3>
</div>
<div class="gh-dashboard5-container">
<div class="gh-dashboard5-box">
<h4 class="gh-dashboard5-metric">{{gh-pluralize this.totalMembers "Total member" without-count=true}}</h4>

30
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -1138,13 +1138,16 @@ a.gh-dashboard-container {
font-size: 24px;
}
.gh-dashboard5 h3 {
margin: 0 0 12px;
.gh-dashboard5-split {
display: flex;
gap: 24px;
}
.gh-dashboard5-section {
margin-bottom: 40px;
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 48px;
}
.gh-dashboard5-container {
@ -1189,6 +1192,7 @@ a.gh-dashboard-container {
letter-spacing: -.1px;
line-height: 1;
white-space: nowrap;
margin: 0 0 4px;
}
.gh-dashboard5-number.is-small {
@ -1202,7 +1206,7 @@ a.gh-dashboard-container {
text-transform: uppercase;
font-weight: 500;
letter-spacing: .2px;
margin: 0 0 4px;
margin: 0 0 8px;
padding: 0;
color: var(--black);
}
@ -1238,6 +1242,14 @@ a.gh-dashboard-container {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 8px;
min-height: 34px;
}
.gh-dashboard5-header h3 {
font-size: 1.6rem;
margin: 0;
padding: 0;
}
.gh-dashboard5-selection {
@ -1314,4 +1326,12 @@ a.gh-dashboard-container {
grid-row: 3;
border-radius: 0 0 3px 0;
border-width: 0 1px 1px 0;
}
.gh-dashboard5 .gh-dashboard-box {
margin-bottom: 0;
}
.gh-dashboard5 .gh-dashboard-header-container {
display: none;
}