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

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -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 />

ghost/admin/app/components/dashboard/v5/charts/anchor.hbs

@@ -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}}

ghost/admin/app/components/dashboard/v5/charts/mrr.hbs

@@ -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>

ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs

@@ -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">

ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs

@@ -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">

ghost/admin/app/components/dashboard/v5/charts/recents.hbs

@@ -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>

ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs

@@ -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>

ghost/admin/app/styles/app-dark.css

@@ -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;
 }

ghost/admin/app/styles/layouts/dashboard-v5.css

@@ -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;
+}