tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Added in basic loading states for charts and some layout and copy tweaks 

refs: https://github.com/TryGhost/Team/issues/1531

- charts now have basic working loading states, could be improved though
- trying out staff picks description and layout tweaks
- lots of small design tweaks based on feedback
This commit is contained in:
James Morris 2022-04-27 17:25:46 +01:00
parent 64cd968459
commit cc8dc03485
9 changed files with 150 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/dashboard/dashboard-v5.hbs
View File

@ -14,11 +14,7 @@
{{/if}}
<Dashboard::V5::Charts::Recents />
{{/if}}
</section>
<section class="gh-dashboard5-breakout">
<div class="gh-dashboard5-inner">
<div class="gh-dashboard5-split">
<Dashboard::V5::Resources::Resources />
<Dashboard::V5::Resources::WhatsNew />
@ -28,7 +24,7 @@
<Dashboard::V5::Resources::StaffPicks />
</div>
<Dashboard::V5::Resources::Community />
</div>
{{/if}}
</section>
<Dashboard::V5::Prototype::ControlPanel />

37
app/components/dashboard/v5/charts/anchor.hbs
View File

@ -27,32 +27,33 @@
<div class="gh-dashboard5-hero {{unless this.hasPaidTiers 'is-solo'}}">
<div class="gh-dashboard5-chart gh-dashboard5-totals">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<EmberChart
@type="line"
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{200}} />
{{/if}}
</div>
<div id="gh-dashboard5-anchor-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div id="gh-dashboard5-anchor-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
-
</div>
<div class="gh-dashboard5-tooltip-value">
-
</div>
</div>
<div class="gh-dashboard5-chart-ticks">
<span id="gh-dashboard5-anchor-date-start"> </span>
<span id="gh-dashboard5-anchor-date-end"> </span>
</div>
{{/if}}
</div>
<div class="gh-dashboard5-chart-ticks">
<span id="gh-dashboard5-anchor-date-start">-</span>
<span id="gh-dashboard5-anchor-date-end">-</span>
</div>
</div>
{{#if this.hasPaidTiers}}

6
app/components/dashboard/v5/charts/mrr.hbs
View File

@ -1,7 +1,9 @@
<div class="gh-dashboard5-minichart gh-dashboard5-mrr">
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
@ -9,7 +11,7 @@
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{130}} />
@height={{110}} />
</div>
<div class="gh-dashboard5-chart-gradient"></div>

6
app/components/dashboard/v5/charts/paid-breakdown.hbs
View File

@ -1,7 +1,9 @@
<div class="gh-dashboard5-minichart gh-dashboard5-breakdown">
<div class="gh-dashboard5-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
@ -9,7 +11,7 @@
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{130}} />
@height={{110}} />
</div>
<div id="gh-dashboard5-breakdown-tooltip" class="gh-dashboard5-tooltip">

6
app/components/dashboard/v5/charts/paid-mix.hbs
View File

@ -1,7 +1,9 @@
<div class="gh-dashboard5-minichart gh-dashboard5-mix {{if this.isChartTiers 'is-tiers'}}">
<div class="gh-dashboard5-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
<div class="gh-dashboard5-chart-loading">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<div class="gh-dashboard5-chart-container">
<div class="gh-dashboard5-chart-box">
@ -9,7 +11,7 @@
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{130}} />
@height={{110}} />
</div>
<div id="gh-dashboard5-mix-tooltip" class="gh-dashboard5-tooltip">

12
app/components/dashboard/v5/charts/recents.hbs
View File

@ -28,15 +28,15 @@
</LinkTo>
</div>
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span>
{{!-- <span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span> --}}
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
<span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span>
</div>
<div class="gh-dashboard5-list-item-sub">
<span class="gh-dashboard5-rate-bar">
<span class="gh-dashboard5-metric-minivalue">75%</span>
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span>
{{!-- <span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span> --}}
{{!-- <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span> --}}
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">75%</span> --}}
{{!-- DEMO <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span> --}}
<span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
</span>
</div>
</div>

5
app/components/dashboard/v5/resources/staff-picks.hbs
View File

@ -2,6 +2,7 @@
<article class="gh-dashboard5-resource-box is-secondary">
<div class="gh-dashboard5-resource-title">
<h4>Staff Picks</h4>
<p>Hand picked stories from around the web, published with Ghost.</p>
</div>
<div class="gh-dashboard5-resource-body">
<div class="gh-dashboard5-list" {{did-insert this.load}}>
@ -10,7 +11,9 @@
{{#each this.staffPicks as |entry|}}
<div class="gh-dashboard5-list-item">
<a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
<span class="gh-dashboard5-list-link">{{entry.title}}</span>
<span class="gh-dashboard5-list-link">
<span>{{entry.title}}</span>
</span>
<div class="gh-dashboard5-resource-secondary">{{entry.creator}}</div>
</a>
</div>

5
app/styles/app-dark.css
View File

@ -1146,4 +1146,9 @@ kbd {
.gh-dashboard5-chart-gradient {
background: rgb(21,23,25);
background: linear-gradient(270deg, rgba(21,23,25,0) 0%, rgba(21,23,25,1) 100%);
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body,
.gh-dashboard5-resource-box.is-secondary .gh-dashboard5-resource-footer {
border-color: #2c2e32;
}

122
app/styles/layouts/dashboard-v5.css
View File

@ -219,7 +219,7 @@ Dashboard v5 Layout */
border-left: 1px solid var(--whitegrey);
padding: 4px 24px;
position: relative;
height: 130px;
height: 110px;
}
.gh-dashboard5-minichart .gh-dashboard5-data {
@ -267,8 +267,9 @@ Dashboard v5 Layout */
.gh-dashboard5-legend-item {
font-size: 1.3rem;
font-weight: 600;
line-height: 1.4em;
color: #626d79;
padding: 0 0 0 18px;
padding: 0 0 0 16px;
position: relative;
}
@ -279,8 +280,9 @@ Dashboard v5 Layout */
border-radius: 8px;
background: #8E42FF;
position: absolute;
top: 6px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.gh-dashboard5-legend-item:last-child::after {
@ -327,9 +329,9 @@ Dashboard v5 Layout */
}
.gh-dashboard5-select .ember-power-select-selected-item {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .3px;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -.1px;
line-height: 1em;
padding: 0;
color: var(--middarkgrey);
@ -339,16 +341,16 @@ Dashboard v5 Layout */
.gh-dashboard5-select-title {
display: flex;
justify-content: flex-start;
margin: -12px 0 -12px -12px;
margin: -12px 0 -12px -13px;
}
.gh-dashboard5-select-title .ember-power-select-selected-item {
font-size: 1.4rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1em;
margin: 0;
padding: 0;
letter-spacing: .2px;
letter-spacing: -0.3px;
white-space: nowrap;
color: var(--black);
}
@ -404,6 +406,17 @@ Dashboard v5 Chart */
align-items: center;
}
.gh-dashboard5-chart .gh-loading-spinner {
width: 24px;
height: 24px;
}
.gh-dashboard5-chart .gh-loading-spinner::before {
width: 4px;
height: 4px;
margin-top: 4px;
}
.gh-dashboard5-chart-ticks {
flex: none;
padding: 8px 24px 16px 0;
@ -453,7 +466,7 @@ Dashboard v5 Chart */
}
.gh-dashboard5-minicharts .gh-dashboard5-chart-box {
height: 130px;
height: 110px;
}
@ -508,14 +521,14 @@ Dashboard v5 Metric */
.gh-dashboard5-metric-label {
align-items: center;
font-size: 1.4rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1em;
margin: 0 0 10px;
margin: 0 0 8px;
padding: 0;
color: var(--black);
white-space: nowrap;
letter-spacing: .2px;
letter-spacing: -.3px;
}
.gh-dashboard5-metric.is-reverse .gh-dashboard5-metric-label {
@ -538,7 +551,7 @@ Dashboard v5 Metric */
align-items: flex-end;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -.1px;
letter-spacing: -.4px;
line-height: 1em;
white-space: nowrap;
margin: 0 0 12px;
@ -547,7 +560,8 @@ Dashboard v5 Metric */
}
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
font-size: 3rem;
font-size: 3.2rem;
letter-spacing: -0.8px;
margin-bottom: 0;
}
@ -1065,6 +1079,17 @@ Dashboard v5 What's New */
padding-top: 3px;
}
.gh-dashboard5-list-link {
display: flex;
width: 100%;
}
.gh-dashboard5-list-link span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.gh-dashboard5-whats-new .gh-dashboard5-list-item:first-child .gh-dashboard5-list-link::after {
display: inline-block;
content: "New";
@ -1195,6 +1220,11 @@ Dashboard v5 Staff Picks */
margin-left: -12px; /* layout adjustment */
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body {
border-top: 1px solid var(--whitegrey);
padding-top: 12px;
}
.gh-dashboard5-staff-picks .gh-dashboard5-list-header,
.gh-dashboard5-staff-picks .gh-dashboard5-list-item {
grid-template-columns: 100%;
@ -1223,6 +1253,7 @@ Dashboard v5 Staff Picks */
margin-bottom: 8px;
color: var(--black);
padding: 0;
min-width: 0;
}
.gh-dashboard5-staff-picks .gh-dashboard5-list-body {
@ -1232,10 +1263,15 @@ Dashboard v5 Staff Picks */
justify-content: space-between;
color: #7c8b9a;
font-size: 1.4rem;
padding: 8px 24px 16px 0;
padding: 0 32px 16px 0;
transition: all .3s ease-in-out;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body,
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer {
border-color: #dcdfe1;
}
/* ---------------------------------
Dashboard v5 Latest Newsletters */
@ -1314,6 +1350,44 @@ Dashboard v5 Misc */
font-weight: 600;
}
.gh-dashboard5-rate-bar {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.gh-dashboard5-rate-amount {
height: 6px;
border-radius: 2.5px;
background: var(--whitegrey);
overflow: hidden;
position: relative;
display: block;
flex-grow: 1;
margin-left: 20px;
}
.gh-dashboard5-rate-amount + span {
flex-shrink: 0;
padding-left: 15px;
}
.gh-dashboard5-rate-amount > span {
/* background: var(--purple); */
background: rgb(213,184,255);
background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
border-top-right-radius: 2.5px;
border-bottom-right-radius: 2.5px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
/* ---------------------------------
Dashboard v5 Resources */
@ -1352,13 +1426,13 @@ Dashboard v5 Resources */
.gh-dashboard5-resource-title {
display: flex;
flex-direction: row;
flex-direction: column;
margin: 0 0 20px;
}
.gh-dashboard5-resource-title h4 {
font-size: 1.2rem;
font-weight: 600;
font-weight: 700;
text-transform: uppercase;
color: var(--black);
margin: 0;
@ -1366,6 +1440,11 @@ Dashboard v5 Resources */
transition: color .3s;
}
.gh-dashboard5-resource-title p {
margin: 16px 0 0;
padding: 0 64px 0 0;
}
.gh-dashboard5-resource-body {
flex: 1;
display: flex;
@ -1379,7 +1458,7 @@ Dashboard v5 Resources */
}
.gh-dashboard5-resource-footer a {
font-weight: 600;
font-weight: 500;
}
.gh-dashboard5-resource-thumbnail {
@ -1500,3 +1579,8 @@ Dashboard v5 Tooltips */
.gh-dashboard5-totals {
margin-top: 24px;
}
.gh-dashboard5-totals .gh-dashboard5-loading,
.gh-dashboard5-totals .gh-dashboard5-chart-container {
height: 200px;
}