Added dashboard UI skeleton

ghost/admin/app/routes/dashboard.js

@@ -1,4 +1,9 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 
 export default class DashboardRoute extends AuthenticatedRoute {
+    buildRouteInfoMetadata() {
+        return {
+            mainClasses: ['gh-main-wide']
+        };
+    }
 }

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

@@ -67,6 +67,7 @@
 @import "layouts/billing.css";
 @import "layouts/fullscreen-wizard.css";
 @import "layouts/post-preview.css";
+@import "layouts/dashboard.css";
 
 
 :root {

ghost/admin/app/styles/app.css

@@ -67,6 +67,7 @@
 @import "layouts/billing.css";
 @import "layouts/fullscreen-wizard.css";
 @import "layouts/post-preview.css";
+@import "layouts/dashboard.css";
 
 
 /* ---------------------------✈️----------------------------- */

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

@@ -0,0 +1,187 @@
+.gh-dashboard {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 1.8vw;
+}
+
+.gh-dashboard-area {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--whitegrey);
+    border-radius: 3px;
+    padding: 24px;
+}
+
+.gh-dashboard-area.grey {
+    background: var(--main-color-content-greybg);
+    color: var(--black);
+    border: none;
+}
+
+.gh-dashboard-header {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: .2px;
+    margin: -8px 0 4px;
+    padding: 0;
+    color: var(--black);
+}
+
+.gh-dashboard-summary.small .gh-dashboard-header {
+    margin-bottom: 6px;
+}
+
+.gh-dashboard-chart-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: stretch;
+    height: 100%;
+}
+
+.gh-dashboard-header + .gh-dashboard-chart-container {
+    margin-top: 8px;
+}
+
+.gh-dashboard-summary {
+    flex-basis: 220px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.gh-dashboard-summary.small {
+    flex-basis: 180px;
+}
+
+.gh-dashboard-summary .data-container {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 28px;
+}
+
+.gh-dashboard-summary .data-container:last-of-type {
+    margin-bottom: -8px;
+}
+
+.gh-dashboard-summary .data {
+    font-size: 3.9rem;
+    line-height: 4rem;
+    font-weight: 600;
+    color: var(--black);
+    letter-spacing: -0.1px;
+    line-height: 1;
+}
+
+.gh-dashboard-summary.small .data {
+    font-size: 2.8rem;
+    letter-spacing: -0.1px;
+}
+
+.gh-dashboard-summary .growth {
+    background: var(--lightgrey);
+    border-radius: 3px;
+    font-size: 1.8rem;
+    line-height: 1;
+    font-weight: 500;
+    color: var(--darkgrey);
+    padding: 6px 8px;
+    margin: 12px 0;
+}
+
+.gh-dashboard-summary.small .growth {
+    font-size: 1.3rem;
+    letter-spacing: 0;
+    padding: 2px 4px;
+    margin: 0 0 3px 10px;
+}
+
+.gh-dashboard-summary .growth.positive {
+    background: color-mod(var(--green) a(13%));
+    color: color-mod(var(--green) l(-5%));
+}
+
+.gh-dashboard-summary .growth.negative {
+    background: color-mod(var(--yellow) a(20%));
+    color: color-mod(var(--yellow) l(-8%));
+}
+
+.gh-dashboard-chart {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-dashboard-chart.small {
+    margin-top: -5px;
+}
+
+.gh-dashboard-list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-dashboard-chart.nodata {
+    border: 1px dashed var(--lightgrey);
+    font-size: 1.3rem;
+    color: var(--midlightgrey);
+}
+
+.gh-dashboard-chart.nodata {
+    font-size: 1.3rem;
+    color: var(--midlightgrey);
+}
+
+/* Specific content */
+.gh-dashboard-area.mrr {
+    grid-column: 1 / 3;
+}
+
+.gh-dashboard-area.total-members {
+    grid-column: 1 / 2;
+    grid-row: 2;
+}
+
+.gh-dashboard-area.mrr .gh-dashboard-chart {
+    height: 12vw;
+    min-height: 180px;
+    max-height: 250px;
+}
+
+.gh-dashboard-area.total-members .gh-dashboard-chart,
+.gh-dashboard-area.newsletter-open-rate .gh-dashboard-chart {
+    height: 6vw;
+    min-height: 80px;
+    max-height: 150px;
+}
+
+.gh-dashboard-area.newsletter-open-rate {
+    grid-column: 2 / 3;
+    grid-row: 2;
+}
+
+.gh-dashboard-area.top-members {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+}
+
+.gh-dashboard-area.activity-feed {
+    grid-column: 3 / 4;
+    grid-row: 3 / 4;
+}
+
+.gh-dashboard-area.mixed {
+    grid-column: 1 / 3;
+    grid-row: 3 / 4;
+    border: none;
+    border-radius: unset;
+    padding: 0;
+    align-items: flex-start;
+    justify-content: flex-start;
+}

ghost/admin/app/styles/layouts/main.css

@@ -62,6 +62,10 @@
     background: linear-gradient(315deg,var(--whitegrey-l2),var(--white));
 }
 
+.gh-main-wide .gh-canvas {
+    max-width: 1600px;
+}
+
 /*  Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
 .gh-main > section {
     width: 100%;

ghost/admin/app/styles/patterns/global.css

@@ -145,7 +145,7 @@
     --main-layout-section-vpadding: 3vw;
     
     /* Style values */
-    --border-radius: 4px;
+    --border-radius: 3px;
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
     --font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 

ghost/admin/app/templates/dashboard.hbs

@@ -5,9 +5,71 @@
         </h2>
     </GhCanvasHeader>
 
-    <section class="view-container">
+    <section class="view-container gh-dashboard">
+        <div class="gh-dashboard-area grey mrr">
+            <h4 class="gh-dashboard-header">MRR</h4>
+            <div class="gh-dashboard-chart-container">
+                <div class="gh-dashboard-summary">
+                    <div class="data">$359</div>
+                    <div class="growth positive">+1.8%</div>
+                </div>
+                <div class="gh-dashboard-chart nodata">
+                    No data
+                </div>
+            </div>
+        </div>
+        <div class="gh-dashboard-area grey total-members">
+            <div class="gh-dashboard-chart-container">
+                <div class="gh-dashboard-summary small">
+                    <h4 class="gh-dashboard-header">Total members</h4>
+                    <div class="data-container">
+                        <div class="data">1,842</div>
+                        <div class="growth positive">+1.8%</div>
+                    </div>
+                    <h4 class="gh-dashboard-header">Paid members</h4>
+                    <div class="data-container">
+                        <div class="data">733</div>
+                        <div class="growth negative">-2.8%</div>
+                    </div>
+                </div>
+                <div class="gh-dashboard-chart small nodata">
+                    No data
+                </div>
+            </div>
+        </div>
+        <div class="gh-dashboard-area grey newsletter-open-rate">
+            <div class="gh-dashboard-chart-container">
+                <div class="gh-dashboard-summary small">
+                    <h4 class="gh-dashboard-header">Newsletter open rate</h4>
+                    <div class="data-container">
+                        <div class="data">92%</div>
+                        <div class="growth positive">+29%</div>
+                    </div>
+                </div>
+                <div class="gh-dashboard-chart small nodata">
+                    No data
+                </div>
+            </div>
+        </div>
+        <div class="gh-dashboard-area grey top-members">
+            <h4 class="gh-dashboard-header">Top members</h4>
+            <div class="gh-dashboard-list nodata">
+                No data
+            </div>
+        </div>
+        <div class="gh-dashboard-area activity-feed">
+            <h4 class="gh-dashboard-header">Activity feed</h4>
+            <div class="gh-dashboard-list nodata">
+                No data
+            </div>
+        </div>
+
+        <div class="gh-dashboard-area mixed">
+            <div>Mixed content</div>
+
             {{#if (and this.session.user.isOwner (not this.feature.launchComplete))}}
                 <LinkTo @route="launch">Launch site - Finish setup</LinkTo>
             {{/if}}
+        </div>
     </section>
 </section>

ghost/admin/app/templates/designsandbox.hbs

@@ -60,10 +60,42 @@
             </div>
         </div>
 
+        <h2 class="mt8">Sections</h2>
+
+        <section class="gh-main-section">
+        <h4 class="gh-main-section-header small bn">Single column</h4>
+        <div class="gh-main-section-block">
+            <div class="gh-main-section-content">
+                <div>Column 1</div>
+            </div>
+        </div>
+        </section>
+
+        <section class="gh-main-section">
+        <h4 class="gh-main-section-header small bn">Section heading</h4>
+        <div class="gh-main-section-block">
+            <div class="gh-main-section-content columns-2">
+                <div>Column 1</div>
+                <div>Column 2</div>
+            </div>
+        </div>
+        </section>
+
+        <section class="gh-main-section columns-2">
+        <div class="gh-main-section-block">
+            <h4 class="gh-main-section-header small bn">Block 1</h4>
+            <div class="gh-main-section-content grey">Contents</div>
+        </div>
+        <div class="gh-main-section-block">
+            <h4 class="gh-main-section-header small bn">Block 2</h4>
+            <div class="gh-main-section-content grey">Contents</div>
+        </div>
+        </section>
+
         <h2 class="mt8">Setting area</h2>
 
         <div class="gh-main-section">
-            <h4 class="gh-main-section-header small bn">Section title</h4>
+            <h4 class="gh-main-section-header small bn">Section heading</h4>
             <div class="gh-expandable">
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">