From bfb02d44584282a758e18e2fbb0899dcc39b7b61 Mon Sep 17 00:00:00 2001 From: James Morris Date: Fri, 22 Apr 2022 17:47:48 +0100 Subject: [PATCH] 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 --- .../app/components/dashboard/dashboard-v5.hbs | 8 +- .../dashboard/v5/resources/multi.hbs | 31 +++++ .../dashboard/v5/resources/multi.js | 57 ++++++++ .../dashboard/v5/resources/staff-picks.hbs | 12 +- .../admin/app/styles/layouts/dashboard-v5.css | 122 ++++++++++++++++-- 5 files changed, 209 insertions(+), 21 deletions(-) create mode 100644 ghost/admin/app/components/dashboard/v5/resources/multi.hbs create mode 100644 ghost/admin/app/components/dashboard/v5/resources/multi.js diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index 24fd75ff0e..abebe31f20 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -15,10 +15,10 @@ -
- - -
+ {{!--
--}} + + {{!-- --}} + {{!--
--}} {{!-- --}} {{!-- --}} diff --git a/ghost/admin/app/components/dashboard/v5/resources/multi.hbs b/ghost/admin/app/components/dashboard/v5/resources/multi.hbs new file mode 100644 index 0000000000..8ee9d89966 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/resources/multi.hbs @@ -0,0 +1,31 @@ +
+
+ +
+ +
+
+ +
+
+
+
+
+

Building your audience with subscriber signups

+

Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.

+ Start building → +
+
+
+
+ See all resources → +
+
+
+ +
+ +
+ +
+
diff --git a/ghost/admin/app/components/dashboard/v5/resources/multi.js b/ghost/admin/app/components/dashboard/v5/resources/multi.js new file mode 100644 index 0000000000..45498e471c --- /dev/null +++ b/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); + } + } +} diff --git a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs index 32cb9665cd..0b5ccfe01f 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs @@ -1,6 +1,6 @@ -
- +
--}} diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index 1e26b32370..3b6efa82ac 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/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: linear-gradient(310deg, rgba(239,240,243,1) 0%, rgba(250,251,252,1) 100%); - + background: rgb(240,240,240); + 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; }