Added in a rudimentary resources box with staff picks at bottom

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

- added in a multi resources box that spans whole width that includes dynamic staff picks
- various other tweaks to styles

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

@@ -15,10 +15,10 @@
 
         <Dashboard::V5::Charts::Recents />
 
-        <div class="gh-dashboard5-split">
+        {{!-- <div class="gh-dashboard5-split"> --}}
-            <Dashboard::V5::Resources::Resources />
+            <Dashboard::V5::Resources::Multi />
-            <Dashboard::V5::Resources::Community />
+            {{!-- <Dashboard::V5::Resources::Community /> --}}
-        </div>
+        {{!-- </div>      --}}
 
         {{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
         {{!-- <Dashboard::V5::Resources::StaffPicks /> --}}

ghost/admin/app/components/dashboard/v5/resources/multi.hbs

@@ -0,0 +1,31 @@
+<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-multi">
+    <article class="gh-dashboard5-box is-faded">
+
+        <div class="gh-dashboard5-thirds">
+
+            <div class="gh-dashboard5-thirds-main">
+                <div class="gh-dashboard5-list-header">
+                    <Dashboard::v5::Parts::Metric @label="Resources" /> 
+                </div>
+                <div class="gh-members-help-card">
+                    <div class="gh-members-help-content">
+                        <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
+                        <div class="text">
+                            <h3>Building your audience with subscriber signups</h3>
+                            <p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
+                            <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-link">Start building &rarr;</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="gh-dashboard5-articles-footer">
+                    <a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources &rarr;</a>
+                </div>
+            </div>
+            <div class="gh-dashboard5-thirds-sub">
+                <Dashboard::v5::Resources::StaffPicks />
+            </div>
+
+        </div>
+
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/multi.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import fetch from 'fetch';
+import {action} from '@ember/object';
+import {task} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
+
+const RSS_FEED_URL = 'https://zapier.com/engine/rss/678920/ghoststaffpicks';
+const LIMIT = 3;
+
+export default class Multi extends Component {
+    @tracked loading = null;
+    @tracked error = null;
+    @tracked staffPicks = null;
+
+    @action
+    load() {
+        this.loading = true;
+        this.fetch.perform().then(() => {
+            this.loading = false;
+        }, (error) => {
+            this.error = error;
+            this.loading = false;
+        });
+    }
+
+    @task
+    *fetch() {
+        let response = yield fetch(RSS_FEED_URL);
+        if (!response.ok) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch staff picks', {response});
+            this.error = 'Failed to fetch';
+            return;
+        }
+        
+        const str = yield response.text();
+        const document = new DOMParser().parseFromString(str, 'text/xml');
+
+        const items = document.querySelectorAll('channel > item');
+        this.staffPicks = [];
+        
+        for (let index = 0; index < items.length && index < LIMIT; index += 1) {
+            const item = items[index];
+            const title = item.getElementsByTagName('title')[0].textContent;
+            const link = item.getElementsByTagName('link')[0].textContent;
+            const creator = item.getElementsByTagName('dc:creator')[0].textContent;
+
+            const entry = {
+                title,
+                link,
+                creator
+            };
+            
+            this.staffPicks.push(entry);
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
-<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-staff-picks" {{did-insert this.load}}>
+{{!-- <section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-staff-picks" {{did-insert this.load}}>
-    <article class="gh-dashboard5-box is-secondary">
+    <article class="gh-dashboard5-box is-secondary"> --}}
-        <div class="gh-dashboard5-list">
+        <div class="gh-dashboard5-staff-picks gh-dashboard5-list" {{did-insert this.load}}>
             {{#if (not (or this.loading this.error))}}
                 <div class="gh-dashboard5-list-header">
                     <Dashboard::v5::Parts::Metric
@@ -22,9 +22,9 @@
                     {{/each}}
                 </div>
                 <div class="gh-dashboard5-list-footer">
-                    <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
+                    <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">See all picks →</a>
                 </div>
             {{/if}}
         </div>
-    </article>
+    {{!-- </article>
-</section>
+</section> --}}

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

@@ -103,6 +103,25 @@ Dashboard v5 Layout */
     grid-template-columns: 2fr 1fr;
 }
 
+.gh-dashboard5-thirds {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.gh-dashboard5-thirds .gh-dashboard5-thirds-main {
+    flex: 70%;
+    padding-right: 32px;
+    display: flex;
+    flex-direction: column;
+}
+
+.gh-dashboard5-thirds .gh-dashboard5-thirds-sub {
+    flex: 30%;
+    display: flex;
+    flex-direction: column;
+}
+
 .gh-dashboard5-title {
     display: flex;
     flex-direction: row;
@@ -149,9 +168,8 @@ Dashboard v5 Layout */
 }
 
 .gh-dashboard5-box.is-faded {
-    background: rgb(239,240,243);
+    background: rgb(240,240,240);
-    background: linear-gradient(310deg, rgba(239,240,243,1) 0%, rgba(250,251,252,1) 100%);
+    background: linear-gradient(310deg, rgba(249,249,249,1) 0%, rgba(254,254,254,1) 100%);
-
 }
 
 .gh-dashboard5-box.is-image {
@@ -231,7 +249,7 @@ Dashboard v5 Layout */
 
 .gh-dashboard5-select .ember-power-select-selected-item {
     font-size: 1.2rem;
-    font-weight: 600;
+    font-weight: 700;
     letter-spacing: .3px;
     line-height: 1em;
     padding: 0;
@@ -247,7 +265,7 @@ Dashboard v5 Layout */
 
 .gh-dashboard5-select-title .ember-power-select-selected-item {
     font-size: 1.4rem;
-    font-weight: 600;
+    font-weight: 700;
     line-height: 1em;
     margin: 0;
     padding: 0;
@@ -354,7 +372,7 @@ Dashboard v5 Metric */
 .gh-dashboard5-metric-label {
     align-items: center;
     font-size: 1.4rem;
-    font-weight: 600;
+    font-weight: 700;
     line-height: 1em;
     margin: 0 0 10px;
     padding: 0;
@@ -374,7 +392,7 @@ Dashboard v5 Metric */
 
 .gh-dashboard5-metric-label.is-secondary {
     font-size: 1.3rem;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--middarkgrey);
 }
 
@@ -409,7 +427,7 @@ Dashboard v5 Metric */
 
 .gh-dashboard5-metric-minivalue {
     font-size: 1.5rem;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .gh-dashboard5-metric-extra {
@@ -477,7 +495,7 @@ Dashboard v5 List */
 }
 
 .gh-dashboard5-list-item a {
-    font-weight: 500;
+    font-weight: 600;
     font-size: 1.5rem;
     color: var(--darkgrey);
     padding: 0 64px 0 0;
@@ -516,7 +534,7 @@ Dashboard v5 List */
     font-size: 1.3rem;
     color: var(--midlightgrey);
     text-align: right;
-    padding: 3px 0 0 0;
+    padding: 1px 0 0 0;
     white-space: nowrap;
 }
 
@@ -968,6 +986,63 @@ Dashboard v5 Section Resources */
 }
 
 
+
+/* --------------------------------- 
+Dashboard v5 Section Multi */
+
+.gh-dashboard5-multi {
+    position: relative;
+}
+
+.gh-dashboard5-multi .gh-dashboard5-articles {
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    margin-top: 16px;
+}
+
+.gh-dashboard5-multi .gh-dashboard5-articles-footer {
+    margin-top: 20px;
+}
+
+.gh-dashboard5-multi .gh-members-help-card {
+    flex: 1;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    background: var(--white);
+    border-radius: 3px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 7%);
+    color: #7c8b9a;
+    font-size: 1.4rem;
+    transition: none;
+    margin-right: 16px;
+}
+
+.gh-dashboard5-multi .gh-members-help-card:hover {
+    transform: translate(0);
+}
+
+.gh-dashboard5-multi .gh-dashboard5-list-header {
+    padding-bottom: 12px;
+}
+
+.gh-dashboard5-multi .gh-dashboard5-subtitle h4 {
+    color: var(--darkgrey);
+}
+
+.gh-dashboard5-multi .gh-dashboard5-box {
+    padding-top: 32px;
+}
+
+.gh-dashboard5-multi .gh-dashboard5-thirds-main .gh-dashboard5-list-header {
+    border-bottom: 0 none;
+}
+
+
 /* --------------------------------- 
 Dashboard v5 Section Staff Picks */
 
@@ -980,15 +1055,40 @@ Dashboard v5 Section Staff Picks */
     grid-template-columns: 100%;
 }
 
+.gh-dashboard5-staff-picks .gh-dashboard5-list-item {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.gh-dashboard5-staff-picks .gh-dashboard5-list-item:first-child {
+    padding-top: 8px;
+}
+
+.gh-dashboard5-staff-picks .gh-dashboard5-list-item:last-child {
+    padding-bottom: 0;
+}
+
 .gh-dashboard5-staff-picks .gh-dashboard5-list-item a {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    font-size: 1.65rem;
     font-weight: 600;
+    font-size: 1.4rem;
     line-height: 1.4em;
     margin-bottom: 8px;
     color: var(--black);
+    padding: 0;
+}
+
+.gh-dashboard5-staff-picks .gh-dashboard5-list-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    color: #7c8b9a;
+    font-size: 1.4rem;
+    padding: 16px 64px 16px 0;
+    transition: all .3s ease-in-out;
 }