From 0fda84d71ed6696e47fe8693478b6fae1fb6d0cb Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 5 May 2022 15:15:58 +0100 Subject: [PATCH] Added in a more responsive new Dashboard refs: https://github.com/TryGhost/Team/issues/1531 - any triple column collapses down to one and sits underneath each other - the mini charts' legends disappear and they also then go full width underneath each other - the resources module loses it's thumbnail at smaller widths - the 2/3 resources column goes to 1/2 - everything worth having has truncation that is only seen at very small sizes --- .../dashboard/v5/charts/recent-activity.hbs | 52 --- .../dashboard/v5/charts/recent-activity.js | 23 -- .../dashboard/v5/charts/recent-posts.hbs | 33 -- .../dashboard/v5/charts/recent-posts.js | 15 - .../dashboard/v5/resources/newsletter.hbs | 3 +- .../dashboard/v5/resources/resources.hbs | 14 +- .../dashboard/v5/resources/staff-picks.hbs | 4 +- .../dashboard/v5/resources/whats-new.hbs | 21 +- .../admin/app/styles/layouts/dashboard-v5.css | 334 ++++++++++-------- 9 files changed, 204 insertions(+), 295 deletions(-) delete mode 100644 ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/charts/recent-activity.js delete mode 100644 ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/charts/recent-posts.js diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs b/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs deleted file mode 100644 index 4a441974c4..0000000000 --- a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs +++ /dev/null @@ -1,52 +0,0 @@ -
-
-
-
- -
-
- {{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}} - {{#if eventsFetcher.isError}} -
-

There was an error loading events

- {{#if eventsFetcher.errorMessage}} - {{eventsFetcher.errorMessage}} - {{/if}} -
- {{/if}} - {{#if eventsFetcher.isLoading}} -
-

Loading...

-
- {{else}} - {{#if eventsFetcher.data}} - {{#each eventsFetcher.data as |event|}} - {{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}} -
- - - {{parsedEvent.subject}} - - {{capitalize-first-letter parsedEvent.action}} - {{parsedEvent.object}} - {{parsedEvent.info}} - - - {{moment-from-now parsedEvent.timestamp}} -
- {{/let}} - {{/each}} - {{else}} -
-

No activity yet.

-
- {{/if}} - {{/if}} - {{/let}} -
-
- See all activity → -
-
-
-
diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.js b/ghost/admin/app/components/dashboard/v5/charts/recent-activity.js deleted file mode 100644 index 7288e0d8c8..0000000000 --- a/ghost/admin/app/components/dashboard/v5/charts/recent-activity.js +++ /dev/null @@ -1,23 +0,0 @@ -import Component from '@glimmer/component'; -import {inject as service} from '@ember/service'; - -export default class RecentActivity extends Component { - @service feature; - @service session; - @service settings; - - get shouldDisplay() { - if (this.feature.improvedOnboarding) { - return true; - } - - const isOwner = this.session.user?.isOwnerOnly; - const hasCompletedLaunchWizard = this.settings.get('editorIsLaunchComplete'); - - if (isOwner && !hasCompletedLaunchWizard) { - return false; - } - - return true; - } -} diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs b/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs deleted file mode 100644 index 104d35fe0a..0000000000 --- a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs +++ /dev/null @@ -1,33 +0,0 @@ -
-
- -
-
-
Title
-
Sends
-
Open rate
-
-
- {{#each this.posts as |post|}} -
- - {{post.title}} - - {{format-number post.email.emailCount}} - - {{post.email.openRate}}% - - -
- {{else}} -
-

No published posts yet.

-
- {{/each}} -
-
- See all posts → -
-
-
-
diff --git a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.js b/ghost/admin/app/components/dashboard/v5/charts/recent-posts.js deleted file mode 100644 index a996e1bfb8..0000000000 --- a/ghost/admin/app/components/dashboard/v5/charts/recent-posts.js +++ /dev/null @@ -1,15 +0,0 @@ -import Component from '@glimmer/component'; -import {action} from '@ember/object'; -import {inject as service} from '@ember/service'; -import {tracked} from '@glimmer/tracking'; - -export default class RecentPosts extends Component { - @service store; - - @tracked posts = []; - - @action - async loadPosts() { - this.posts = await this.store.query('post', {limit: 3, filter: 'status:published', order: 'published_at desc'}); - } -} diff --git a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs b/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs index fd9f64eb49..746e441ced 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs @@ -11,7 +11,6 @@

{{entry.title}}

{{entry.excerpt}}

- {{!--
{{moment-format entry.published_at "D MMM YYYY"}}
--}}
{{/each}} @@ -19,7 +18,7 @@ {{/if}}
- Subscribe to the newsletter → + Subscribe to the newsletter →
diff --git a/ghost/admin/app/components/dashboard/v5/resources/resources.hbs b/ghost/admin/app/components/dashboard/v5/resources/resources.hbs index 1c78fa87c2..502dd909dd 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/resources.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/resources.hbs @@ -1,13 +1,12 @@
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 a4a9a92a34..54da0b52b5 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs @@ -1,11 +1,11 @@
-
+

Staff picks

Hand picked stories from around the web, published with Ghost.

-
+
{{#if (not (or this.loading this.error))}}
{{#each this.staffPicks as |entry|}} diff --git a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs b/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs index c308820c6a..b6b575bd4d 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs @@ -1,24 +1,31 @@
-
+

What's new

All the latest changes and improvements.

- {{#if (not (or this.loading this.error))}} -
+
+ {{#if (not (or this.loading this.error))}}
{{#each this.entries as |entry|}}
- - {{entry.title}} + + + {{entry.title}} +
{{moment-format entry.published_at "D MMM YYYY"}}
+ {{else}} +
+ {{svg-jar "no-data-list"}} +

No new features yet.

+
{{/each}}
-
- {{/if}} + {{/if}} +
See more features → diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index 4d4eace35c..fbb2b52a29 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -67,7 +67,6 @@ Dashboard v5 Layout */ .gh-dashboard5-layout { max-width: 1230px; - min-width: 850px; margin: 0 auto; } @@ -108,6 +107,12 @@ Dashboard v5 Layout */ grid-template-columns: 2fr 1fr; } +@media screen and (max-width: 1320px) { + .gh-dashboard5-split { + grid-template-columns: 1fr 1fr; + } +} + .gh-dashboard5-thirds { flex: 1; display: flex; @@ -684,9 +689,7 @@ Dashboard v5 List */ font-weight: 600; font-size: 1.5rem; color: var(--darkgrey); - padding: 0 64px 0 0; - display: flex; - align-items: center; + padding: 0 32px 0 0; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -698,9 +701,7 @@ Dashboard v5 List */ font-size: 1.4rem; color: var(--middarkgrey); text-decoration: none; - padding: 0 64px 0 0; - display: flex; - align-items: center; + padding: 0 32px 0 0; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -709,6 +710,7 @@ Dashboard v5 List */ .gh-dashboard5-list-item svg { width: 20px; + min-width: 20px; height: 20px; margin: 0 0.5rem 0 -4px; } @@ -1098,78 +1100,6 @@ Dashboard v5 Recents */ } -/* --------------------------------- -Dashboard v5 What's New */ - -.gh-dashboard5-whats-new { - position: relative; -} - -.gh-dashboard5-whats-new .gh-dashboard5-resource-title h4 { - margin-bottom: 0px; -} - -.gh-dashboard5-whats-new .gh-dashboard5-resource-title p { - margin-top: 8px; -} - -.gh-dashboard5-whats-new .gh-dashboard5-list-header, -.gh-dashboard5-whats-new .gh-dashboard5-list-item { - grid-template-columns: 100%; -} - -.gh-dashboard5-whats-new .gh-dashboard5-list-item { - padding: 0; -} - -.gh-dashboard5-whats-new .gh-dashboard5-list-item a { - display: flex; - flex-direction: column; - align-items: flex-start; - font-size: 1.45rem; - font-weight: 600; - line-height: 1.4em; - padding: 12px 32px 12px 0; - color: var(--black); -} - -.gh-dashboard5-whats-new .gh-dashboard5-list-date { - 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"; - font-size: 1.2rem; - white-space: nowrap; - background: #30cf43; - text-transform: uppercase; - color: #fff; - line-height: 1; - border-radius: 2px; - margin-left: 8px; - margin-top: 1px; - padding: 3px 4px; - height: 18px; -} - -.gh-dashboard5-whats-new .gh-dashboard5-resource-body { - border-top: 1px solid #ebeef0; - padding-top: 12px; -} - - /* --------------------------------- Dashboard v5 Resources */ @@ -1183,13 +1113,26 @@ Dashboard v5 Resources */ gap: 28px; } +@media screen and (max-width: 1320px) { + .gh-dashboard5-resources .gh-dashboard5-resource-box { + grid-template-columns: 1fr; + } + + .gh-dashboard5-resources .gh-dashboard5-resource-thumbnail { + display: none; + } +} + .gh-dashboard5-resource-text { color: var(--black); } -.gh-dashboard5-resources .gh-dashboard5-resource-body { +.gh-dashboard5-resource-contents { + flex: 1; + display: flex; flex-direction: column; - justify-content: space-between; + position: relative; + align-items: stretch; } .gh-dashboard5-resources .gh-dashboard5-articles { @@ -1295,72 +1238,6 @@ Dashboard v5 Multi */ } -/* --------------------------------- -Dashboard v5 Staff Picks */ - -.gh-dashboard5-staff-picks { - position: relative; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-title h4 { - margin-bottom: 8px; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-title p { - margin-top: 8px; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-body { - padding-top: 12px; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-list-header, -.gh-dashboard5-staff-picks .gh-dashboard5-list-item { - grid-template-columns: 100%; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-list-item { - padding: 0; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-list-item a { - display: flex; - flex-direction: column; - align-items: flex-start; - font-size: 1.45rem; - font-weight: 600; - line-height: 1.4em; - color: var(--black); - padding: 12px 32px 12px 0; - min-width: 0; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-list-body { - color: var(--midlightgrey); - font-size: 1.4rem; - transition: all .3s ease-in-out; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-body { - border-top: 1px solid var(--whitegrey); - padding-top: 12px; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a { - display: flex; - align-items: center; - color: #1DA1F2; - font-weight: 500; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg { - width: 20px; - height: 20px; - margin-right: 5px; -} - - - /* --------------------------------- Dashboard v5 Latest Newsletters */ @@ -1391,6 +1268,12 @@ Dashboard v5 Latest Newsletters */ border-radius: 4px; } +@media screen and (max-width: 1400px) { + .gh-dashboard5-subscribe-button > span { + display: none; + } +} + /* --------------------------------- Dashboard v5 Community */ @@ -1428,7 +1311,7 @@ Dashboard v5 Community */ color: #fff; } -.gh-dashboard5-community .gh-dashboard5-resource-title:not(.large) h4 { +.gh-dashboard5-community .gh-dashboard5-resource-title:not(.is-large) h4 { color: #fff; } @@ -1487,9 +1370,10 @@ Dashboard v5 Misc */ /* --------------------------------- -Dashboard v5 Resources */ +Dashboard v5 Resource */ .gh-dashboard5-resource { + position: relative; display: flex; } @@ -1516,7 +1400,7 @@ Dashboard v5 Resources */ box-shadow: none; } -.gh-dashboard5-resource-title:not(.large) h4 { +.gh-dashboard5-resource-title:not(.is-large) h4 { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; @@ -1527,7 +1411,7 @@ Dashboard v5 Resources */ transition: color .3s; } -.gh-dashboard5-resource-title.large h4 { +.gh-dashboard5-resource-title.is-large h4 { align-items: center; font-size: 1.55rem; font-weight: 700; @@ -1539,8 +1423,12 @@ Dashboard v5 Resources */ letter-spacing: -.3px; } +.gh-dashboard5-resource-title.has-border { + border-bottom: 1px solid var(--whitegrey); +} + .gh-dashboard5-resource-title p { - margin: 16px 0; + margin: 8px 0 16px; padding: 0; color: var(--middarkgrey); font-size: 1.55rem; @@ -1550,6 +1438,7 @@ Dashboard v5 Resources */ flex: 1; display: flex; justify-content: flex-start; + padding-top: 12px; } .gh-dashboard5-resource-footer { @@ -1569,7 +1458,6 @@ Dashboard v5 Resources */ background-position: center; background-size: cover; background-image: url(img/resource-1.jpg); - padding-top: 32px; } .gh-dashboard5-resource-bigarticle { @@ -1636,6 +1524,87 @@ Dashboard v5 Resources */ white-space: nowrap; } +.gh-dashboard5-resource-title h4 { + margin-bottom: 0px; +} + +.gh-dashboard5-resource .gh-dashboard5-list-header, +.gh-dashboard5-resource .gh-dashboard5-list-item { + grid-template-columns: 100%; +} + +.gh-dashboard5-resource .gh-dashboard5-list-item { + padding: 0; +} + +.gh-dashboard5-resource .gh-dashboard5-list-link { + display: flex; + width: 100%; + min-width: 0; +} + +.gh-dashboard5-resource .gh-dashboard5-list-link span { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-dashboard5-resource .has-new .gh-dashboard5-list-item:first-child .gh-dashboard5-list-link::after { + display: inline-block; + content: "New"; + font-size: 1.2rem; + white-space: nowrap; + background: #30cf43; + text-transform: uppercase; + color: #fff; + line-height: 1; + border-radius: 2px; + margin-left: 8px; + margin-top: 1px; + padding: 3px 4px; + height: 18px; +} + +.gh-dashboard5-resource .gh-dashboard5-list-header, +.gh-dashboard5-resource .gh-dashboard5-list-item { + grid-template-columns: 100%; +} + +.gh-dashboard5-resource .gh-dashboard5-list-item { + padding: 0; +} + +.gh-dashboard5-resource .gh-dashboard5-list-post { + display: flex; + flex-direction: column; + align-items: flex-start; + font-size: 1.45rem; + font-weight: 600; + line-height: 1.4em; + color: var(--black); + padding: 12px 32px 12px 0; + min-width: 0; +} + +.gh-dashboard5-resource .gh-dashboard5-list-body { + color: var(--midlightgrey); + font-size: 1.4rem; + transition: all .3s ease-in-out; +} + +.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a { + display: flex; + align-items: center; + color: #1DA1F2; + font-weight: 500; +} + +.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg { + width: 20px; + height: 20px; + margin-right: 5px; +} + /* --------------------------------- Dashboard v5 Tooltips */ @@ -1702,3 +1671,62 @@ Dashboard v5 Tooltips */ .gh-dashboard5-totals .gh-dashboard5-chart-container { margin-right: -10px; /* fix 99% width ChartJS hack */ } + +@media screen and (max-width: 1320px) { + .gh-dashboard5-minicharts .gh-dashboard5-chart { + padding-left: 0; + } + + .gh-dashboard5-minicharts .gh-dashboard5-legend { + display: none; + } +} + +@media screen and (max-width: 1000px) { + .gh-dashboard5-minicharts { + flex-direction: column; + } + + .gh-dashboard5-minichart { + padding: 16px 0; + border-left: 0 none; + border-bottom: 1px solid var(--whitegrey); + } + + .gh-dashboard5-minichart:first-child { + padding-top: 4px; + } + + .gh-dashboard5-minichart:last-child { + border-bottom: 0 none; + padding-bottom: 0; + } + + .gh-dashboard5-minichart .gh-dashboard5-data { + top: 16px; + left: 0; + } + + .gh-dashboard5-minichart .gh-dashboard5-select { + top: 0; + } + + .gh-dashboard5-columns { + flex-direction: column; + } + + .gh-dashboard5-columns > .gh-dashboard5-column { + padding: 16px 0; + border-left: 0 none; + border-bottom: 1px solid var(--whitegrey); + } + + .gh-dashboard5-columns > .gh-dashboard5-column:first-child { + padding-top: 4px; + } + + .gh-dashboard5-columns > .gh-dashboard5-column:last-child { + border-bottom: 0 none; + padding-bottom: 0; + } +}