From 8502ebb96a8a720267375d7fa334e8b20121505c Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Tue, 17 May 2022 09:34:34 +0200 Subject: [PATCH] Moving over the new Dashboard to replace the old (#2389) refs: https://github.com/TryGhost/Team/issues/1631 Co-authored-by: James Morris --- .../dashboard/{v5 => }/charts/anchor.hbs | 38 +- .../dashboard/{v5 => }/charts/anchor.js | 10 +- .../dashboard/{v5 => }/charts/engagement.hbs | 22 +- .../dashboard/{v5 => }/charts/engagement.js | 2 +- .../dashboard/{v5 => }/charts/overview.hbs | 18 +- .../dashboard/{v5 => }/charts/overview.js | 3 +- .../dashboard/charts/paid-breakdown.hbs | 43 + .../{v5 => }/charts/paid-breakdown.js | 8 +- .../dashboard/{v5 => }/charts/paid-mix.hbs | 28 +- .../dashboard/{v5 => }/charts/paid-mix.js | 4 +- .../dashboard/{v5 => }/charts/paid-mrr.hbs | 22 +- .../dashboard/{v5 => }/charts/paid-mrr.js | 8 +- .../dashboard/{v5 => }/charts/recents.hbs | 90 +- .../dashboard/{v5 => }/charts/recents.js | 19 - .../app/components/dashboard/dashboard-v5.hbs | 57 - .../app/components/dashboard/dashboard-v5.js | 67 - .../dashboard/latest-member-activity.hbs | 65 - .../dashboard/latest-member-activity.js | 23 - .../components/dashboard/members-graphs.hbs | 106 - .../components/dashboard/members-graphs.js | 161 - .../dashboard/{v5 => }/parts/metric.hbs | 24 +- .../components/dashboard/parts/percentage.hbs | 7 + .../dashboard/{v5 => }/parts/zero.hbs | 4 +- .../{v5 => }/prototype/control-panel.hbs | 0 .../{v5 => }/prototype/control-panel.js | 0 .../dashboard/resources/community.hbs | 17 + .../dashboard/resources/newsletter.hbs | 24 + .../{v5 => }/resources/newsletter.js | 0 .../dashboard/resources/resources.hbs | 23 + .../dashboard/{v5 => }/resources/resources.js | 0 .../dashboard/resources/staff-picks.hbs | 33 + .../{v5 => }/resources/staff-picks.js | 0 .../dashboard/resources/whats-new.hbs | 33 + .../dashboard/{v5 => }/resources/whats-new.js | 0 .../dashboard/v5/charts/paid-breakdown.hbs | 43 - .../components/dashboard/v5/parts/loading.hbs | 3 - .../dashboard/v5/parts/percentage.hbs | 7 - .../dashboard/v5/resources/community.hbs | 17 - .../dashboard/v5/resources/newsletter.hbs | 24 - .../dashboard/v5/resources/resources.hbs | 23 - .../dashboard/v5/resources/staff-picks.hbs | 33 - .../dashboard/v5/resources/whats-new.hbs | 33 - .../admin/app/components/gh-members-chart.hbs | 11 - .../admin/app/components/gh-members-chart.js | 363 --- ghost/admin/app/controllers/dashboard.js | 112 +- ghost/admin/app/routes/dashboard.js | 9 +- ghost/admin/app/services/feature.js | 1 - ghost/admin/app/styles/app-dark.css | 62 +- ghost/admin/app/styles/app.css | 1 - .../admin/app/styles/layouts/dashboard-v5.css | 2038 ------------ ghost/admin/app/styles/layouts/dashboard.css | 2766 ++++++++++++----- ghost/admin/app/templates/dashboard.hbs | 218 +- ghost/admin/app/templates/settings/labs.hbs | 13 - ghost/admin/mirage/config.js | 2 + ghost/admin/mirage/config/stats.js | 66 + .../admin/tests/acceptance/dashboard-test.js | 24 +- .../dashboard/latest-member-activity-test.js | 29 - 57 files changed, 2464 insertions(+), 4393 deletions(-) rename ghost/admin/app/components/dashboard/{v5 => }/charts/anchor.hbs (62%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/anchor.js (98%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/engagement.hbs (67%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/engagement.js (97%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/overview.hbs (65%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/overview.js (96%) create mode 100644 ghost/admin/app/components/dashboard/charts/paid-breakdown.hbs rename ghost/admin/app/components/dashboard/{v5 => }/charts/paid-breakdown.js (96%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/paid-mix.hbs (61%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/paid-mix.js (99%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/paid-mrr.hbs (61%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/paid-mrr.js (97%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/recents.hbs (58%) rename ghost/admin/app/components/dashboard/{v5 => }/charts/recents.js (70%) delete mode 100644 ghost/admin/app/components/dashboard/dashboard-v5.hbs delete mode 100644 ghost/admin/app/components/dashboard/dashboard-v5.js delete mode 100644 ghost/admin/app/components/dashboard/latest-member-activity.hbs delete mode 100644 ghost/admin/app/components/dashboard/latest-member-activity.js delete mode 100644 ghost/admin/app/components/dashboard/members-graphs.hbs delete mode 100644 ghost/admin/app/components/dashboard/members-graphs.js rename ghost/admin/app/components/dashboard/{v5 => }/parts/metric.hbs (55%) create mode 100644 ghost/admin/app/components/dashboard/parts/percentage.hbs rename ghost/admin/app/components/dashboard/{v5 => }/parts/zero.hbs (73%) rename ghost/admin/app/components/dashboard/{v5 => }/prototype/control-panel.hbs (100%) rename ghost/admin/app/components/dashboard/{v5 => }/prototype/control-panel.js (100%) create mode 100644 ghost/admin/app/components/dashboard/resources/community.hbs create mode 100644 ghost/admin/app/components/dashboard/resources/newsletter.hbs rename ghost/admin/app/components/dashboard/{v5 => }/resources/newsletter.js (100%) create mode 100644 ghost/admin/app/components/dashboard/resources/resources.hbs rename ghost/admin/app/components/dashboard/{v5 => }/resources/resources.js (100%) create mode 100644 ghost/admin/app/components/dashboard/resources/staff-picks.hbs rename ghost/admin/app/components/dashboard/{v5 => }/resources/staff-picks.js (100%) create mode 100644 ghost/admin/app/components/dashboard/resources/whats-new.hbs rename ghost/admin/app/components/dashboard/{v5 => }/resources/whats-new.js (100%) delete mode 100644 ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/parts/loading.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/parts/percentage.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/resources/community.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/resources/resources.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs delete mode 100644 ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs delete mode 100644 ghost/admin/app/components/gh-members-chart.hbs delete mode 100644 ghost/admin/app/components/gh-members-chart.js delete mode 100644 ghost/admin/app/styles/layouts/dashboard-v5.css create mode 100644 ghost/admin/mirage/config/stats.js delete mode 100644 ghost/admin/tests/integration/components/dashboard/latest-member-activity-test.js diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/charts/anchor.hbs similarity index 62% rename from ghost/admin/app/components/dashboard/v5/charts/anchor.hbs rename to ghost/admin/app/components/dashboard/charts/anchor.hbs index 994b16a439..af4fb96d16 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/charts/anchor.hbs @@ -1,7 +1,7 @@ -
-
+
+
{{#if this.hasPaidTiers}} -
+
{{else}} - {{/if}} -
-
-
-
+
+
+
+
{{#if this.loading}} -
+
{{else}} @@ -41,28 +41,28 @@ @height={{200}} /> {{/if}}
-
-
+
+
-
-
+
โ€“ {{this.selectedDisplayOption.name}}
-
- - - - +
+ - + -
{{#if this.hasPaidTiers}} -
- - - +
+ + +
{{/if}}
diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/charts/anchor.js similarity index 98% rename from ghost/admin/app/components/dashboard/v5/charts/anchor.js rename to ghost/admin/app/components/dashboard/charts/anchor.js index be80205ed4..f2bbcafee1 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/charts/anchor.js @@ -236,7 +236,7 @@ export default class Anchor extends Component { mode: 'index', custom: function (tooltip) { // get tooltip element - const tooltipEl = document.getElementById('gh-dashboard5-anchor-tooltip'); + const tooltipEl = document.getElementById('gh-dashboard-anchor-tooltip'); const chartContainerEl = tooltipEl.parentElement; const chartWidth = chartContainerEl.offsetWidth; const tooltipWidth = tooltipEl.offsetWidth; @@ -262,11 +262,11 @@ export default class Anchor extends Component { callbacks: { label: (tooltipItems, data) => { const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); - document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-value .value').innerHTML = value; + document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value; }, title: (tooltipItems) => { const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT); - document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-label').innerHTML = value; + document.querySelector('#gh-dashboard-anchor-tooltip .gh-dashboard-tooltip-label').innerHTML = value; } } }, @@ -305,10 +305,10 @@ export default class Anchor extends Component { autoSkip: false, callback: function (value, index, values) { if (index === 0) { - document.getElementById('gh-dashboard5-anchor-date-start').innerHTML = moment(value).format(DATE_FORMAT); + document.getElementById('gh-dashboard-anchor-date-start').innerHTML = moment(value).format(DATE_FORMAT); } if (index === (values.length - 1)) { - document.getElementById('gh-dashboard5-anchor-date-end').innerHTML = moment(value).format(DATE_FORMAT); + document.getElementById('gh-dashboard-anchor-date-end').innerHTML = moment(value).format(DATE_FORMAT); } if (activeDays === (30 + 1)) { diff --git a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs b/ghost/admin/app/components/dashboard/charts/engagement.hbs similarity index 67% rename from ghost/admin/app/components/dashboard/v5/charts/engagement.hbs rename to ghost/admin/app/components/dashboard/charts/engagement.hbs index 0d5cd34c50..4d7676d8db 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/engagement.hbs +++ b/ghost/admin/app/components/dashboard/charts/engagement.hbs @@ -1,25 +1,25 @@ -
-
- +
+ -
-
- +
+
-
- +
-
- + {{#if this.hasPaidTiers}} -
+
-
-
-
- +
+
+
+
-
- +
-
- + +
+
+ + +
+
New
+
Canceled
+
+
+
+ {{#if this.loading}} +
+ +
+ {{else}} +
+
+ +
+ +
+
+ - +
+
+
+
New
+
+
Canceled
+
+
+
+
+ {{/if}} +
+
+
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js b/ghost/admin/app/components/dashboard/charts/paid-breakdown.js similarity index 96% rename from ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js rename to ghost/admin/app/components/dashboard/charts/paid-breakdown.js index 96241ab355..3a862ca2dc 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js +++ b/ghost/admin/app/components/dashboard/charts/paid-breakdown.js @@ -262,7 +262,7 @@ export default class PaidBreakdown extends Component { mode: 'index', custom: function (tooltip) { // get tooltip element - const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip'); + const tooltipEl = document.getElementById('gh-dashboard-breakdown-tooltip'); const chartContainerEl = tooltipEl.parentElement; const chartWidth = chartContainerEl.offsetWidth; const tooltipWidth = tooltipEl.offsetWidth; @@ -290,15 +290,15 @@ export default class PaidBreakdown extends Component { label: (tooltipItems, data) => { // new data let newValue = parseInt(data.datasets[0].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); - document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-1 .value').innerHTML = `${newValue}`; + document.querySelector('#gh-dashboard-breakdown-tooltip .gh-dashboard-tooltip-value-1 .value').innerHTML = `${newValue}`; // canceld data let canceledValue = Math.abs(parseInt(data.datasets[1].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','))); - document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-2 .value').innerHTML = `${canceledValue}`; + document.querySelector('#gh-dashboard-breakdown-tooltip .gh-dashboard-tooltip-value-2 .value').innerHTML = `${canceledValue}`; }, title: (tooltipItems) => { const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT); - document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-label').innerHTML = value; + document.querySelector('#gh-dashboard-breakdown-tooltip .gh-dashboard-tooltip-label').innerHTML = value; } } }, diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs b/ghost/admin/app/components/dashboard/charts/paid-mix.hbs similarity index 61% rename from ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs rename to ghost/admin/app/components/dashboard/charts/paid-mix.hbs index 9f83c0d420..cc4648e2cb 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs +++ b/ghost/admin/app/components/dashboard/charts/paid-mix.hbs @@ -1,24 +1,24 @@ -
-
-
- +
+
+ {{#if this.isChartCadence}} -
-
Monthly
-
Annual
+
+
Monthly
+
Annual
{{/if}}
-
+
{{#if this.loading}} -
+
{{else}} -
-
+
+
-
-
+
+
-
@@ -37,7 +37,7 @@
{{#if this.hasMultipleTiers }} -
+
{ - const tooltipTextEl = document.querySelector('#gh-dashboard5-mix-tooltip .gh-dashboard5-tooltip-value'); + const tooltipTextEl = document.querySelector('#gh-dashboard-mix-tooltip .gh-dashboard-tooltip-value'); const label = data.datasets[tooltipItems.datasetIndex].label || ''; var value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0; if (value < 0) { diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs b/ghost/admin/app/components/dashboard/charts/paid-mrr.hbs similarity index 61% rename from ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs rename to ghost/admin/app/components/dashboard/charts/paid-mrr.hbs index 14cb6638a9..a52b44a703 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs +++ b/ghost/admin/app/components/dashboard/charts/paid-mrr.hbs @@ -1,20 +1,20 @@ -
-
-
- +
+
+
-
+
{{#if this.loading}} -
+
{{else}} -
-
+
+
-
-
+
+
-
-
+
- MRR diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js b/ghost/admin/app/components/dashboard/charts/paid-mrr.js similarity index 97% rename from ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js rename to ghost/admin/app/components/dashboard/charts/paid-mrr.js index 84bfb80c2d..d496bc9941 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mrr.js +++ b/ghost/admin/app/components/dashboard/charts/paid-mrr.js @@ -3,7 +3,7 @@ import Component from '@glimmer/component'; import moment from 'moment'; import {getSymbol} from 'ghost-admin/utils/currency'; -import {ghPriceAmount} from '../../../../helpers/gh-price-amount'; +import {ghPriceAmount} from '../../../helpers/gh-price-amount'; import {inject as service} from '@ember/service'; const DATE_FORMAT = 'D MMM, YYYY'; @@ -170,7 +170,7 @@ export default class PaidMrr extends Component { mode: 'index', custom: function (tooltip) { // get tooltip element - const tooltipEl = document.getElementById('gh-dashboard5-mrr-tooltip'); + const tooltipEl = document.getElementById('gh-dashboard-mrr-tooltip'); const chartContainerEl = tooltipEl.parentElement; const chartWidth = chartContainerEl.offsetWidth; const tooltipWidth = tooltipEl.offsetWidth; @@ -195,11 +195,11 @@ export default class PaidMrr extends Component { callbacks: { label: (tooltipItems, data) => { const value = `${that.mrrCurrencySymbol}${ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index], {cents: false})}`; - document.querySelector('#gh-dashboard5-mrr-tooltip .gh-dashboard5-tooltip-value .value').innerHTML = value; + document.querySelector('#gh-dashboard-mrr-tooltip .gh-dashboard-tooltip-value .value').innerHTML = value; }, title: (tooltipItems) => { const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT); - document.querySelector('#gh-dashboard5-mrr-tooltip .gh-dashboard5-tooltip-label').innerHTML = value; + document.querySelector('#gh-dashboard-mrr-tooltip .gh-dashboard-tooltip-label').innerHTML = value; } } }, diff --git a/ghost/admin/app/components/dashboard/v5/charts/recents.hbs b/ghost/admin/app/components/dashboard/charts/recents.hbs similarity index 58% rename from ghost/admin/app/components/dashboard/v5/charts/recents.hbs rename to ghost/admin/app/components/dashboard/charts/recents.hbs index 96ff1f740a..bac6ea49ac 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/recents.hbs +++ b/ghost/admin/app/components/dashboard/charts/recents.hbs @@ -1,37 +1,37 @@ -
-
-
- {{#if this.areMembersEnabled}} - {{/if}}
{{#if this.postsTabSelected}} -
-
-
Title
+
+
+
Title
{{#if this.areNewslettersEnabled}} -
Sends
-
Open rate
+
Sends
+
Open rate
{{else}} -
Published
+
Published
{{/if}}
-
+
{{#each this.posts as |post|}} - -
- {{post.title}} + +
+ {{post.title}}
{{#if this.areNewslettersEnabled}} -
- +
+ {{#if post.email}} {{format-number post.email.emailCount}} {{else}} @@ -39,43 +39,43 @@ {{/if}}
-
- +
+ {{#if post.email}} - {{post.email.openRate}}% - + {{post.email.openRate}}% + {{else}} - — + — {{/if}}
{{else}} -
- {{moment-format post.published_at "D MMM YYYY HH:mm"}} +
+ {{moment-format post.published_at "D MMM YYYY HH:mm"}}
{{/if}} {{else}} -
+

No published posts yet.

{{/each}}
-
+
See all posts →
{{else}} -
-
-
Member
-
Event
-
Time
+
+
+
Member
+
Event
+
Time
-
+
{{#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}} @@ -84,41 +84,41 @@ {{/if}} {{#if eventsFetcher.isLoading}} -
+
{{else}} {{#if eventsFetcher.data}} {{#each eventsFetcher.data as |event|}} {{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}} - -
+ +
- {{parsedEvent.subject}} + {{parsedEvent.subject}}
-
+
{{svg-jar parsedEvent.icon}} - + {{capitalize-first-letter parsedEvent.action}} {{parsedEvent.object}} {{parsedEvent.info}}
-
- {{moment-format event.timestamp "D MMM YYYY HH:mm"}} +
+ {{moment-format event.timestamp "D MMM YYYY HH:mm"}}
{{/let}} {{/each}} {{else}} -
+

No activity yet.

{{/if}} {{/if}} {{/let}}
-
+
See all activity →
diff --git a/ghost/admin/app/components/dashboard/v5/charts/recents.js b/ghost/admin/app/components/dashboard/charts/recents.js similarity index 70% rename from ghost/admin/app/components/dashboard/v5/charts/recents.js rename to ghost/admin/app/components/dashboard/charts/recents.js index f13bab0398..dc34b86744 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/recents.js +++ b/ghost/admin/app/components/dashboard/charts/recents.js @@ -5,13 +5,9 @@ import {tracked} from '@glimmer/tracking'; export default class Recents extends Component { @service store; - @service feature; - @service session; - @service settings; @service dashboardStats; @tracked selected = 'posts'; - @tracked posts = []; @action @@ -37,21 +33,6 @@ export default class Recents extends Component { return (this.selected === 'activity'); } - 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; - } - get areMembersEnabled() { return this.dashboardStats.siteStatus?.membersEnabled; } diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs deleted file mode 100644 index 627a497d0f..0000000000 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ /dev/null @@ -1,57 +0,0 @@ -
- {{#if this.isLoading }} - - {{else}} - {{#if this.areMembersEnabled}} - {{#if this.hasPaidTiers}} - - {{/if}} - -
- - - {{#if this.areNewslettersEnabled}} - - {{/if}} - - {{#if this.isTotalMembersZero}} - - {{/if}} -
- {{/if}} - - - -
- - -
-
- - - -
- {{/if}} - - {{#unless this.isTotalMembersZero}} -
- - {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} - -
- {{/unless}} -
- -{{#if (enable-developer-experiments)}} - -{{/if}} diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.js b/ghost/admin/app/components/dashboard/dashboard-v5.js deleted file mode 100644 index de43f01578..0000000000 --- a/ghost/admin/app/components/dashboard/dashboard-v5.js +++ /dev/null @@ -1,67 +0,0 @@ -import Component from '@glimmer/component'; -import {action} from '@ember/object'; -import {inject as service} from '@ember/service'; - -// Options 30 and 90 need an extra day to be able to distribute ticks/gridlines evenly -const DAYS_OPTIONS = [{ - name: '7 Days', - value: 7 -}, { - name: '30 Days', - value: 30 + 1 -}, { - name: '90 Days', - value: 90 + 1 -}]; - -export default class DashboardDashboardV5Component extends Component { - @service dashboardStats; - - daysOptions = DAYS_OPTIONS; - - @action - onInsert() { - this.dashboardStats.loadSiteStatus(); - } - - @action - onDaysChange(selected) { - this.days = selected.value; - } - - get days() { - return this.dashboardStats.chartDays; - } - - set days(days) { - this.dashboardStats.chartDays = days; - } - - get selectedDaysOption() { - return this.daysOptions.find(d => d.value === this.days); - } - - get isLoading() { - return this.dashboardStats.siteStatus === null; - } - - get totalMembers() { - return this.dashboardStats.memberCounts?.total ?? 0; - } - - get isTotalMembersZero() { - return this.dashboardStats.memberCounts && this.totalMembers === 0; - } - - get hasPaidTiers() { - return this.dashboardStats.siteStatus?.hasPaidTiers; - } - - get areNewslettersEnabled() { - return this.dashboardStats.siteStatus?.newslettersEnabled; - } - - get areMembersEnabled() { - return this.dashboardStats.siteStatus?.membersEnabled; - } -} diff --git a/ghost/admin/app/components/dashboard/latest-member-activity.hbs b/ghost/admin/app/components/dashboard/latest-member-activity.hbs deleted file mode 100644 index b743702d96..0000000000 --- a/ghost/admin/app/components/dashboard/latest-member-activity.hbs +++ /dev/null @@ -1,65 +0,0 @@ -{{#if this.shouldDisplay}} -
-

-

- Activity -

- -
- {{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}} - {{#if eventsFetcher.isLoading}} - Loading... - {{/if}} - - {{#if eventsFetcher.isError}} -

- There was an error loading events - {{#if eventsFetcher.errorMessage}} - {{eventsFetcher.errorMessage}} - {{/if}} -

- {{/if}} - - {{#unless (or eventsFetcher.isLoading eventsFetcher.isError)}} -
- {{#if eventsFetcher.data}} -
    - {{#each eventsFetcher.data as |event|}} - {{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}} -
  • - -
    - {{svg-jar parsedEvent.icon}} -
    -
    - {{parsedEvent.subject}} -
    -
    - {{capitalize-first-letter parsedEvent.action}} - {{parsedEvent.object}} - {{parsedEvent.info}} -
    -
    -
    -     - {{moment-from-now parsedEvent.timestamp}} -
    • - {{/let}} - {{/each}} -
- {{else}} -
- {{svg-jar "no-data-list"}} - No member activity available. -
- {{/if}} -
- -
- See all activity โ†’ -
- {{/unless}} - {{/let}} -
-
-{{/if}} diff --git a/ghost/admin/app/components/dashboard/latest-member-activity.js b/ghost/admin/app/components/dashboard/latest-member-activity.js deleted file mode 100644 index 1439c41bf7..0000000000 --- a/ghost/admin/app/components/dashboard/latest-member-activity.js +++ /dev/null @@ -1,23 +0,0 @@ -import Component from '@glimmer/component'; -import {inject as service} from '@ember/service'; - -export default class DashboardLatestMemberActivityComponent 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/members-graphs.hbs b/ghost/admin/app/components/dashboard/members-graphs.hbs deleted file mode 100644 index 3e171b1ad4..0000000000 --- a/ghost/admin/app/components/dashboard/members-graphs.hbs +++ /dev/null @@ -1,106 +0,0 @@ -
-
-
-

MRR

-

30 days

-
-
- {{#if this.mrrStatsLoading}} - Loading... - {{else}} - {{#if this.mrrStatsError}} -

- There was an error loading MRR - {{this.mrrStatsError.message}} -

- {{else}} -
-
{{this.mrrStatsData.currency}}{{format-number this.mrrStatsData.currentAmount}}
-
{{this.mrrStatsData.percentGrowth}}%
-
- {{#if this.mrrStatsData}} -
- -
- {{/if}} - {{/if}} - {{/if}} -
-
-
-
- {{#if this.memberCountStatsLoading}} - Loading... - {{else}} - {{#if this.memberCountStatsError}} -

- There was an error loading total members - {{this.memberCountStatsData.message}} -

- {{else}} -
-

Total members

-
-
{{format-number this.memberCountStatsData.all.total}}
-
{{this.memberCountStatsData.all.percentGrowth}}%
-
-
-
- -
- {{/if}} - {{/if}} -
-
- - -
\ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/members-graphs.js b/ghost/admin/app/components/dashboard/members-graphs.js deleted file mode 100644 index 8393045a7f..0000000000 --- a/ghost/admin/app/components/dashboard/members-graphs.js +++ /dev/null @@ -1,161 +0,0 @@ -import Component from '@glimmer/component'; -import {getSymbol} from 'ghost-admin/utils/currency'; -import {inject as service} from '@ember/service'; -import {tracked} from '@glimmer/tracking'; - -export default class DashboardMembersGraphs extends Component { - @service membersStats; - @service store; - - @tracked mrrStatsData = null; - @tracked mrrStatsError = null; - @tracked mrrStatsLoading = false; - - @tracked memberCountStatsData = null; - @tracked memberCountStatsError = null; - @tracked memberCountStatsLoading = false; - - @tracked newsletterOpenRatesData = null; - @tracked newsletterOpenRatesError = null; - @tracked newsletterOpenRatesLoading = false; - - constructor() { - super(...arguments); - this.loadCharts(); - } - - loadCharts() { - this.loadMRRStats(); - this.loadMemberCountStats(); - this.loadNewsletterOpenRates(); - } - - async loadMRRStats() { - const tiers = await this.store.query('tier', { - filter: 'type:paid', include: 'monthly_price,yearly_price', limit: 'all' - }); - const defaultTier = tiers?.firstObject; - - this.mrrStatsLoading = true; - this.membersStats.fetchMRR().then((stats) => { - this.mrrStatsLoading = false; - const statsData = stats.data || []; - const defaultCurrency = defaultTier?.monthlyPrice?.currency || 'usd'; - let currencyStats = statsData.find((stat) => { - return stat.currency === defaultCurrency; - }); - currencyStats = currencyStats || { - data: [], - currency: defaultCurrency - }; - if (currencyStats) { - const currencyStatsData = this.membersStats.fillDates(currencyStats.data) || {}; - const dateValues = Object.values(currencyStatsData).map(val => Math.round((val / 100))); - const currentMRR = dateValues.length ? dateValues[dateValues.length - 1] : 0; - const rangeStartMRR = dateValues.length ? dateValues[0] : 0; - const percentGrowth = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0; - this.mrrStatsData = { - currentAmount: currentMRR, - currency: getSymbol(currencyStats.currency), - percentGrowth: percentGrowth.toFixed(1), - percentClass: (percentGrowth > 0 ? 'positive' : (percentGrowth < 0 ? 'negative' : '')), - options: { - rangeInDays: 30 - }, - data: { - label: 'MRR', - dateLabels: Object.keys(currencyStatsData), - dateValues - }, - title: 'MRR', - stats: currencyStats - }; - } - }, (error) => { - this.mrrStatsError = error; - this.mrrStatsLoading = false; - }); - } - - loadMemberCountStats() { - this.memberCountStatsLoading = true; - this.membersStats.fetchCounts().then((stats) => { - this.memberCountStatsLoading = false; - - if (stats) { - const statsDateObj = this.membersStats.fillCountDates(stats.data) || {}; - const dateValues = Object.values(statsDateObj); - const currentAllCount = dateValues.length ? dateValues[dateValues.length - 1].total : 0; - const currentPaidCount = dateValues.length ? dateValues[dateValues.length - 1].paid : 0; - const rangeStartAllCount = dateValues.length ? dateValues[0].total : 0; - const rangeStartPaidCount = dateValues.length ? dateValues[0].paid : 0; - const allCountPercentGrowth = rangeStartAllCount !== 0 ? ((currentAllCount - rangeStartAllCount) / rangeStartAllCount) * 100 : 0; - const paidCountPercentGrowth = rangeStartPaidCount !== 0 ? ((currentPaidCount - rangeStartPaidCount) / rangeStartPaidCount) * 100 : 0; - - this.memberCountStatsData = { - all: { - percentGrowth: allCountPercentGrowth.toFixed(1), - percentClass: (allCountPercentGrowth > 0 ? 'positive' : (allCountPercentGrowth < 0 ? 'negative' : '')), - total: dateValues.length ? dateValues[dateValues.length - 1].total : 0, - options: { - rangeInDays: 30 - }, - data: { - label: 'Members', - dateLabels: Object.keys(statsDateObj), - dateValues: dateValues.map(d => d.total) - }, - title: 'Total Members', - stats: stats - }, - paid: { - percentGrowth: paidCountPercentGrowth.toFixed(1), - percentClass: (paidCountPercentGrowth > 0 ? 'positive' : (paidCountPercentGrowth < 0 ? 'negative' : '')), - total: dateValues.length ? dateValues[dateValues.length - 1].paid : 0, - options: { - rangeInDays: 30 - }, - data: { - label: 'Members', - dateLabels: Object.keys(statsDateObj), - dateValues: dateValues.map(d => d.paid) - }, - title: 'Paid Members', - stats: stats - } - }; - } - }, (error) => { - this.memberCountStatsError = error; - this.memberCountStatsLoading = false; - }); - } - - loadNewsletterOpenRates() { - this.newsletterOpenRatesLoading = true; - this.membersStats.fetchNewsletterStats().then((results) => { - const rangeStartOpenRate = results.length > 1 ? results[results.length - 2].openRate : 0; - const rangeEndOpenRate = results.length > 0 ? results[results.length - 1].openRate : 0; - const percentGrowth = rangeStartOpenRate !== 0 ? ((rangeEndOpenRate - rangeStartOpenRate) / rangeStartOpenRate) * 100 : 0; - this.newsletterOpenRatesData = { - percentGrowth: percentGrowth.toFixed(1), - percentClass: (percentGrowth > 0 ? 'positive' : (percentGrowth < 0 ? 'negative' : '')), - current: rangeEndOpenRate, - options: { - rangeInDays: 30 - }, - data: { - label: 'Open rate', - dateLabels: results.map(d => d.subject), - dateValues: results.map(d => d.openRate) - }, - title: 'Open rate', - stats: results - }; - this.newsletterOpenRatesLoading = false; - }, (error) => { - this.newsletterOpenRatesError = error; - this.newsletterOpenRatesLoading = false; - }); - } -} diff --git a/ghost/admin/app/components/dashboard/v5/parts/metric.hbs b/ghost/admin/app/components/dashboard/parts/metric.hbs similarity index 55% rename from ghost/admin/app/components/dashboard/v5/parts/metric.hbs rename to ghost/admin/app/components/dashboard/parts/metric.hbs index 1bcd1d8f0a..770e0906f8 100644 --- a/ghost/admin/app/components/dashboard/v5/parts/metric.hbs +++ b/ghost/admin/app/components/dashboard/parts/metric.hbs @@ -1,39 +1,39 @@ -
-
+
+
{{#if @secondary}} {{#if @value}} -
+
{{@value}} {{#if @trends}} - + {{/if}}
{{/if}} -
+
{{@label}}
{{else}} {{#if @reverse}} {{#if @value}} -
+
{{@value}} {{#if @trends}} - + {{/if}}
{{/if}} -
+
{{@label}}
{{else}} -
+
{{@label}}
{{#if @value}} -
+
{{@value}} {{#if @trends}} - + {{/if}}
{{/if}} @@ -41,7 +41,7 @@ {{/if}}
{{#if @extra}} -
+
{{@extra}}
{{/if}} diff --git a/ghost/admin/app/components/dashboard/parts/percentage.hbs b/ghost/admin/app/components/dashboard/parts/percentage.hbs new file mode 100644 index 0000000000..fac61221de --- /dev/null +++ b/ghost/admin/app/components/dashboard/parts/percentage.hbs @@ -0,0 +1,7 @@ +{{#if (gt @percentage 0) }} +
+{{ @percentage }}%
+{{else if (lt @percentage 0)}} +
{{ @percentage }}%
+{{else}} +
0%
+{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/parts/zero.hbs b/ghost/admin/app/components/dashboard/parts/zero.hbs similarity index 73% rename from ghost/admin/app/components/dashboard/v5/parts/zero.hbs rename to ghost/admin/app/components/dashboard/parts/zero.hbs index 3d54328cba..d866e49645 100644 --- a/ghost/admin/app/components/dashboard/v5/parts/zero.hbs +++ b/ghost/admin/app/components/dashboard/parts/zero.hbs @@ -1,5 +1,5 @@ -
-
+
+

Welcome to your Dashboard

You'll find member analytics here once
someone signs up.

Add or import members →

diff --git a/ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs b/ghost/admin/app/components/dashboard/prototype/control-panel.hbs similarity index 100% rename from ghost/admin/app/components/dashboard/v5/prototype/control-panel.hbs rename to ghost/admin/app/components/dashboard/prototype/control-panel.hbs diff --git a/ghost/admin/app/components/dashboard/v5/prototype/control-panel.js b/ghost/admin/app/components/dashboard/prototype/control-panel.js similarity index 100% rename from ghost/admin/app/components/dashboard/v5/prototype/control-panel.js rename to ghost/admin/app/components/dashboard/prototype/control-panel.js diff --git a/ghost/admin/app/components/dashboard/resources/community.hbs b/ghost/admin/app/components/dashboard/resources/community.hbs new file mode 100644 index 0000000000..9c47964bcf --- /dev/null +++ b/ghost/admin/app/components/dashboard/resources/community.hbs @@ -0,0 +1,17 @@ +
+ +
+

Ghost Creator Community

+
+
+
+
+

Talk strategy.
Get advice.
Or just hang out.

+
+
+
+
+ Share the journey → +
+ +
diff --git a/ghost/admin/app/components/dashboard/resources/newsletter.hbs b/ghost/admin/app/components/dashboard/resources/newsletter.hbs new file mode 100644 index 0000000000..0cba7fe2c1 --- /dev/null +++ b/ghost/admin/app/components/dashboard/resources/newsletter.hbs @@ -0,0 +1,24 @@ +
+ +
diff --git a/ghost/admin/app/components/dashboard/v5/resources/newsletter.js b/ghost/admin/app/components/dashboard/resources/newsletter.js similarity index 100% rename from ghost/admin/app/components/dashboard/v5/resources/newsletter.js rename to ghost/admin/app/components/dashboard/resources/newsletter.js diff --git a/ghost/admin/app/components/dashboard/resources/resources.hbs b/ghost/admin/app/components/dashboard/resources/resources.hbs new file mode 100644 index 0000000000..6af5d54e30 --- /dev/null +++ b/ghost/admin/app/components/dashboard/resources/resources.hbs @@ -0,0 +1,23 @@ +
+ +
diff --git a/ghost/admin/app/components/dashboard/v5/resources/resources.js b/ghost/admin/app/components/dashboard/resources/resources.js similarity index 100% rename from ghost/admin/app/components/dashboard/v5/resources/resources.js rename to ghost/admin/app/components/dashboard/resources/resources.js diff --git a/ghost/admin/app/components/dashboard/resources/staff-picks.hbs b/ghost/admin/app/components/dashboard/resources/staff-picks.hbs new file mode 100644 index 0000000000..2f3976786c --- /dev/null +++ b/ghost/admin/app/components/dashboard/resources/staff-picks.hbs @@ -0,0 +1,33 @@ +
+ +
diff --git a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.js b/ghost/admin/app/components/dashboard/resources/staff-picks.js similarity index 100% rename from ghost/admin/app/components/dashboard/v5/resources/staff-picks.js rename to ghost/admin/app/components/dashboard/resources/staff-picks.js diff --git a/ghost/admin/app/components/dashboard/resources/whats-new.hbs b/ghost/admin/app/components/dashboard/resources/whats-new.hbs new file mode 100644 index 0000000000..1814de495f --- /dev/null +++ b/ghost/admin/app/components/dashboard/resources/whats-new.hbs @@ -0,0 +1,33 @@ +
+
+
+

What's new

+

All the latest improvements.

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

No new features yet.

+
+ {{/each}} +
+ {{/if}} +
+
+
+ See more features → +
+
+
diff --git a/ghost/admin/app/components/dashboard/v5/resources/whats-new.js b/ghost/admin/app/components/dashboard/resources/whats-new.js similarity index 100% rename from ghost/admin/app/components/dashboard/v5/resources/whats-new.js rename to ghost/admin/app/components/dashboard/resources/whats-new.js diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs deleted file mode 100644 index 815d959af9..0000000000 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs +++ /dev/null @@ -1,43 +0,0 @@ -
-
-
- - -
-
New
-
Canceled
-
-
-
- {{#if this.loading}} -
- -
- {{else}} -
-
- -
- -
-
- - -
-
-
-
New
-
-
Canceled
-
-
-
-
- {{/if}} -
-
-
diff --git a/ghost/admin/app/components/dashboard/v5/parts/loading.hbs b/ghost/admin/app/components/dashboard/v5/parts/loading.hbs deleted file mode 100644 index 82de91c330..0000000000 --- a/ghost/admin/app/components/dashboard/v5/parts/loading.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/ghost/admin/app/components/dashboard/v5/parts/percentage.hbs b/ghost/admin/app/components/dashboard/v5/parts/percentage.hbs deleted file mode 100644 index 666d46fbfa..0000000000 --- a/ghost/admin/app/components/dashboard/v5/parts/percentage.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{#if (gt @percentage 0) }} -
+{{ @percentage }}%
-{{else if (lt @percentage 0)}} -
{{ @percentage }}%
-{{else}} -
0%
-{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/resources/community.hbs b/ghost/admin/app/components/dashboard/v5/resources/community.hbs deleted file mode 100644 index 450bb50ba3..0000000000 --- a/ghost/admin/app/components/dashboard/v5/resources/community.hbs +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-

Ghost Creator Community

-
-
-
-
-

Talk strategy.
Get advice.
Or just hang out.

-
-
-
-
- Share the journey → -
- -
diff --git a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs b/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs deleted file mode 100644 index 1a46ea1cee..0000000000 --- a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs +++ /dev/null @@ -1,24 +0,0 @@ -
- -
diff --git a/ghost/admin/app/components/dashboard/v5/resources/resources.hbs b/ghost/admin/app/components/dashboard/v5/resources/resources.hbs deleted file mode 100644 index 502dd909dd..0000000000 --- a/ghost/admin/app/components/dashboard/v5/resources/resources.hbs +++ /dev/null @@ -1,23 +0,0 @@ -
- -
diff --git a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs b/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs deleted file mode 100644 index 9de9b699d7..0000000000 --- a/ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs +++ /dev/null @@ -1,33 +0,0 @@ -
- -
diff --git a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs b/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs deleted file mode 100644 index 0bafbd0aaa..0000000000 --- a/ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs +++ /dev/null @@ -1,33 +0,0 @@ -
-
-
-

What's new

-

All the latest improvements.

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

No new features yet.

-
- {{/each}} -
- {{/if}} -
-
-
- See more features → -
-
-
diff --git a/ghost/admin/app/components/gh-members-chart.hbs b/ghost/admin/app/components/gh-members-chart.hbs deleted file mode 100644 index 76d7ddc9c5..0000000000 --- a/ghost/admin/app/components/gh-members-chart.hbs +++ /dev/null @@ -1,11 +0,0 @@ -
- {{#if this.stats}} - - {{else}} - - {{/if}} -
\ No newline at end of file diff --git a/ghost/admin/app/components/gh-members-chart.js b/ghost/admin/app/components/gh-members-chart.js deleted file mode 100644 index fec8a7b336..0000000000 --- a/ghost/admin/app/components/gh-members-chart.js +++ /dev/null @@ -1,363 +0,0 @@ -/* global Chart */ -import Component from '@ember/component'; -import moment from 'moment'; -import {action, computed, get} from '@ember/object'; -import {getSymbol} from 'ghost-admin/utils/currency'; -import {inject as service} from '@ember/service'; -import {task} from 'ember-concurrency'; - -const DATE_FORMAT = 'D MMM YYYY'; - -export default Component.extend({ - ajax: service(), - membersStats: service(), - - // public attrs - nightShift: false, - lineColor: '#14b8ff', - - stats: null, - tagName: '', - chartStats: null, - chartData: null, - chartOptions: null, - showSummary: true, - showRange: true, - chartType: '', - chartSize: '', - chartHeading: 'Total members', - - isSmall: computed('chartSize', function () { - if (this.chartSize === 'small') { - return true; - } - return false; - }), - - startDateLabel: computed('membersStats.stats', function () { - if (!this.membersStats?.stats?.total_on_date) { - return ''; - } - - let firstDate = Object.keys(this.membersStats.stats.total_on_date)[0]; - return moment(firstDate).format(DATE_FORMAT); - }), - - selectedRange: computed('membersStats.days', function () { - const availableRanges = this.availableRanges; - return availableRanges.findBy('days', this.membersStats.days); - }), - - availableRanges: computed(function () { - return [{ - name: '30 days', - days: '30' - }, { - name: '90 days', - days: '90' - }, { - name: '365 days', - days: '365' - }, { - name: 'All time', - days: 'all-time' - }]; - }), - - // Lifecycle --------------------------------------------------------------- - - init() { - this._super(...arguments); - this.setChartJSDefaults(); - }, - - didReceiveAttrs() { - this._super(...arguments); - - if (this.chartStats) { - const {options, data, title, stats} = this.chartStats; - - this.set('stats', stats); - this.set('chartHeading', title); - this.setChartData(data); - this.setChartOptions(options); - } - - if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) { - const {options = {}} = this.chartStats; - - this.setChartOptions(options); - } - this._lastNightShift = this.nightShift; - }, - - // Actions ----------------------------------------------------------------- - - changeDateRange: action(function (range) { - this.membersStats.days = get(range, 'days'); - this.fetchStatsTask.perform(); - }), - - // Tasks ------------------------------------------------------------------- - - fetchStatsTask: task(function* () { - let stats; - if (!this.chartType) { - this.set('stats', null); - stats = yield this.membersStats.fetch(); - this.setOriginalChartData(stats); - } - }), - - setOriginalChartData(stats) { - if (stats) { - this.set('stats', stats); - - this.setChartOptions({ - rangeInDays: Object.keys(stats.total_on_date).length - }); - - this.setChartData({ - dateLabels: Object.keys(stats.total_on_date), - dateValues: Object.values(stats.total_on_date) - }); - } - }, - - // Internal ---------------------------------------------------------------- - - setChartData({dateLabels, dateValues, label = 'Total Members'}) { - let backgroundColors = this.lineColor; - - if (this.chartType === 'open-rate') { - backgroundColors = dateLabels.map((val) => { - if (val) { - return this.lineColor; - } else { - return (this.nightShift ? '#7C8B9A' : '#CED4D9'); - } - }); - } - - this.set('chartData', { - labels: dateLabels, - datasets: [{ - label: label, - cubicInterpolationMode: 'monotone', - data: dateValues, - fill: false, - backgroundColor: backgroundColors, - pointRadius: 0, - pointHitRadius: 10, - borderColor: this.lineColor, - borderJoinStyle: 'miter', - maxBarThickness: 20, - minBarLength: 2 - }] - }); - }, - - setChartOptions({rangeInDays}) { - let maxTicksAllowed = this.isSmall ? 3 : this.getTicksForRange(rangeInDays); - - if (this.chartType === 'open-rate') { - maxTicksAllowed = 0; - } - - this.setChartJSDefaults(); - let options = { - responsive: true, - responsiveAnimationDuration: 5, - maintainAspectRatio: false, - layout: { - padding: { - top: (this.isSmall ? 20 : 5), // Needed otherwise the top dot is cut - right: 10, - bottom: (this.isSmall ? 20 : 5), - left: 10 - } - }, - title: { - display: false - }, - tooltips: { - intersect: false, - mode: 'index', - displayColors: false, - backgroundColor: '#15171A', - xPadding: 7, - yPadding: 7, - cornerRadius: 5, - caretSize: 7, - caretPadding: 5, - bodyFontSize: 12.5, - titleFontSize: 12, - titleFontStyle: 'normal', - titleFontColor: 'rgba(255, 255, 255, 0.7)', - titleMarginBottom: 3, - filter: (tooltipItems, data) => { - if (this.chartType === 'open-rate') { - let label = data.labels[tooltipItems.index]; - if (label === '') { - return false; - } - } - return true; - }, - callbacks: { - label: (tooltipItems, data) => { - const labelText = data.datasets[tooltipItems.datasetIndex].label; - let valueText = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); - if (this.chartType === 'mrr') { - const currency = getSymbol(this.stats.currency); - valueText = `${currency}${valueText}`; - } - if (this.chartType === 'open-rate') { - valueText = `${valueText}%`; - } - return `${labelText}: ${valueText}`; - }, - title: (tooltipItems) => { - if (this.chartType === 'open-rate') { - if (tooltipItems.length) { - return tooltipItems[0].xLabel; - } else { - return ''; - } - } - return moment(tooltipItems[0].xLabel).format(DATE_FORMAT); - } - } - }, - hover: { - mode: 'index', - intersect: false, - animationDuration: 120 - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - labelString: 'Date', - gridLines: { - drawTicks: false, - color: (this.nightShift ? '#333F44' : '#DDE1E5'), - zeroLineColor: (this.nightShift ? '#333F44' : '#DDE1E5') - }, - ticks: { - display: false, - maxRotation: 0, - minRotation: 0, - padding: 6, - autoSkip: false, - fontColor: '#626D79', - maxTicksLimit: 10, - callback: (value, index, values) => { - let step = (values.length - 1) / (maxTicksAllowed); - let steps = []; - for (let i = 0; i < maxTicksAllowed; i++) { - steps.push(Math.ceil(i * step)); - } - - if (index === 0) { - return value; - } - if (index === (values.length - 1) && this.chartType !== 'open-rate') { - return 'Today'; - } - - if (steps.includes(index)) { - return ''; - } - } - } - }], - yAxes: [{ - gridLines: { - drawTicks: false, - display: false, - drawBorder: false - }, - ticks: { - maxTicksLimit: 5, - fontColor: '#7C8B9A', - padding: 8, - precision: 0, - callback: (value) => { - const currency = this.chartType === 'mrr' ? getSymbol(this.stats.currency) : ''; - if (parseInt(value) >= 1000) { - return currency + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); - } else { - return currency + value; - } - } - } - }] - } - }; - - if (this.chartType === 'mrr' || this.chartType === 'all-members') { - const chartData = this.chartData.datasets[0].data; - let allZeros = true; - for (let i = 0; i < chartData.length; i++) { - const element = chartData[i]; - if (element !== 0) { - allZeros = false; - break; - } - } - if (allZeros) { - options.scales.yAxes[0].ticks.suggestedMin = 0; - options.scales.yAxes[0].ticks.suggestedMax = 100; - } - } - - if (this.chartType === 'open-rate') { - options.scales.yAxes[0].ticks.suggestedMin = 0; - } - - if (this.isSmall) { - options.scales.yAxes[0].ticks.display = false; - options.scales.xAxes[0].gridLines.display = true; - } - this.set('chartOptions', options); - }, - - getTicksForRange(rangeInDays) { - if (rangeInDays <= 30) { - return 5; - } else if (rangeInDays <= 90) { - return 10; - } else { - return 15; - } - }, - - setChartJSDefaults() { - Chart.defaults.LineWithLine = Chart.defaults.line; - Chart.controllers.LineWithLine = Chart.controllers.line.extend({ - draw: function (ease) { - Chart.controllers.line.prototype.draw.call(this, ease); - - if (this.chart.tooltip._active && this.chart.tooltip._active.length) { - let activePoint = this.chart.tooltip._active[0]; - let ctx = this.chart.ctx; - let x = activePoint.tooltipPosition().x; - let topY = this.chart.scales['y-axis-0'].top; - let bottomY = this.chart.scales['y-axis-0'].bottom; - - // draw line - ctx.save(); - ctx.beginPath(); - ctx.moveTo(x, topY); - ctx.lineTo(x, bottomY); - ctx.lineWidth = 1; - ctx.strokeStyle = (this.nightShift ? 'rgba(62, 176, 239, 0.65)' : 'rgba(62, 176, 239, 0.1)'); - ctx.stroke(); - ctx.restore(); - } - } - }); - } -}); diff --git a/ghost/admin/app/controllers/dashboard.js b/ghost/admin/app/controllers/dashboard.js index 9c5bff9868..32db332b08 100644 --- a/ghost/admin/app/controllers/dashboard.js +++ b/ghost/admin/app/controllers/dashboard.js @@ -2,64 +2,68 @@ import Controller from '@ember/controller'; import {action} from '@ember/object'; import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency'; -import {tracked} from '@glimmer/tracking'; + +// Options 30 and 90 need an extra day to be able to distribute ticks/gridlines evenly +const DAYS_OPTIONS = [{ + name: '7 Days', + value: 7 +}, { + name: '30 Days', + value: 30 + 1 +}, { + name: '90 Days', + value: 90 + 1 +}]; export default class DashboardController extends Controller { - @service feature; - @service session; - @service membersStats; - @service store; - @service settings; - @service whatsNew; + @service dashboardStats; - @tracked whatsNewEntries = null; - @tracked whatsNewEntriesLoading = null; - @tracked whatsNewEntriesError = null; - - get showMembersData() { - return this.settings.get('membersSignupAccess') !== 'none'; - } - - get showMembersGraphs() { - if (!this.feature.improvedOnboarding) { - return this.showMembersData; - } - - const hasMembers = this.store.peekAll('member').length > 0; - - return this.showMembersData - && this.checkMemberCountTask.performCount > 0 - && hasMembers; - } - - initialise() { - if (!this.feature.get('dashboardV5')) { - this.loadWhatsNew(); - this.checkMemberCountTask.perform(); - } - } - - loadWhatsNew() { - this.whatsNewEntriesLoading = true; - this.whatsNew.fetchLatest.perform().then(() => { - this.whatsNewEntriesLoading = false; - this.whatsNewEntries = this.whatsNew.entries.slice(0, 3); - }, (error) => { - this.whatsNewEntriesError = error; - this.whatsNewEntriesLoading = false; - }); - } - - @action - dismissLaunchBanner() { - this.settings.set('editorIsLaunchComplete', true); - this.settings.save(); - } + daysOptions = DAYS_OPTIONS; @task - *checkMemberCountTask() { - if (this.store.peekAll('member').length === 0) { - yield this.store.query('member', {limit: 1}); - } + *loadSiteStatusTask() { + yield this.dashboardStats.loadSiteStatus(); + return {}; + } + + @action + onDaysChange(selected) { + this.days = selected.value; + } + + get days() { + return this.dashboardStats.chartDays; + } + + set days(days) { + this.dashboardStats.chartDays = days; + } + + get selectedDaysOption() { + return this.daysOptions.find(d => d.value === this.days); + } + + get isLoading() { + return this.dashboardStats.siteStatus === null; + } + + get totalMembers() { + return this.dashboardStats.memberCounts?.total ?? 0; + } + + get isTotalMembersZero() { + return this.dashboardStats.memberCounts && this.totalMembers === 0; + } + + get hasPaidTiers() { + return this.dashboardStats.siteStatus?.hasPaidTiers; + } + + get areNewslettersEnabled() { + return this.dashboardStats.siteStatus?.newslettersEnabled; + } + + get areMembersEnabled() { + return this.dashboardStats.siteStatus?.membersEnabled; } } diff --git a/ghost/admin/app/routes/dashboard.js b/ghost/admin/app/routes/dashboard.js index 7a3135ae79..d26b02c514 100644 --- a/ghost/admin/app/routes/dashboard.js +++ b/ghost/admin/app/routes/dashboard.js @@ -1,7 +1,7 @@ import AuthenticatedRoute from 'ghost-admin/routes/authenticated'; export default class DashboardRoute extends AuthenticatedRoute { - beforeModel() { + async beforeModel() { super.beforeModel(...arguments); if (this.session.user.isContributor) { @@ -17,7 +17,12 @@ export default class DashboardRoute extends AuthenticatedRoute { }; } + // trigger a background load of members plus labels for filter dropdown setupController() { - this.controller.initialise(); + super.setupController(...arguments); + } + + model() { + return this.controllerFor('dashboard').loadSiteStatusTask.perform(); } } diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js index 47e7ef6a06..889be85658 100644 --- a/ghost/admin/app/services/feature.js +++ b/ghost/admin/app/services/feature.js @@ -56,7 +56,6 @@ export default class FeatureService extends Service { nightShift; // labs flags - @feature('dashboardV5') dashboardV5; @feature('membersActivity') membersActivity; @feature('urlCache') urlCache; @feature('beforeAfterCard') beforeAfterCard; diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 1dc461a181..fb60b51573 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -69,7 +69,6 @@ @import "layouts/fullscreen-wizard.css"; @import "layouts/post-preview.css"; @import "layouts/dashboard.css"; -@import "layouts/dashboard-v5.css"; @import "layouts/tiers.css"; @import "layouts/offers.css"; @@ -975,7 +974,6 @@ input:focus, /* Members activity */ .gh-members-activity-icon svg path, -.gh-dashboard-activity-container svg path, .gh-member-feed-icon svg path { stroke: #fff; } @@ -1049,22 +1047,6 @@ input:focus, } .gh-dashboard-box { - border-color: var(--lightgrey); -} - -.gh-dashboard-btn { - border: none; - background: var(--black) !important; - color: #394047 !important; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05); - outline: none; -} - -.gh-dashboard-btn:hover { - background: var(--white); -} - -.gh-dashboard5-box { flex: 1; border: 1px solid var(--lightgrey); } @@ -1121,77 +1103,77 @@ kbd { /* Dashboard v5 */ -.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats { +.gh-dashboard .gh-dashboard-anchor .gh-dashboard-stats { background: transparent; border-top-color: #2b2d31; } -.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button { +.gh-dashboard .gh-dashboard-anchor .gh-dashboard-stats-button { border-color: #202429; } -.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected { +.gh-dashboard .gh-dashboard-anchor .gh-dashboard-stats-button.is-selected { border-color: #394047; } -.gh-dashboard5 .gh-dashboard5-list-header, -.gh-dashboard5 .gh-dashboard5-list-item, -.gh-dashboard5 .gh-dashboard5-list-footer { +.gh-dashboard .gh-dashboard-list-header, +.gh-dashboard .gh-dashboard-list-item, +.gh-dashboard .gh-dashboard-list-footer { border-color: #394047; } -.gh-dashboard5 .gh-dashboard5-box.is-secondary { +.gh-dashboard .gh-dashboard-box.is-secondary { border: 1px solid #2b2d31; } -.gh-dashboard5 .gh-dashboard5-box.is-secondary, -.gh-dashboard5 .gh-dashboard5-box.is-faded { +.gh-dashboard .gh-dashboard-box.is-secondary, +.gh-dashboard .gh-dashboard-box.is-faded { background: transparent; } -.gh-dashboard5 .gh-dashboard5-column { +.gh-dashboard .gh-dashboard-column { border-color: #2b2d31; } -.gh-dashboard5 .gh-dashboard5-breakout { +.gh-dashboard .gh-dashboard-breakout { background: #111213; } -.gh-dashboard5-community .gh-dashboard5-list-footer { +.gh-dashboard-community .gh-dashboard-list-footer { border-color: transparent; } -.gh-dashboard5-chart-gradient { +.gh-dashboard-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, -.gh-dashboard5-whats-new .gh-dashboard5-resource-body { +.gh-dashboard-staff-picks .gh-dashboard-resource-body, +.gh-dashboard-resource-box.is-secondary .gh-dashboard-resource-footer, +.gh-dashboard-whats-new .gh-dashboard-resource-body { border-color: #2c2e32; } -.gh-dashboard5-list-item:hover { +.gh-dashboard-list-item:hover { background: #1c1e21; } -.gh-dashboard5-recents .gh-dashboard5-list-item:hover { +.gh-dashboard-recents .gh-dashboard-list-item:hover { background: rgba(28, 30, 33, 0.7); } -.gh-dashboard5-resource .gh-dashboard5-list-item:hover { +.gh-dashboard-resource .gh-dashboard-list-item:hover { background: rgba(28, 30, 33, 0.3); } -.gh-dashboard5-community .gh-dashboard5-resource-footer { +.gh-dashboard-community .gh-dashboard-resource-footer { color: #fff; } -.gh-dashboard5-zero { +.gh-dashboard-zero { background: rgb(21, 23, 25, 0.8); } -.gh-dashboard5-zero-message { +.gh-dashboard-zero-message { background-color: #1c1e21; } diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index 6f035b4859..164a143f7a 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -69,7 +69,6 @@ @import "layouts/fullscreen-wizard.css"; @import "layouts/post-preview.css"; @import "layouts/dashboard.css"; -@import "layouts/dashboard-v5.css"; @import "layouts/tiers.css"; @import "layouts/offers.css" diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css deleted file mode 100644 index f64f6fe9aa..0000000000 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ /dev/null @@ -1,2038 +0,0 @@ -/* --------------------------------- -Dashboard v5 Prototype */ - -.prototype-control-panel { - margin-top: 50vh; /* Keep it out of view */ -} - -.prototype-states-buttons { - margin-top: 15px; - display: flex; - flex-direction: row; - gap: 10px; -} - -.prototype-paid-mix-dropdown { - position: absolute; - right: 0px; - top: 8px; -} - -.prototype-counts { - display: flex; - flex-direction: row; - align-items: stretch; - gap: 28px; -} - -.prototype-section { - margin-bottom: 40px; -} - -.prototype-section > h2 { - font-size: 1.65rem; - font-weight: 600; - line-height: 1.4em; - margin-bottom: 8px; - color: var(--black); -} - -.prototype-counts.col { - flex-direction: column; -} - -.prototype-counts > * { - flex-grow: 1; - min-width: 0; - flex-basis: 0; -} - -.prototype-box { - border: 1px solid var(--whitegrey); - padding: 28px; - position: relative; -} - -.prototype-box .number { - font-size: 24px; -} - - -/* --------------------------------- -Dashboard v5 Layout */ - -.gh-dashboard5 { - -} - -.gh-dashboard5-layout { - position: relative; - max-width: 1230px; - margin: 0 auto; -} - -.gh-dashboard5-rows { - flex: 1; - display: flex; - flex-direction: column; -} - -.gh-dashboard5-row { - flex: 1; - padding: 0 0 16px 0; - display: flex; - flex-direction: column; - justify-content: flex-start; -} - -.gh-dashboard5-row:last-child { - padding-top: 32px; -} - -.gh-dashboard5-section { - display: flex; - margin-bottom: 24px; -} - -.gh-dashboard5-section-main { - margin-right: 8px; /* grid layout adjustments */ -} - -.gh-dashboard5-section-aside { - margin-left: -8px; /* grid layout adjustments */ -} - -.gh-dashboard5-split { - display: grid; - grid-gap: 24px; - 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; - 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; - margin: 0 0 20px; -} - -.gh-dashboard5-title h4 { - font-size: 1.5rem; - font-weight: 600; - color: var(--black); - margin: 0; - padding: 0; -} - -.gh-dashboard5-subtitle { - display: flex; - flex-direction: row; - margin: 0 0 20px; -} - -.gh-dashboard5-subtitle h4 { - font-size: 1.2rem; - font-weight: 600; - text-transform: uppercase; - color: var(--black); - margin: 0; - padding: 0; - transition: color .3s; -} - -.gh-dashboard5-box { - flex: 1; - border: 1px solid var(--whitegrey); - padding: 28px 24px 24px; - border-radius: 6px; - display: flex; - flex-direction: column; - position: relative; - align-items: stretch; -} - -.gh-dashboard5-box.gh-dashboard5-split { - display: grid; - padding: 24px 0; - margin-bottom: 24px; -} - -.gh-dashboard5-box.gh-dashboard5-split section:nth-child(odd) { - margin-left: 24px; -} - -.gh-dashboard5-box.gh-dashboard5-split section:nth-child(even) { - margin-left: 0; - margin-right: 24px; -} - -.gh-dashboard5-box.is-secondary { - background: var(--main-color-content-greybg); - border-color: var(--main-color-content-greybg); -} - -.gh-dashboard5-box.is-faded { - background: rgb(240,240,240); - background: linear-gradient(310deg, rgba(249,249,249,1) 0%, rgba(254,254,254,1) 100%); -} - -.gh-dashboard5-columns { - flex: 1; - padding: 0; - display: flex; - flex-direction: row; - position: relative; - align-items: stretch; - background: transparent; -} - -.gh-dashboard5-columns > .gh-dashboard5-column { - flex: 1; - border-left: 1px solid var(--whitegrey); - padding: 4px 24px; - position: relative; -} - -.gh-dashboard5-columns > .gh-dashboard5-column:first-child { - padding-left: 0; - border-left: 0 none; -} - -.gh-dashboard5-columns > .gh-dashboard5-column:last-child { - padding-right: 0; -} - -.gh-dashboard5-minicharts { - flex: 1; - padding: 0; - display: flex; - flex-direction: row; - position: relative; - align-items: stretch; - background: transparent; -} - -.gh-dashboard5-minichart { - flex: 1; - border-left: 1px solid var(--whitegrey); - padding: 4px 16px 0 24px; - position: relative; -} - -.gh-dashboard5-minichart .gh-dashboard5-data { - position: absolute; - pointer-events: none; - height: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - margin-right: 16px; - min-height: 88px; -} - -.gh-dashboard5-minicharts .gh-dashboard5-chart { - flex: auto; - padding: 0; - height: 88px; - padding: 0; - padding-left: 45%; - width: 100%; -} - -@media screen and (max-width: 1400px) { - .gh-dashboard5-minicharts .gh-dashboard5-chart { - padding-left: 50%; - } -} - -@media screen and (max-width: 1320px) { - .gh-dashboard5-minicharts .gh-dashboard5-chart { - padding-left: 60%; - } -} - -@media screen and (max-width: 1120px) { - .gh-dashboard5-minicharts .gh-dashboard5-chart { - padding-left: 0%; - } -} - -.gh-dashboard5-minichart:first-child .gh-dashboard5-data { - left: 0; -} - -.gh-dashboard5-minichart:first-child { - padding-left: 0; - border-left: 0 none; -} - -.gh-dashboard5-minichart:last-child { - padding-right: 0; -} - -.gh-dashboard5-minichart.is-tiers { - flex-direction: column; -} - -.gh-dashboard5-minichart.is-tiers .gh-dashboard5-chart { - padding: 0; -} - -.gh-dashboard5-minichart .gh-dashboard5-chart-box { - height: 88px; -} - -.gh-dashboard5-legend { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-end; - padding: 0 0 8px; -} - -.gh-dashboard5-legend-item { - font-size: 1.3rem; - font-weight: 500; - line-height: 1.4em; - letter-spacing: 0; - color: var(--midgrey); - padding: 0 0 0 16px; - position: relative; -} - -.gh-dashboard5-legend-item::after { - content: ''; - width: 9px; - height: 9px; - border-radius: 8px; - background: #8E42FF; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); -} - -.gh-dashboard5-legend-item:last-child::after { - background: #FB76B4; -} - -.gh-dashboard5-tabs { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; -} - -.gh-dashboard5-tab { - opacity: 0.33; - margin: 0 24px 0 0; -} - -.gh-dashboard5-tab.is-selected { - opacity: 1; -} - -.gh-dashboard5-hero { - flex: 1; - display: flex; - flex-direction: column; - position: relative; - align-items: stretch; -} - -.gh-dashboard5-hero.is-solo .gh-dashboard5-metric { - margin-top: 4px; - margin-bottom: 12px; -} - -.gh-dashboard5 .gh-members-help { - margin-top: 0; -} - -.gh-dashboard5-select { - position: absolute; - top: 14px; - right: 4px; - z-index: 99; -} - -.gh-dashboard5-select .gh-dashboard5-select { - height: 36px; -} - -.gh-dashboard5-select .ember-power-select-selected-item { - font-size: 1.25rem; - font-weight: 600; - letter-spacing: -.1px; - line-height: 1em; - padding: 0 0 10px; - color: var(--middarkgrey); - white-space: nowrap; -} - -.gh-contentfilter-menu-dropdown.is-narrow { - width: auto; -} - -.gh-contentfilter-menu-dropdown.is-narrow .ember-power-select-option { - padding-right: 32px; -} - -.gh-dashboard5-select-title { - display: flex; - justify-content: flex-start; - margin: -12px 0 -12px -13px; - z-index: 1; -} - -.gh-dashboard5-select-title .ember-power-select-selected-item { - font-size: 1.5rem; - font-weight: 700; - line-height: 1em; - margin: 0; - padding: 0; - letter-spacing: -0.3px; - white-space: nowrap; - color: var(--black); -} - -.gh-dashboard5 .ember-power-select-trigger { - transition: none; -} - -.gh-dashboard5-layout > .gh-dashboard5-select { - top: -62px; - right: -8px; - z-index: 999; -} - -.gh-dashboard5-triple { - display: flex; - flex-direction: column; -} - -.gh-dashboard5-articles { - flex: 1; - display: flex; - flex-direction: row; -} - -.gh-dashboard5-breakout { - width: calc(100% + 48px + 48px); - background: #fcfcfc; - padding: 24px 0 50vh; - margin-left: -48px; - margin-right: -48px; -} - -.gh-dashboard5-inner { - max-width: 1230px; - min-width: 850px; - margin: 0 auto; -} - -.gh-dashboard5-subhead { - padding: 0 24px 24px; -} - - -/* --------------------------------- -Dashboard v5 Chart */ - -.gh-dashboard5-chart { - display: flex; - flex-direction: row; - flex: 1; -} - -.gh-dashboard5-chart-loading { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - 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; - font-size: 1.2rem; - text-transform: none; - font-weight: 500; - letter-spacing: 0; - display: flex; - flex-direction: column; - justify-content: space-between; - font-size: 1.1rem; - color: var(--midgrey); - line-height: 1em; -} - -.gh-dashboard5-chart-container { - flex: 1; - position: relative; -} - -.gh-dashboard5-chart-box { - position: relative; - height: 200px; - width: 99%; /* ChartJS hack to resize with window */ -} - -.gh-dashboard5-chart-gradient { - pointer-events: none; - position: absolute; - top: 0; - left: 0; - width: 32px; - height: 100%; - background: rgb(255,255,255); - background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); -} - -.gh-dashboard5-chart-box canvas { - height: 100% !important; -} - -.gh-dashboard5-minichart .gh-dashboard5-content { - display: flex; -} - -.gh-dashboard5-mrr .gh-dashboard5-metric-value { - flex-direction: column; - align-items: flex-start; - margin-bottom: 0; -} - -.gh-dashboard5-mrr .gh-dashboard5-percentage { - margin-top: 15px; -} - -.gh-dashboard5-mix .gh-dashboard5-data { - position: absolute; - top: 4px; - bottom: 0; - left: 24px; -} - -.gh-dashboard5-mix .gh-dashboard5-chart.narrow { - /* margin-left: -80px; */ - padding-left: 30%; -} - - -/* --------------------------------- -Dashboard v5 Percentage */ - -.gh-dashboard5-percentage { - flex: 0; - border-radius: 3px; - font-size: 1.5rem; - line-height: 1; - font-weight: 500; - letter-spacing: 0; - color: var(--midgrey-l2); - padding: 0; - margin: 5px 0 3px 0; -} - -.gh-dashboard5-percentage.is-positive { - color: var(--green); -} - -.gh-dashboard5-percentage.is-negative { - color: var(--pink); -} - - -/* --------------------------------- -Dashboard v5 Metric */ - -.gh-dashboard5-metric { - display: flex; - flex-direction: column; -} - -.gh-dashboard5-metric.is-center { - align-items: center; -} - -.gh-dashboard5-metric.is-stretch { - flex: 1; - justify-content: space-between; -} - -.gh-dashboard5-metric-data { - display: flex; - flex-direction: column; -} - -.gh-dashboard5-metric-label { - align-items: center; - font-size: 1.55rem; - font-weight: 700; - line-height: 1em; - margin: 0 0 8px; - padding: 0; - color: var(--black); - white-space: nowrap; - letter-spacing: -.3px; -} - -.gh-dashboard5-metric.is-reverse .gh-dashboard5-metric-label { - margin: 2px 0 0; -} - -.gh-dashboard5-metric.is-center .gh-dashboard5-metric-label { - text-align: center; - margin-top: 4px; -} - -.gh-dashboard5-metric-label.is-secondary { - font-size: 1.3rem; - font-weight: 500; - color: var(--midgrey); - letter-spacing: 0; -} - -.gh-dashboard5-metric-value { - display: flex; - align-items: flex-end; - font-size: 2.6rem; - font-weight: 700; - letter-spacing: -.4px; - line-height: 1em; - white-space: nowrap; - margin: 0 0 12px; - color: var(--black); -} - -.gh-dashboard5-metric-value .value { - margin-right: 8px; -} - -.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value { - font-size: 3.2rem; - letter-spacing: -0.8px; - margin-bottom: 0; -} - -.gh-dashboard5-metric.is-center .gh-dashboard5-metric-value { - justify-content: center; -} - -.gh-dashboard5-metric.is-reverse.is-large .gh-dashboard5-metric-value { - margin-bottom: 8px; -} - -.gh-dashboard5-metric-value.is-secondary { - margin: 0 0 8px; -} - -.gh-dashboard5-metric.is-tooltip .gh-dashboard5-metric-label { - font-size: 1.3rem; - margin-bottom: 8px; -} - -.gh-dashboard5-metric.is-tooltip .gh-dashboard5-metric-value{ - font-size: 2rem; -} - -.gh-dashboard5-metric-minivalue { - font-size: 1.5rem; - font-weight: 700; - color: var(--darkgrey); - text-decoration: none; -} - -.gh-dashboard5-metric-minivalue.na { - color: var(--lightgrey); - font-weight: 500; -} - -.gh-dashboard5-metric-extra { - text-transform: none; - font-weight: 500; - letter-spacing: .2px; - font-size: 1.1rem; - letter-spacing: .2px; - color: var(--midlightgrey); - line-height: 1em; -} - - -/* --------------------------------- -Dashboard v5 List */ - -.gh-dashboard5-list { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.gh-dashboard5-list-header { - display: grid; - grid-template-columns: 50% 20% 30%; - padding: 0 0 8px; - border-bottom: 1px solid var(--whitegrey); -} - -.gh-dashboard5-list-title { - align-items: center; - line-height: 1em; - white-space: nowrap; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.1px; - color: var(--midgrey); - padding: 0 20px 8px 0; - text-transform: uppercase; - white-space: nowrap; -} - -.gh-dashboard5-list-body { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-evenly; -} - -.gh-dashboard5-list-item { - padding: 14px 0; - display: grid; - grid-template-columns: 50% 20% 30%; - padding: 4px 0; -} - -.gh-dashboard5-list-item:nth-child(3) { - border-bottom: 0 none; -} - -.gh-dashboard5-list-item:last-child { - border-bottom: 0; -} - -.gh-dashboard5-recents .gh-dashboard5-list-item:hover { - background: linear-gradient(315deg,#fafafb 60%,#fff); -} - -.gh-dashboard5-resource .gh-dashboard5-list-item:hover { - background: linear-gradient(315deg,rgba(249, 249, 250, 0.5) 60%,rgba(255, 255, 255, 0.5)); -} - -.gh-dashboard5-list-text { - font-weight: 600; - font-size: 1.5rem; - color: var(--darkgrey); - padding: 0 32px 0 0; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.gh-dashboard5-list-subtext { - font-weight: 500; - font-size: 1.4rem; - color: var(--middarkgrey); - text-decoration: none; - padding: 0 32px 0 0; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.gh-dashboard5-list-item svg { - width: 20px; - min-width: 20px; - height: 20px; - margin: 0 0.5rem 0 -4px; -} - -.gh-dashboard5-list-item-sub { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - min-height: 32px; - min-width: 0; -} - -.gh-dashboard5-list-footer { - border-top: 1px solid var(--whitegrey); - padding: 20px 0 0; -} - -.gh-dashboard5-list-date { - font-size: 1.3rem; - color: var(--midlightgrey); - text-align: right; - padding: 3px 0 0 0; - white-space: nowrap; -} - -.gh-dashboard5-list-author { - font-size: 1.3rem; - color: var(--midlightgrey); - text-align: right; - padding: 1px 0 0 0; - white-space: nowrap; -} - -.gh-dashboard5-list-empty { - flex: 1; -} - - -/* --------------------------------- -Dashboard v5 Overview */ - -.gh-dashboard5-overview { - position: relative; -} - -.gh-dashboard5-overview.is-hidden { - display: none; -} - -.gh-dashboard5-overview .gh-dashboard5-area { - flex-direction: row; - padding: 24px; -} - -.gh-dashboard5-overview .gh-dashboard5-box { - padding-top: 20px; - padding-bottom: 20px; -} - -.gh-dashboard5-overview .gh-dashboard5-area > div { - flex: 1; - border-right: 1px solid var(--whitegrey); - padding-top: 4px; - padding-bottom: 4px; - padding-left: 24px; -} - -.gh-dashboard5-overview .gh-dashboard5-area > div:first-child { - padding-left: 0; -} - - -/* --------------------------------- -Dashboard v5 Anchor */ - -.gh-dashboard5-anchor { - position: relative; -} - -.gh-dashboard5-anchor .gh-dashboard5-box { - padding-bottom: 24px; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats { - display: flex; - flex-direction: row; - width: calc(100% + 48px); - padding: 8px; - margin: 4px -24px -8px; - border-radius: 0 0 4px 4px; - background: rgba(253,253,253,1); - border-top: 1px solid var(--whitegrey); -} - -.gh-dashboard5-anchor.is-top .gh-dashboard5-stats { - margin-top: 0; - margin-bottom: 20px; - border-width: 0 0 1px; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats-button { - cursor: pointer; - position: relative; - flex: 1; - padding: 14px 24px 18px; - margin: 2px 8px 2px 2px; - text-align: left; - background: transparent; - border-radius: 5px; - color: var(--black); - border: 1px solid transparent; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats-button:last-child { - margin-right: 2px; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected { - color: var(--black); - background: var(--white); - box-shadow: 0 2px 4px rgb(0 0 0 / 2%); - border-color: rgb(235 235 235); -} - -.gh-dashboard5-anchor .gh-dashboard5-stats.is-solo .gh-dashboard5-stats-button.is-selected { - background: transparent; - box-shadow: 0 none; - border: 0 none; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats-highlight { - width: 1px; - height: 3px; - border-radius: 5px; - background: var(--whitegrey); - margin: 8px 0 0; - background: #5B98F2; - opacity: 0; - transition: width 175ms ease-out, opacity 125ms linear; -} - -.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected .gh-dashboard5-stats-highlight { - width: 25px; - opacity: 1; -} - -.gh-dashboard5-anchor .gh-dashboard5-chart { - flex-direction: column; -} - -.gh-dashboard5-anchor .gh-dashboard5-chart-ticks { - flex-direction: row; - padding: 10px 0; - font-size: 1.2rem; - color: var(--midlightgrey); -} - -.gh-dashboard5-anchor .gh-dashboard5-minicharts { - margin-top: 32px; -} - -.gh-dashboard5-mix .gh-dashboard5-select { - top: -7px; - right: -18px; -} - -.gh-dashboard5-group { - position: relative; -} - - -/* --------------------------------- -Dashboard v5 Zero */ - -.gh-dashboard5-zero { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255,255,255,0.8); - border: 1px solid var(--whitegrey); - border-radius: 6px; - z-index: 99; - - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); - display: flex; - align-items: center; - justify-content: center; -} - -.gh-dashboard5-zero-message { - background: #fff url(icons/analytics.svg) no-repeat 50% 36px; - background-size: 48px 48px; - min-width: 400px; - padding: 96px 48px 52px; - border-radius: 8px; - text-align: center; - box-shadow: 0 4px 24px rgba(0,0,0,0.066); -} - -.gh-dashboard5-zero-message h4 { - font-size: 1.7rem; - font-weight: 700; - line-height: 1em; - margin: 0 0 10px; - padding: 0; - color: var(--black); - white-space: nowrap; - letter-spacing: -.3px; -} - -.gh-dashboard5-zero-message p { - font-size: 1.4rem; - font-weight: 600; - line-height: 1.5em; - color: var(--middarkgrey); - letter-spacing: -.1px; - padding: 0; - margin: 0 0 16px; -} - -.gh-dashboard5-zero-message p:last-child { - padding: 0; - margin: 0; -} - -.gh-dashboard5-zero-message a { - background: rgb(174,90,239); - background: linear-gradient(90deg, rgba(174,90,239,1) 0%, rgba(233,84,179,1) 100%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - transition: filter 100ms linear; - filter: brightness(1); -} - -.gh-dashboard5-zero-message a:hover { - filter: brightness(0.8); -} - - -/* --------------------------------- -Dashboard v5 Engagement */ - -.gh-dashboard5-engagement { - position: relative; -} - -.gh-dashboard5-engagement .gh-dashboard5-columns { - padding-top: 10px; -} - -.gh-dashboard5-engagement .gh-dashboard5-select { - top: 16px; - right: 6px; -} - - -/* --------------------------------- -Dashboard v5 Recent Posts */ - -.gh-dashboard5-recent-posts { - position: relative; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-box { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-title { - margin-bottom: 24px; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-list-item { - height: 100%; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span { - width: 80%; - overflow: hidden; - color: var(--darkgrey); - display: flex; - justify-content: flex-start; - align-items: center; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span { - display: inline-block; - height: 57px; -} - -.gh-dashboard5-recent-posts .gh-content-entry-title { - font-weight: 600; - font-size: 14px !important; - color: rgb(21, 23, 26); -} - -.gh-dashboard5-recent-posts .footer { - padding-top: 12px; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-list-item > span { - font-size: 1.8rem; - font-weight: 600; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0 24px 4px 0; -} - -.gh-dashboard5-recent-posts .gh-dashboard5-list-header { - margin-top: 24px; -} - - -/* --------------------------------- -Dashboard v5 Recent Activity */ - -.gh-dashboard5-recent-activity { - position: relative; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-box { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-title { - margin-bottom: 20px; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-list-item { - display: flex; - flex-direction: row; - padding: 10px 0; - border-bottom: 0 none; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-list-item .member-details { - flex: 1; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-list-item .member-avatar { - width: 28px; - height: 28px; - background: #70DEB1; - border-radius: 24px; - margin: 0 12px 0 0; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-list-header, -.gh-dashboard5-recent-activity .gh-dashboard5-list-item { - grid-template-columns: 80% 20%; -} - -.gh-dashboard5-recent-activity .gh-dashboard5-list-item > a > span { - color: var(--midgrey); - padding: 0 0 0 0.5rem; - white-space: nowrap; -} - - -/* --------------------------------- -Dashboard v5 Recents */ - -.gh-dashboard5-recents { - position: relative; -} - -.gh-dashboard5-recents .gh-dashboard5-box { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; -} - -.gh-dashboard5-recents .gh-dashboard5-list-body { - padding-top: 8px; - padding-bottom: 8px; -} - -.gh-dashboard5-recents .gh-dashboard5-title { - margin-bottom: 24px; -} - -.gh-dashboard5-recents .gh-dashboard5-list-item { - height: 100%; - padding-top: 6px; - padding-bottom: 6px; -} - -.gh-dashboard5-recents .gh-dashboard5-list-item a > span { - width: 80%; - overflow: hidden; - color: var(--darkgrey); - display: flex; - justify-content: flex-start; - align-items: center; -} - -.gh-dashboard5-recents .gh-dashboard5-list-item a > span { - display: inline-block; - height: 57px; -} - -.gh-dashboard5-recents .gh-dashboard5-list-title:last-child, -.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child { - margin-left: -6px; /* grid layout adjustments */ -} - -.gh-dashboard5-recents .gh-content-entry-title { - font-weight: 600; - font-size: 14px !important; - color: rgb(21, 23, 26); -} - -.gh-dashboard5-recents .footer { - padding-top: 12px; -} - -.gh-dashboard5-recents .gh-dashboard5-list-item > span { - font-size: 1.8rem; - font-weight: 600; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0 24px 4px 0; -} - -.gh-dashboard5-recents .gh-dashboard5-list-header { - margin-top: 16px; -} - -.gh-dashboard5-recents .gh-dashboard5-list-loading { - min-height: 220px; - display: flex; - align-items: center; - justify-content: center; -} - -.gh-dashboard5-recents .gh-dashboard5-list-title:last-child, -.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child { - margin-left: -6px; /* grid layout adjustments */ -} - -.gh-dashboard5-recents-activity .gh-dashboard5-list-header, -.gh-dashboard5-recents-activity .gh-dashboard5-list-item { - grid-template-columns: 35% 35% 30%; -} - -.gh-dashboard5-recents-activity .gh-dashboard5-list-title:nth-child(2), -.gh-dashboard5-recents-activity .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:nth-child(2) { - margin-left: -4px; /* grid layout adjustments */ -} - -.gh-dashboard5-recents-posts.is-single .gh-dashboard5-list-header, -.gh-dashboard5-recents-posts.is-single .gh-dashboard5-list-item { - grid-template-columns: 70% 30%; -} - - -/* --------------------------------- -Dashboard v5 Resources */ - -.gh-dashboard5-resources { - position: relative; -} - -.gh-dashboard5-resources .gh-dashboard5-resource-box { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 28px; -} - -.gh-dashboard5-resources .gh-dashboard5-resource-box, -.gh-dashboard5-newsletter .gh-dashboard5-resource-box { - box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%); - border: none; -} - -@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-resource-contents { - flex: 1; - display: flex; - flex-direction: column; - position: relative; - align-items: stretch; -} - -.gh-dashboard5-resources .gh-dashboard5-articles { - display: grid; - grid-gap: 24px; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto; - margin-top: 16px; -} - -.gh-dashboard5-resources .gh-dashboard5-articles-footer { - margin-top: 20px; -} - -.gh-dashboard5-resources .gh-members-help-card { - padding: 24px; -} - -.gh-dashboard5-resources .gh-dashboare5-article-content { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - font-size: 1.4rem; - padding: 24px 0; -} - -.gh-dashboard5-resources .gh-dashboare5-article-thumbnail { - flex: 2; - height: auto; - overflow: hidden; - border-radius: 3px; -} - -.gh-dashboard5-resources .gh-dashboare5-article-text { - flex: 3; - padding: 0 32px; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; -} - -.gh-dashboard5-resources .gh-dashboard5-resource-footer a { - display: inline-block; - padding: 8px 0; -} - - -/* --------------------------------- -Dashboard v5 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 Latest Newsletters */ - -.gh-dashboard5-newsletter { - position: relative; -} - -.gh-dashboard5-newsletter .gh-dashboard5-newsletter-items { - display: grid; - grid-gap: 24px; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto; - flex: 1; -} - -.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item h5 { - font-size: 1.4rem; - padding: 0 32px 0 0; -} - -.gh-dashboard5-resource-footer .gh-dashboard5-subscribe-button { - display: flex; - padding: 8px 12px; - align-items: center; - justify-content: center; - background: var(--black); - color: var(--white); - border-radius: 4px; -} - -.gh-dashboard5-resource-footer .gh-dashboard5-subscribe-button:hover { - color: var(--white); -} - -@media screen and (max-width: 1400px) { - .gh-dashboard5-subscribe-button > span { - display: none; - } -} - - -/* --------------------------------- -Dashboard v5 Community */ - -.gh-dashboard5-community { - position: relative; - grid-column: 1 / 3; -} - -.gh-dashboard5-community .gh-dashboard5-resource-box { - background: transparent; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: auto 105%; - background-image: url(img/community-background.jpg); - color: var(--white); - padding-top: 32px; - transition: all 1.2s ease-in-out; - border: 0 none; -} - -.gh-dashboard5-community .gh-dashboard5-resource-box:hover { - box-shadow: 0 54px 80px rgb(0 0 0 / 7%), 0 19.7109px 29.2013px rgb(0 0 0 / 5%), 0 9.56927px 14.1767px rgb(0 0 0 / 4%), 0 4.69103px 6.94968px rgb(0 0 0 / 3%), 0 1.85484px 2.74791px rgb(0 0 0 / 2%); - background-size: auto 108%; -} - -.gh-dashboard5-community .gh-dashboard5-list-body p { - font-size: 4.0rem; - font-weight: 700; - line-height: 1.3em; - padding: 64px 0; - margin-bottom: 0; - transition: color .3s; - color: #fff; -} - -.gh-dashboard5-community .gh-dashboard5-resource-footer { - border-color: transparent; -} - -.gh-dashboard5-community .gh-dashboard5-resource-footer a { - color: #fff; -} - -.gh-dashboard5-community .gh-dashboard5-resource-title:not(.is-large) h4 { - color: #fff; -} - - -/* --------------------------------- -Dashboard v5 Misc */ - -.gh-dashboard5 .gh-offers-help { - margin: 0; -} - -.gh-dashboard5 .gh-list-header { - border-bottom: 0; -} - -.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; - margin-right: 8px; -} - -.gh-dashboard5-rate-amount + span { - flex-shrink: 0; - padding-left: 15px; -} - -.gh-dashboard5-rate-amount > span { - 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; - min-width: 2px; -} - - -/* --------------------------------- -Dashboard v5 Resource */ - -.gh-dashboard5-resource { - position: relative; - display: flex; -} - -.gh-dashboard5-resource-box { - flex: 1; - border: 1px solid var(--whitegrey); - padding: 28px 24px 24px; - border-radius: 6px; - display: flex; - flex-direction: column; - position: relative; - align-items: stretch; - background: var(--white); -} - -.gh-dashboard-box.gh-dashboard5-box.is-secondary .gh-dashboard5-resource-box.link { - border: none; - box-shadow: 0 2px 4px rgb(0 0 0 / 7%); - transition: all .3s ease-in-out; -} - -.gh-dashboard5-resource-box.is-secondary { - border: none; - box-shadow: none; -} - -.gh-dashboard5-resource-title:not(.is-large) h4 { - font-size: 1.1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.3px; - color: var(--middarkgrey); - margin: 0 0 8px; - padding: 0; - transition: color .3s; -} - -.gh-dashboard5-resource-title.is-large h4 { - align-items: center; - font-size: 1.55rem; - font-weight: 700; - line-height: 1em; - margin: 0 0 8px; - padding: 0; - color: var(--black); - white-space: nowrap; - letter-spacing: -.3px; -} - -.gh-dashboard5-resource-title.has-border { - border-bottom: 1px solid var(--whitegrey); -} - -.gh-dashboard5-resource-title p { - margin: 8px 0 16px; - padding: 0; - color: var(--middarkgrey); - font-size: 1.55rem; -} - -.gh-dashboard5-resource-body { - flex: 1; - display: flex; - justify-content: flex-start; - padding-top: 12px; -} - -.gh-dashboard5-resource-footer { - padding: 20px 0 0; -} - -.gh-dashboard5-list-footer a, -.gh-dashboard5-resource-footer a { - font-weight: 500; - color: #2bba3c; -} - -.gh-dashboard5-list-footer a:hover, -.gh-dashboard5-resource-footer a:hover { - color: #269a34; -} - -.gh-dashboard5-resource-thumbnail { - border-radius: 4px; - width: 100%; - height: auto; - background: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(img/resource-1.jpg); -} - -.gh-dashboard5-resource-bigarticle { - display: flex; - flex-direction: row; - margin: 0 0 24px; - padding: 0; -} - -.gh-dashboard5-resource-bigarticle .gh-dashboard5-resource-thumbnail { - width: 40%; - display: flex; - justify-content: center; - align-items: center; -} - -.gh-dashboard5-resource-bigarticle h3 { - font-size: 1.8rem; - font-weight: 700; - transition: all 0.25 ease-in-out; -} - -.gh-dashboard5-resource-bigarticle:hover h3 { - opacity: 0.8; -} - -.gh-dashboard5-resource-bigarticle p { - font-size: 1.5rem; - color: var(--middarkgrey); - display: -webkit-box; - line-clamp: 3; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - margin: 0; - padding: 0; -} - -.gh-dashboard5-resource-smallarticles { - flex: 1; - display: flex; - flex-direction: row; -} - -.gh-dashboard5-resource-smallarticle { - flex: 1; - margin: 0 24px 0 0; - padding: 0 0 32px 0; - display: flex; - flex-direction: column; - justify-content: stretch; -} - -.gh-dashboard5-resource-smallarticle .gh-dashboard5-resource-thumbnail { - width: 100%; - margin: 0 0 12px; -} - -.gh-dashboard5-resource-smallarticle:last-child { - margin-right: 0; -} - -.gh-dashboard5-resource-secondary { - font-size: 1.3rem; - line-height: 1.5em; - font-weight: 400; - color: var(--midlightgrey); - padding: 0; - 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; - transition: all 0.25 ease-in-out; -} - -.gh-dashboard5-resource .gh-dashboard5-list-item:hover .gh-dashboard5-list-link { - opacity: 0.8; -} - -.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 a:hover { - color: #1788ce; -} - -.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg { - width: 20px; - height: 20px; - margin-right: 5px; -} - - -/* --------------------------------- -Dashboard v5 Tooltips */ - -.gh-dashboard5-tooltip { - opacity: 0; - position: absolute; - top: 0; - left: 0; - background: var(--white); - border-radius: 9px; - padding: 12px; - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.18), 0px 45px 80px rgba(0, 0, 0, 0.04), 0px 18.7999px 33.4221px rgba(0, 0, 0, 0.0287542), 0px 10.0513px 17.869px rgba(0, 0, 0, 0.0238443), 0px 5.6347px 10.0172px rgba(0, 0, 0, 0.02), 0px 2.99255px 5.32008px rgba(0, 0, 0, 0.0161557), 0px 1.24527px 2.21381px rgba(0, 0, 0, 0.0112458); - border-radius: 9px; - z-index: 9999; - pointer-events: none; - min-width: 80px; -} - -.gh-dashboard5-tooltip .gh-dashboard5-metric-value { - margin: 0; -} - -.gh-dashboard5-tooltip-label { - font-size: 1.2rem; - font-weight: 500; - line-height: 1em; - letter-spacing: 0; - color: var(--midlightgrey); - white-space: nowrap; - margin: 0 0 8px; -} - -.gh-dashboard5-tooltip-value { - display: flex; - align-items: baseline; - font-size: 1.5rem; - font-weight: 700; - letter-spacing: 0; - line-height: 1em; - white-space: nowrap; - color: var(--black); -} - -.gh-dashboard5-tooltip-value .indicator { - display: inline-block; - border-radius: 999px; - margin-right: 6px; -} - -.gh-dashboard5-tooltip-value .indicator.solid { - width: 9px; - height: 9px; -} - -.gh-dashboard5-tooltip-value .indicator.line { - width: 11px; - height: 11px; - border-width: 2px; - border-style: solid; -} - -.gh-dashboard5-tooltip-value .value { - font-size: 1.5rem; - margin-right: 8px; -} - -.gh-dashboard5-tooltip-value .metric { - font-size: 1.4rem; - font-weight: 400; - color: var(--middarkgrey); - padding: 0; -} - -.gh-dashboard5-totals .indicator { - position: relative; - border: none !important; - background: linear-gradient(225deg, #8E42FF 0%, #FB2D8D 100%); - width: 12px; - height: 12px; -} - -.gh-dashboard5-totals .indicator::before { - position: absolute; - background: var(--main-bg-color); - content: ""; - top: 2px; - right: 2px; - bottom: 2px; - left: 2px; - border-radius: 999px; -} - -.gh-dashboard5-totals .value { - font-size: 1.7rem; -} - -.gh-dashboard5-totals .metric { - font-size: 1.45rem; -} - -.gh-dashboard5-mrr .indicator { - border-color: #8E42FF; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip { - min-width: 140px; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value { - display: grid; - grid-template-columns: auto 1fr; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 { - margin-bottom: 4px; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .metric, -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .metric { - font-size: 1.3rem; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value, -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value { - display: inline-flex; - align-items: baseline; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .indicator { - background: #8E42FF; -} - -.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .indicator { - background: #FB76B4; -} - -.gh-dashboard5-mix .gh-dashboard5-tooltip-value .metric { - font-size: 1.3rem; -} - -.gh-dashboard5-totals { - margin-top: 24px; -} - -.gh-dashboard5-totals .gh-dashboard5-loading, -.gh-dashboard5-totals .gh-dashboard5-chart-container { - height: 200px; -} - -.gh-dashboard5-totals .gh-dashboard5-chart-container { - margin-right: -10px; /* fix 99% width ChartJS hack */ -} - -@media screen and (max-width: 1120px) { - .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 { - position: relative; - width: 50%; - top: 0; - left: 0; - } - - .gh-dashboard5-mix .gh-dashboard5-chart.narrow { - padding: 0; - } - - .gh-dashboard5-mix .gh-dashboard5-metric { - margin-top: 0; - } - - .gh-dashboard5-minichart .gh-dashboard5-select { - top: 4px; - } - - .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; - } - - .is-zero .gh-dashboard5-mrr, - .is-zero .gh-dashboard5-breakdown, - .is-zero .gh-dashboard5-mix, - .is-zero .gh-dashboard5-engagement-30days, - .is-zero .gh-dashboard5-engagement-7days { - display: none; - } -} - -@media screen and (max-width: 600px) { - .gh-dashboard5-box.gh-dashboard5-split { - grid-template-columns: 1fr; - grid-template-rows: auto auto; - } - - .gh-dashboard5-box.gh-dashboard5-split section { - margin-left: 24px !important; - margin-right: 24px !important; - } - - .gh-dashboard5-split { - grid-template-columns: 1fr; - grid-template-rows: auto auto auto; - } - - .gh-dashboard5-community { - grid-column: 1; - } -} diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index e59e95a6da..cecc16193c 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -1,79 +1,35 @@ -:root { - --dashboard-gap: 1.8vw; +/* --------------------------------- +Dashboard v5 Prototype */ + +.prototype-control-panel { + margin-top: 50vh; /* Keep it out of view */ } -.gh-dashboard { - display: grid; - grid-template-columns: 2fr 1fr; - grid-gap: var(--dashboard-gap); -} - -.gh-dashboard-area { +.prototype-states-buttons { + margin-top: 15px; display: flex; - flex-direction: column; + flex-direction: row; + gap: 10px; } -.gh-dashboard-header { +.prototype-paid-mix-dropdown { + position: absolute; + right: 0px; + top: 8px; +} + +.prototype-counts { display: flex; - align-items: center; - font-size: 1.1rem; - text-transform: uppercase; - font-weight: 500; - letter-spacing: .2px; - margin: -4px 0 4px; - padding: 0; - color: var(--black); -} - -.gh-dashboard-header svg { - width: 12px; - height: 12px; - margin-left: 8px; -} - -.gh-dashboard-header.secondary { - color: var(--midgrey); -} - -.gh-dashboard-summary.small .gh-dashboard-header { - margin-bottom: 6px; -} - -.gh-dashboard-list { - display: flex; - flex-direction: column; - flex-grow: 1; + flex-direction: row; align-items: stretch; - justify-content: flex-start; + gap: 28px; } -.gh-dashboard-container { - display: grid; - grid-template-columns: 1fr; - width: 100%; +.prototype-section { + margin-bottom: 40px; } -.gh-dashboard-container.col-2 { - grid-template-columns: 1fr 1fr; - grid-gap: var(--dashboard-gap); -} - -/* Generic box containers */ -.gh-dashboard-box { - display: flex; - flex-direction: column; - justify-content: space-between; - border: 1px solid var(--whitegrey); - border-radius: 3px; - padding: 28px; - margin-bottom: var(--dashboard-gap); -} - -.gh-dashboard-box .content { - color: var(--darkgrey); -} - -.gh-dashboard-box .content h2 { +.prototype-section > h2 { font-size: 1.65rem; font-weight: 600; line-height: 1.4em; @@ -81,569 +37,2004 @@ color: var(--black); } -.gh-dashboard-box .content h3 { - font-size: 1.9rem; - font-weight: 600; - line-height: 1.4em; - margin-bottom: 6px; - color: var(--black); +.prototype-counts.col { + flex-direction: column; } -.gh-dashboard-box .content p { +.prototype-counts > * { + flex-grow: 1; + min-width: 0; + flex-basis: 0; +} + +.prototype-box { + border: 1px solid var(--whitegrey); + padding: 28px; + position: relative; +} + +.prototype-box .number { + font-size: 24px; +} + + +/* --------------------------------- +Dashboard v5 Layout */ + +.gh-dashboard { + +} + +.gh-dashboard-layout { + position: relative; + max-width: 1230px; + margin: 0 auto; +} + +.gh-dashboard-rows { + flex: 1; + display: flex; + flex-direction: column; +} + +.gh-dashboard-row { + flex: 1; + padding: 0 0 16px 0; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.gh-dashboard-row:last-child { + padding-top: 32px; +} + +.gh-dashboard-section { + display: flex; + margin-bottom: 24px; +} + +.gh-dashboard-section-main { + margin-right: 8px; /* grid layout adjustments */ +} + +.gh-dashboard-section-aside { + margin-left: -8px; /* grid layout adjustments */ +} + +.gh-dashboard-split { + display: grid; + grid-gap: 24px; + grid-template-columns: 2fr 1fr; +} + +@media screen and (max-width: 1320px) { + .gh-dashboard-split { + grid-template-columns: 1fr 1fr; + } +} + +.gh-dashboard-thirds { + flex: 1; + display: flex; + flex-direction: row; +} + +.gh-dashboard-thirds .gh-dashboard-thirds-main { + flex: 70%; + padding-right: 32px; + display: flex; + flex-direction: column; +} + +.gh-dashboard-thirds .gh-dashboard-thirds-sub { + flex: 30%; + display: flex; + flex-direction: column; +} + +.gh-dashboard-title { + display: flex; + flex-direction: row; + margin: 0 0 20px; +} + +.gh-dashboard-title h4 { + font-size: 1.5rem; + font-weight: 600; + color: var(--black); + margin: 0; + padding: 0; +} + +.gh-dashboard-subtitle { + display: flex; + flex-direction: row; + margin: 0 0 20px; +} + +.gh-dashboard-subtitle h4 { + font-size: 1.2rem; + font-weight: 600; + text-transform: uppercase; + color: var(--black); + margin: 0; + padding: 0; + transition: color .3s; +} + +.gh-dashboard-box { + flex: 1; + border: 1px solid var(--whitegrey); + padding: 28px 24px 24px; + border-radius: 6px; + display: flex; + flex-direction: column; + position: relative; + align-items: stretch; +} + +.gh-dashboard-box.gh-dashboard-split { + display: grid; + padding: 24px 0; + margin-bottom: 24px; +} + +.gh-dashboard-box.gh-dashboard-split section:nth-child(odd) { + margin-left: 24px; +} + +.gh-dashboard-box.gh-dashboard-split section:nth-child(even) { + margin-left: 0; + margin-right: 24px; +} + +.gh-dashboard-box.is-secondary { + background: var(--main-color-content-greybg); + border-color: var(--main-color-content-greybg); +} + +.gh-dashboard-box.is-faded { + background: rgb(240,240,240); + background: linear-gradient(310deg, rgba(249,249,249,1) 0%, rgba(254,254,254,1) 100%); +} + +.gh-dashboard-columns { + flex: 1; + padding: 0; + display: flex; + flex-direction: row; + position: relative; + align-items: stretch; + background: transparent; +} + +.gh-dashboard-columns > .gh-dashboard-column { + flex: 1; + border-left: 1px solid var(--whitegrey); + padding: 4px 24px; + position: relative; +} + +.gh-dashboard-columns > .gh-dashboard-column:first-child { + padding-left: 0; + border-left: 0 none; +} + +.gh-dashboard-columns > .gh-dashboard-column:last-child { + padding-right: 0; +} + +.gh-dashboard-minicharts { + flex: 1; + padding: 0; + display: flex; + flex-direction: row; + position: relative; + align-items: stretch; + background: transparent; +} + +.gh-dashboard-minichart { + flex: 1; + border-left: 1px solid var(--whitegrey); + padding: 4px 16px 0 24px; + position: relative; +} + +.gh-dashboard-minichart .gh-dashboard-data { + position: absolute; + pointer-events: none; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-right: 16px; + min-height: 88px; +} + +.gh-dashboard-minicharts .gh-dashboard-chart { + flex: auto; + padding: 0; + height: 88px; + padding: 0; + padding-left: 45%; + width: 100%; +} + +@media screen and (max-width: 1400px) { + .gh-dashboard-minicharts .gh-dashboard-chart { + padding-left: 50%; + } +} + +@media screen and (max-width: 1320px) { + .gh-dashboard-minicharts .gh-dashboard-chart { + padding-left: 60%; + } +} + +@media screen and (max-width: 1120px) { + .gh-dashboard-minicharts .gh-dashboard-chart { + padding-left: 0%; + } +} + +.gh-dashboard-minichart:first-child .gh-dashboard-data { + left: 0; +} + +.gh-dashboard-minichart:first-child { + padding-left: 0; + border-left: 0 none; +} + +.gh-dashboard-minichart:last-child { + padding-right: 0; +} + +.gh-dashboard-minichart.is-tiers { + flex-direction: column; +} + +.gh-dashboard-minichart.is-tiers .gh-dashboard-chart { + padding: 0; +} + +.gh-dashboard-minichart .gh-dashboard-chart-box { + height: 88px; +} + +.gh-dashboard-legend { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + padding: 0 0 8px; +} + +.gh-dashboard-legend-item { + font-size: 1.3rem; + font-weight: 500; + line-height: 1.4em; + letter-spacing: 0; + color: var(--midgrey); + padding: 0 0 0 16px; + position: relative; +} + +.gh-dashboard-legend-item::after { + content: ''; + width: 9px; + height: 9px; + border-radius: 8px; + background: #8E42FF; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} + +.gh-dashboard-legend-item:last-child::after { + background: #FB76B4; +} + +.gh-dashboard-tabs { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} + +.gh-dashboard-tab { + opacity: 0.33; + margin: 0 24px 0 0; +} + +.gh-dashboard-tab.is-selected { + opacity: 1; +} + +.gh-dashboard-hero { + flex: 1; + display: flex; + flex-direction: column; + position: relative; + align-items: stretch; +} + +.gh-dashboard-hero.is-solo .gh-dashboard-metric { + margin-top: 4px; margin-bottom: 12px; } -.gh-dashboard-box .footer { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.gh-dashboard-box.grey { - background: var(--main-color-content-greybg); - border: none; -} - -.gh-dashboard-box.black { - background: var(--black); - border: none; - color: var(--white); -} - -.gh-dashboard-box.black .content h4 { - color: var(--white); -} - -.gh-dashboard-box.black .content p { - color: var(--whitegrey); -} - -.gh-dashboard-box.green { - background: color-mod(var(--green) a(4%)); - border-color: color-mod(var(--green) a(60%)); -} - -/* Main areas in grid */ -.gh-dashboard-area.charts { - grid-column: 1 / 3; -} - -.gh-dashboard-area.members-activity { - grid-column: 2 / 3; -} - -.gh-dashboard-area.mixed { - grid-column: 1 / 2; - border: none; - border-radius: unset; - padding: 0; - align-items: stretch; - justify-content: flex-start; -} - -.gh-dashboard-area.lw-banner { - grid-column: 1 / 3; -} - -/* Launch Wizard Banner */ -.gh-lw-banner { - position: relative; - border-radius: 3px; - background: #15171A; - padding: 28px; - color: #fff; - background-repeat: no-repeat; - background-position: right bottom; - background-size: 35vw; -} - -.gh-lw-banner h1 { - font-size: 2.5rem; - letter-spacing: -0.1px; - color: #fff; -} - -.gh-lw-banner p { - font-size: 1.5rem; - color: #C5D2D9; - max-width: 480px; -} - -.gh-dashboard-box.blogpost { - padding: 0; - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 32px; - align-items: center; - overflow: hidden; -} - -.gh-dashboard-box.blogpost .content { - padding: 32px 28px 32px 32px; - display: flex; - flex-direction: column; -} - -.gh-dashboard-box.blogpost p { - margin-bottom: 8px; -} - -.gh-dashboard-box.blogpost .thumbnail { - width: 100%; - height: 100%; - background-size: cover; -} - -.gh-dashboard-box.thebrowser .thumbnail { - background-position: top right; -} - -.gh-dashboard-box .content a, -.gh-dashboard-box .footer a { - color: var(--green); -} - -.gh-dashboard-box .content h2 a { - color: var(--black); -} - -.gh-dashboard-box .content a:hover, -.gh-dashboard-box .footer a:hover { - color: var(--green-d2); -} - -.gh-dashboard-box .content a.gh-btn, -.gh-dashboard-box .footer a.gh-btn { - color: var(--darkgrey); -} - -.gh-dashboard-box .content .read-time { - font-size: 1.2rem; - color: var(--midgrey); -} - -a.gh-dashboard-container { - color: currentColor; -} - -.gh-dashboard-container.crunched .gh-dashboard-box{ - padding: 28px; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box { - grid-row-gap: 0; - align-items: flex-start; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box h2 { - grid-column: 1 / 3; - border-bottom: 1px solid var(--whitegrey); - padding: 16px 28px; - font-size: 1.65rem; - font-weight: 600; - line-height: 1.4em; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a { - display: flex; - padding: 16px 28px; - color: var(--black); -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a .icon { - display: flex; - align-items: center; - justify-content: center; - width: 38px; - min-width: 38px; - height: 38px; - margin-right: 14px; - background: var(--pink); - border-radius: 4px; - color: #fff; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a .icon svg { - width: 18px; - height: 18px; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a .icon.green { - background: var(--green); -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a h4 { - font-size: 1.5rem; - margin-bottom: 0; - font-weight: 500; -} - -.gh-dashboard-container.start-contents .gh-dashboard-box a p { - font-size: 1.3rem; - margin-bottom: 0; -} - -/* Charts */ -.gh-dashboard-area.charts { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - border: 1px solid var(--whitegrey); - border-radius: 3px; - grid-column-gap: var(--dashboard-gap); - grid-row-gap: 12px; - align-items: stretch; - padding: 16px 0 20px; -} - -.gh-dashboard-area.charts .gh-dashboard-box { - border: none; - border-radius: 0; - padding: 16px 0 0 28px; - margin: 0; -} - -.gh-dashboard-area.charts .gh-dashboard-header { - margin: 3px 0 4px; -} - -.gh-dashboard-chart-container { - display: flex; - align-items: flex-start; - justify-content: space-between; -} - -.gh-dashboard-area.charts .mrr { - grid-column: 1 / 2; - grid-row: 1 / 4; - padding: 0 0 0 28px; -} - -.gh-dashboard-area.charts .total-members { - grid-column: 2 / 3; - grid-row: 1 / 2; - padding: 0 28px 0 28px; - height: 75px; -} - -.gh-dashboard-area.charts .paid-members { - grid-column: 2 / 3; - grid-row: 2 / 3; - padding: 0 28px 0 28px; - height: 75px; -} - -.gh-dashboard-area.charts .newsletter-open-rate { - grid-column: 2 / 3; - grid-row: 3 / 4; - padding: 0 28px 0 28px; - height: 75px; -} - -.gh-dashboard-summary { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - margin-top: 8px; -} - -.gh-dashboard-summary.small { - min-width: 120px; +.gh-dashboard .gh-members-help { margin-top: 0; } -.gh-dashboard-summary .data-container { - display: flex; - flex-direction: column; - align-items: flex-start; +.gh-dashboard-select { + position: absolute; + top: 14px; + right: 4px; + z-index: 99; } -.gh-dashboard-summary .data { - display: flex; - align-items: flex-start; - font-size: 3.9rem; - line-height: 4rem; +.gh-dashboard-select .gh-dashboard-select { + height: 36px; +} + +.gh-dashboard-select .ember-power-select-selected-item { + font-size: 1.25rem; font-weight: 600; - color: var(--black); - letter-spacing: -0.1px; - line-height: 1; + letter-spacing: -.1px; + line-height: 1em; + padding: 0 0 10px; + color: var(--middarkgrey); white-space: nowrap; } -.gh-dashboard-summary .data .currency { - font-size: 0.66em; - line-height: 1.25em; - margin-right: 2px; +.gh-contentfilter-menu-dropdown.is-narrow { + width: auto; } -.gh-dashboard-summary.small .data { - font-size: 2.8rem; - letter-spacing: -0.1px; +.gh-contentfilter-menu-dropdown.is-narrow .ember-power-select-option { + padding-right: 32px; } -.gh-dashboard-summary .growth { - background: var(--whitegrey-d1); - border-radius: 3px; - font-size: 1.8rem; - line-height: 1; - font-weight: 500; - color: var(--midgrey); - padding: 6px 8px; - margin: 8px 0 0; +.gh-dashboard-select-title { + display: flex; + justify-content: flex-start; + margin: -12px 0 -12px -13px; + z-index: 1; } -.gh-dashboard-summary.small .growth { - font-size: 1.2rem; - letter-spacing: 0; - padding: 2px 4px; - margin: 5px 0 1px 0; +.gh-dashboard-select-title .ember-power-select-selected-item { + font-size: 1.5rem; + font-weight: 700; + line-height: 1em; + margin: 0; + padding: 0; + letter-spacing: -0.3px; + white-space: nowrap; + color: var(--black); } -.gh-dashboard-summary .growth.positive { - background: color-mod(var(--green) a(13%)); - color: color-mod(var(--green) l(-5%)); +.gh-dashboard .ember-power-select-trigger { + transition: none; } -.gh-dashboard-summary .growth.positive:before { - content: "+"; +.gh-dashboard-layout > .gh-dashboard-select { + top: -62px; + right: -8px; + z-index: 999; } -.gh-dashboard-summary .growth.negative { - background: color-mod(var(--yellow) a(20%)); - color: color-mod(var(--yellow) l(-8%)); +.gh-dashboard-triple { + display: flex; + flex-direction: column; } +.gh-dashboard-articles { + flex: 1; + display: flex; + flex-direction: row; +} + +.gh-dashboard-breakout { + width: calc(100% + 48px + 48px); + background: #fcfcfc; + padding: 24px 0 50vh; + margin-left: -48px; + margin-right: -48px; +} + +.gh-dashboard-inner { + max-width: 1230px; + min-width: 850px; + margin: 0 auto; +} + +.gh-dashboard-subhead { + padding: 0 24px 24px; +} + + +/* --------------------------------- +Dashboard v5 Chart */ + .gh-dashboard-chart { display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: flex-end; + flex-direction: row; + flex: 1; +} + +.gh-dashboard-chart-loading { width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } -.gh-dashboard-chart.nodata { - border: 1px dashed var(--lightgrey); - font-size: 1.3rem; - color: var(--midlightgrey); +.gh-dashboard-chart .gh-loading-spinner { + width: 24px; + height: 24px; } -.gh-dashboard-chart.nodata { - font-size: 1.3rem; - color: var(--midlightgrey); +.gh-dashboard-chart .gh-loading-spinner::before { + width: 4px; + height: 4px; + margin-top: 4px; } -.gh-dashboard-chart.small { - margin-bottom: -6px; - flex-grow: 1; +.gh-dashboard-chart-ticks { + flex: none; + padding: 8px 24px 16px 0; + font-size: 1.2rem; + text-transform: none; + font-weight: 500; + letter-spacing: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: 1.1rem; + color: var(--midgrey); + line-height: 1em; +} + +.gh-dashboard-chart-container { + flex: 1; + position: relative; } .gh-dashboard-chart-box { position: relative; + height: 200px; + width: 99%; /* ChartJS hack to resize with window */ +} + +.gh-dashboard-chart-gradient { + pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 32px; + height: 100%; + background: rgb(255,255,255); + background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); +} + +.gh-dashboard-chart-box canvas { + height: 100% !important; +} + +.gh-dashboard-minichart .gh-dashboard-content { display: flex; - justify-content: stretch; - height: 228px; - width: 100%; - padding-top: 12px; - margin-right: -10px; } -.gh-dashboard-chart-box.small { - position: relative; - min-width: 165px; - height: 110px; - padding-top: 0; - margin-top: -13px; - margin-bottom: -20px; - margin-right: -6px; - transform: scale(0.9); - transform-origin: top right; -} - -.gh-dashboard-careers { - display: grid; - justify-content: space-between; - grid-gap: 30px; - grid-template-columns: 3fr 1fr; -} - -.gh-dashboard-careers p { +.gh-dashboard-mrr .gh-dashboard-metric-value { + flex-direction: column; + align-items: flex-start; margin-bottom: 0; } -.gh-dashboard-careers-cta { +.gh-dashboard-mrr .gh-dashboard-percentage { + margin-top: 15px; +} + +.gh-dashboard-mix .gh-dashboard-data { + position: absolute; + top: 4px; + bottom: 0; + left: 24px; +} + +.gh-dashboard-mix .gh-dashboard-chart.narrow { + /* margin-left: -80px; */ + padding-left: 30%; +} + + +/* --------------------------------- +Dashboard v5 Percentage */ + +.gh-dashboard-percentage { + flex: 0; + border-radius: 3px; + font-size: 1.5rem; + line-height: 1; + font-weight: 500; + letter-spacing: 0; + color: var(--midgrey-l2); + padding: 0; + margin: 5px 0 3px 0; +} + +.gh-dashboard-percentage.is-positive { + color: var(--green); +} + +.gh-dashboard-percentage.is-negative { + color: var(--pink); +} + + +/* --------------------------------- +Dashboard v5 Metric */ + +.gh-dashboard-metric { + display: flex; + flex-direction: column; +} + +.gh-dashboard-metric.is-center { + align-items: center; +} + +.gh-dashboard-metric.is-stretch { + flex: 1; + justify-content: space-between; +} + +.gh-dashboard-metric-data { + display: flex; + flex-direction: column; +} + +.gh-dashboard-metric-label { + align-items: center; + font-size: 1.55rem; + font-weight: 700; + line-height: 1em; + margin: 0 0 8px; + padding: 0; + color: var(--black); + white-space: nowrap; + letter-spacing: -.3px; +} + +.gh-dashboard-metric.is-reverse .gh-dashboard-metric-label { + margin: 2px 0 0; +} + +.gh-dashboard-metric.is-center .gh-dashboard-metric-label { + text-align: center; + margin-top: 4px; +} + +.gh-dashboard-metric-label.is-secondary { + font-size: 1.3rem; + font-weight: 500; + color: var(--midgrey); + letter-spacing: 0; +} + +.gh-dashboard-metric-value { + display: flex; + align-items: flex-end; + font-size: 2.6rem; + font-weight: 700; + letter-spacing: -.4px; + line-height: 1em; + white-space: nowrap; + margin: 0 0 12px; + color: var(--black); +} + +.gh-dashboard-metric-value .value { + margin-right: 8px; +} + +.gh-dashboard-metric.is-large .gh-dashboard-metric-value { + font-size: 3.2rem; + letter-spacing: -0.8px; + margin-bottom: 0; +} + +.gh-dashboard-metric.is-center .gh-dashboard-metric-value { + justify-content: center; +} + +.gh-dashboard-metric.is-reverse.is-large .gh-dashboard-metric-value { + margin-bottom: 8px; +} + +.gh-dashboard-metric-value.is-secondary { + margin: 0 0 8px; +} + +.gh-dashboard-metric.is-tooltip .gh-dashboard-metric-label { + font-size: 1.3rem; + margin-bottom: 8px; +} + +.gh-dashboard-metric.is-tooltip .gh-dashboard-metric-value{ + font-size: 2rem; +} + +.gh-dashboard-metric-minivalue { + font-size: 1.5rem; + font-weight: 700; + color: var(--darkgrey); + text-decoration: none; +} + +.gh-dashboard-metric-minivalue.na { + color: var(--lightgrey); + font-weight: 500; +} + +.gh-dashboard-metric-extra { + text-transform: none; + font-weight: 500; + letter-spacing: .2px; + font-size: 1.1rem; + letter-spacing: .2px; + color: var(--midlightgrey); + line-height: 1em; +} + + +/* --------------------------------- +Dashboard v5 List */ + +.gh-dashboard-list { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.gh-dashboard-list-header { + display: grid; + grid-template-columns: 50% 20% 30%; + padding: 0 0 8px; + border-bottom: 1px solid var(--whitegrey); +} + +.gh-dashboard-list-title { + align-items: center; + line-height: 1em; + white-space: nowrap; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.1px; + color: var(--midgrey); + padding: 0 20px 8px 0; + text-transform: uppercase; + white-space: nowrap; +} + +.gh-dashboard-list-body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +.gh-dashboard-list-item { + padding: 14px 0; + display: grid; + grid-template-columns: 50% 20% 30%; + padding: 4px 0; +} + +.gh-dashboard-list-item:nth-child(3) { + border-bottom: 0 none; +} + +.gh-dashboard-list-item:last-child { + border-bottom: 0; +} + +.gh-dashboard-recents .gh-dashboard-list-item:hover { + background: linear-gradient(315deg,#fafafb 60%,#fff); +} + +.gh-dashboard-resource .gh-dashboard-list-item:hover { + background: linear-gradient(315deg,rgba(249, 249, 250, 0.5) 60%,rgba(255, 255, 255, 0.5)); +} + +.gh-dashboard-list-text { + font-weight: 600; + font-size: 1.5rem; + color: var(--darkgrey); + padding: 0 32px 0 0; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-dashboard-list-subtext { + font-weight: 500; + font-size: 1.4rem; + color: var(--middarkgrey); + text-decoration: none; + padding: 0 32px 0 0; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-dashboard-list-item svg { + width: 20px; + min-width: 20px; + height: 20px; + margin: 0 0.5rem 0 -4px; +} + +.gh-dashboard-list-item-sub { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + min-height: 32px; + min-width: 0; +} + +.gh-dashboard-list-footer { + border-top: 1px solid var(--whitegrey); + padding: 20px 0 0; +} + +.gh-dashboard-list-date { + font-size: 1.3rem; + color: var(--midlightgrey); + text-align: right; + padding: 3px 0 0 0; + white-space: nowrap; +} + +.gh-dashboard-list-author { + font-size: 1.3rem; + color: var(--midlightgrey); + text-align: right; + padding: 1px 0 0 0; + white-space: nowrap; +} + +.gh-dashboard-list-empty { + flex: 1; +} + + +/* --------------------------------- +Dashboard v5 Overview */ + +.gh-dashboard-overview { + position: relative; +} + +.gh-dashboard-overview.is-hidden { + display: none; +} + +.gh-dashboard-overview .gh-dashboard-area { + flex-direction: row; + padding: 24px; +} + +.gh-dashboard-overview .gh-dashboard-box { + padding-top: 20px; + padding-bottom: 20px; +} + +.gh-dashboard-overview .gh-dashboard-area > div { + flex: 1; + border-right: 1px solid var(--whitegrey); + padding-top: 4px; + padding-bottom: 4px; + padding-left: 24px; +} + +.gh-dashboard-overview .gh-dashboard-area > div:first-child { + padding-left: 0; +} + + +/* --------------------------------- +Dashboard v5 Anchor */ + +.gh-dashboard-anchor { + position: relative; +} + +.gh-dashboard-anchor .gh-dashboard-box { + padding-bottom: 24px; +} + +.gh-dashboard-anchor .gh-dashboard-stats { + display: flex; + flex-direction: row; + width: calc(100% + 48px); + padding: 8px; + margin: 4px -24px -8px; + border-radius: 0 0 4px 4px; + background: rgba(253,253,253,1); + border-top: 1px solid var(--whitegrey); +} + +.gh-dashboard-anchor.is-top .gh-dashboard-stats { + margin-top: 0; + margin-bottom: 20px; + border-width: 0 0 1px; +} + +.gh-dashboard-anchor .gh-dashboard-stats-button { + cursor: pointer; + position: relative; + flex: 1; + padding: 14px 24px 18px; + margin: 2px 8px 2px 2px; + text-align: left; + background: transparent; + border-radius: 5px; + color: var(--black); + border: 1px solid transparent; +} + +.gh-dashboard-anchor .gh-dashboard-stats-button:last-child { + margin-right: 2px; +} + +.gh-dashboard-anchor .gh-dashboard-stats-button.is-selected { + color: var(--black); + background: var(--white); + box-shadow: 0 2px 4px rgb(0 0 0 / 2%); + border-color: rgb(235 235 235); +} + +.gh-dashboard-anchor .gh-dashboard-stats.is-solo .gh-dashboard-stats-button.is-selected { + background: transparent; + box-shadow: 0 none; + border: 0 none; +} + +.gh-dashboard-anchor .gh-dashboard-stats-highlight { + width: 1px; + height: 3px; + border-radius: 5px; + background: var(--whitegrey); + margin: 8px 0 0; + background: #5B98F2; + opacity: 0; + transition: width 175ms ease-out, opacity 125ms linear; +} + +.gh-dashboard-anchor .gh-dashboard-stats-button.is-selected .gh-dashboard-stats-highlight { + width: 25px; + opacity: 1; +} + +.gh-dashboard-anchor .gh-dashboard-chart { + flex-direction: column; +} + +.gh-dashboard-anchor .gh-dashboard-chart-ticks { + flex-direction: row; + padding: 10px 0; + font-size: 1.2rem; + color: var(--midlightgrey); +} + +.gh-dashboard-anchor .gh-dashboard-minicharts { + margin-top: 32px; +} + +.gh-dashboard-mix .gh-dashboard-select { + top: -7px; + right: -18px; +} + +.gh-dashboard-group { + position: relative; +} + + +/* --------------------------------- +Dashboard v5 Zero */ + +.gh-dashboard-zero { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255,255,255,0.8); + border: 1px solid var(--whitegrey); + border-radius: 6px; + z-index: 99; + + -webkit-backdrop-filter: blur(3px); + backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; } -.gh-dashboard-join-community { +.gh-dashboard-zero-message { + background: #fff url(icons/analytics.svg) no-repeat 50% 36px; + background-size: 48px 48px; + min-width: 400px; + padding: 96px 48px 52px; + border-radius: 8px; + text-align: center; + box-shadow: 0 4px 24px rgba(0,0,0,0.066); +} + +.gh-dashboard-zero-message h4 { + font-size: 1.7rem; + font-weight: 700; + line-height: 1em; + margin: 0 0 10px; + padding: 0; + color: var(--black); + white-space: nowrap; + letter-spacing: -.3px; +} + +.gh-dashboard-zero-message p { + font-size: 1.4rem; + font-weight: 600; + line-height: 1.5em; + color: var(--middarkgrey); + letter-spacing: -.1px; + padding: 0; + margin: 0 0 16px; +} + +.gh-dashboard-zero-message p:last-child { + padding: 0; + margin: 0; +} + +.gh-dashboard-zero-message a { + background: rgb(174,90,239); + background: linear-gradient(90deg, rgba(174,90,239,1) 0%, rgba(233,84,179,1) 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + transition: filter 100ms linear; + filter: brightness(1); +} + +.gh-dashboard-zero-message a:hover { + filter: brightness(0.8); +} + + +/* --------------------------------- +Dashboard v5 Engagement */ + +.gh-dashboard-engagement { + position: relative; +} + +.gh-dashboard-engagement .gh-dashboard-columns { + padding-top: 10px; +} + +.gh-dashboard-engagement .gh-dashboard-select { + top: 16px; + right: 6px; +} + + +/* --------------------------------- +Dashboard v5 Recent Posts */ + +.gh-dashboard-recent-posts { + position: relative; +} + +.gh-dashboard-recent-posts .gh-dashboard-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; +} + +.gh-dashboard-recent-posts .gh-dashboard-title { + margin-bottom: 24px; +} + +.gh-dashboard-recent-posts .gh-dashboard-list-item { + height: 100%; +} + +.gh-dashboard-recent-posts .gh-dashboard-list-item a > span { + width: 80%; + overflow: hidden; + color: var(--darkgrey); + display: flex; + justify-content: flex-start; + align-items: center; +} + +.gh-dashboard-recent-posts .gh-dashboard-list-item a > span { + display: inline-block; + height: 57px; +} + +.gh-dashboard-recent-posts .gh-content-entry-title { + font-weight: 600; + font-size: 14px !important; + color: rgb(21, 23, 26); +} + +.gh-dashboard-recent-posts .footer { + padding-top: 12px; +} + +.gh-dashboard-recent-posts .gh-dashboard-list-item > span { + font-size: 1.8rem; + font-weight: 600; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 0 24px 4px 0; +} + +.gh-dashboard-recent-posts .gh-dashboard-list-header { + margin-top: 24px; +} + + +/* --------------------------------- +Dashboard v5 Recent Activity */ + +.gh-dashboard-recent-activity { + position: relative; +} + +.gh-dashboard-recent-activity .gh-dashboard-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; +} + +.gh-dashboard-recent-activity .gh-dashboard-title { + margin-bottom: 20px; +} + +.gh-dashboard-recent-activity .gh-dashboard-list-item { + display: flex; + flex-direction: row; + padding: 10px 0; + border-bottom: 0 none; +} + +.gh-dashboard-recent-activity .gh-dashboard-list-item .member-details { + flex: 1; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 0; +} + +.gh-dashboard-recent-activity .gh-dashboard-list-item .member-avatar { + width: 28px; + height: 28px; + background: #70DEB1; + border-radius: 24px; + margin: 0 12px 0 0; +} + +.gh-dashboard-recent-activity .gh-dashboard-list-header, +.gh-dashboard-recent-activity .gh-dashboard-list-item { + grid-template-columns: 80% 20%; +} + +.gh-dashboard-recent-activity .gh-dashboard-list-item > a > span { + color: var(--midgrey); + padding: 0 0 0 0.5rem; + white-space: nowrap; +} + + +/* --------------------------------- +Dashboard v5 Recents */ + +.gh-dashboard-recents { + position: relative; +} + +.gh-dashboard-recents .gh-dashboard-box { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; +} + +.gh-dashboard-recents .gh-dashboard-list-body { + padding-top: 8px; + padding-bottom: 8px; +} + +.gh-dashboard-recents .gh-dashboard-title { + margin-bottom: 24px; +} + +.gh-dashboard-recents .gh-dashboard-list-item { + height: 100%; + padding-top: 6px; + padding-bottom: 6px; +} + +.gh-dashboard-recents .gh-dashboard-list-item a > span { + width: 80%; + overflow: hidden; + color: var(--darkgrey); + display: flex; + justify-content: flex-start; + align-items: center; +} + +.gh-dashboard-recents .gh-dashboard-list-item a > span { + display: inline-block; + height: 57px; +} + +.gh-dashboard-recents .gh-dashboard-list-title:last-child, +.gh-dashboard-recents .gh-dashboard-list-item .gh-dashboard-list-item-sub:last-child { + margin-left: -6px; /* grid layout adjustments */ +} + +.gh-dashboard-recents .gh-content-entry-title { + font-weight: 600; + font-size: 14px !important; + color: rgb(21, 23, 26); +} + +.gh-dashboard-recents .footer { + padding-top: 12px; +} + +.gh-dashboard-recents .gh-dashboard-list-item > span { + font-size: 1.8rem; + font-weight: 600; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 0 24px 4px 0; +} + +.gh-dashboard-recents .gh-dashboard-list-header { + margin-top: 16px; +} + +.gh-dashboard-recents .gh-dashboard-list-loading { + min-height: 220px; + display: flex; + align-items: center; + justify-content: center; +} + +.gh-dashboard-recents .gh-dashboard-list-title:last-child, +.gh-dashboard-recents .gh-dashboard-list-item .gh-dashboard-list-item-sub:last-child { + margin-left: -6px; /* grid layout adjustments */ +} + +.gh-dashboard-recents-activity .gh-dashboard-list-header, +.gh-dashboard-recents-activity .gh-dashboard-list-item { + grid-template-columns: 35% 35% 30%; +} + +.gh-dashboard-recents-activity .gh-dashboard-list-title:nth-child(2), +.gh-dashboard-recents-activity .gh-dashboard-list-item .gh-dashboard-list-item-sub:nth-child(2) { + margin-left: -4px; /* grid layout adjustments */ +} + +.gh-dashboard-recents-posts.is-single .gh-dashboard-list-header, +.gh-dashboard-recents-posts.is-single .gh-dashboard-list-item { + grid-template-columns: 70% 30%; +} + + +/* --------------------------------- +Dashboard v5 Resources */ + +.gh-dashboard-resources { + position: relative; +} + +.gh-dashboard-resources .gh-dashboard-resource-box { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 28px; +} + +.gh-dashboard-resources .gh-dashboard-resource-box, +.gh-dashboard-newsletter .gh-dashboard-resource-box { + box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%); + border: none; +} + +@media screen and (max-width: 1320px) { + .gh-dashboard-resources .gh-dashboard-resource-box { + grid-template-columns: 1fr; + } + + .gh-dashboard-resources .gh-dashboard-resource-thumbnail { + display: none; + } +} + +.gh-dashboard-resource-text { + color: var(--black); +} + +.gh-dashboard-resource-contents { + flex: 1; + display: flex; + flex-direction: column; + position: relative; + align-items: stretch; +} + +.gh-dashboard-resources .gh-dashboard-articles { + display: grid; + grid-gap: 24px; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + margin-top: 16px; +} + +.gh-dashboard-resources .gh-dashboard-articles-footer { + margin-top: 20px; +} + +.gh-dashboard-resources .gh-members-help-card { + padding: 24px; +} + +.gh-dashboard-resources .gh-dashboare5-article-content { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + font-size: 1.4rem; + padding: 24px 0; +} + +.gh-dashboard-resources .gh-dashboare5-article-thumbnail { + flex: 2; + height: auto; + overflow: hidden; + border-radius: 3px; +} + +.gh-dashboard-resources .gh-dashboare5-article-text { + flex: 3; + padding: 0 32px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.gh-dashboard-resources .gh-dashboard-resource-footer a { + display: inline-block; + padding: 8px 0; +} + + +/* --------------------------------- +Dashboard v5 Multi */ + +.gh-dashboard-multi { + position: relative; +} + +.gh-dashboard-multi .gh-dashboard-articles { + display: grid; + grid-gap: 24px; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + margin-top: 16px; +} + +.gh-dashboard-multi .gh-dashboard-articles-footer { + margin-top: 20px; +} + +.gh-dashboard-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; - padding: 54px; - min-height: 440px; - background-size: cover; - background-position: center; - color: #fff; + box-shadow: 0 2px 4px rgb(0 0 0 / 7%); + color: #7c8b9a; + font-size: 1.4rem; + transition: none; + margin-right: 16px; } -.gh-dashboard-join-community h2 { - color: #fff; - font-size: 2.6rem; - letter-spacing: -0.2px; - margin-bottom: 16px; +.gh-dashboard-multi .gh-members-help-card:hover { + transform: translate(0); } -.gh-dashboard-join-community p { - font-size: 1.8rem; - opacity: 0.75; - max-width: 480px; - line-height: 1.5em; - letter-spacing: -0.2px; +.gh-dashboard-multi .gh-dashboard-list-header { + padding-bottom: 12px; } -.gh-dashboard-join-community a.footer-link { - align-self: center; - margin-bottom: -32px; - font-size: 1.2rem; - color: #fff; -} - -.gh-dashboard-join-community a:hover { - opacity: 0.8; -} - -/* Chart.js requires relative width to be in vw units to make responsive re-rendering work */ -@media (max-width: 1600px) { - .gh-dashboard-chart-box.small { - width: 13vw; - } -} - -@media (max-width: 1500px) { - .gh-dashboard-chart-box { - width: 33vw; - } - - .gh-dashboard-chart-box.small { - width: 12vw; - } - - .gh-dashboard-chart.small { - max-width: 120px; - } -} - -/* Total members */ -.gh-dashboard-area.total-members { - grid-column: 1 / 2; - grid-row: 2; -} - -.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-header-container { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid var(--whitegrey); - padding-bottom: 10px; -} - -.gh-dashboard-box.grey .gh-dashboard-header-container { - border-color: var(--whitegrey-d2); -} - -/* Activity feed */ -.gh-dashboard-area.activity { - grid-column: 3 / 4; - grid-row: 3 / 4; - padding: 0; - margin: 0; -} - -.gh-dashboard-activity-list { - display: flex; - flex-direction: column; - align-items: stretch; - list-style: none; - padding: 0; - margin: 0; - width: 100%; -} - -.gh-dashboard-activity-item { - display: flex; - align-items: baseline; - flex-grow: 1; - width: 100%; - justify-content: space-between; - margin: 0 0 12px; - padding: 0 0 12px; +.gh-dashboard-multi .gh-dashboard-subtitle h4 { color: var(--darkgrey); - border-bottom: 1px solid var(--whitegrey); } -.gh-dashboard-box.activity .gh-dashboard-header-container { - margin: 0 0 12px; +.gh-dashboard-multi .gh-dashboard-box { + padding-top: 32px; } -.gh-dashboard-activity-container { +.gh-dashboard-multi .gh-dashboard-thirds-main .gh-dashboard-list-header { + border-bottom: 0 none; +} + + +/* --------------------------------- +Dashboard v5 Latest Newsletters */ + +.gh-dashboard-newsletter { + position: relative; +} + +.gh-dashboard-newsletter .gh-dashboard-newsletter-items { + display: grid; + grid-gap: 24px; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + flex: 1; +} + +.gh-dashboard-newsletter .gh-dashboard-newsletter-item h5 { + font-size: 1.4rem; + padding: 0 32px 0 0; +} + +.gh-dashboard-resource-footer .gh-dashboard-subscribe-button { + display: flex; + padding: 8px 12px; + align-items: center; + justify-content: center; + background: var(--black); + color: var(--white); + border-radius: 4px; +} + +.gh-dashboard-resource-footer .gh-dashboard-subscribe-button:hover { + color: var(--white); +} + +@media screen and (max-width: 1400px) { + .gh-dashboard-subscribe-button > span { + display: none; + } +} + + +/* --------------------------------- +Dashboard v5 Community */ + +.gh-dashboard-community { + position: relative; + grid-column: 1 / 3; +} + +.gh-dashboard-community .gh-dashboard-resource-box { + background: transparent; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: auto 105%; + background-image: url(img/community-background.jpg); + color: var(--white); + padding-top: 32px; + transition: all 1.2s ease-in-out; + border: 0 none; +} + +.gh-dashboard-community .gh-dashboard-resource-box:hover { + box-shadow: 0 54px 80px rgb(0 0 0 / 7%), 0 19.7109px 29.2013px rgb(0 0 0 / 5%), 0 9.56927px 14.1767px rgb(0 0 0 / 4%), 0 4.69103px 6.94968px rgb(0 0 0 / 3%), 0 1.85484px 2.74791px rgb(0 0 0 / 2%); + background-size: auto 108%; +} + +.gh-dashboard-community .gh-dashboard-list-body p { + font-size: 4.0rem; + font-weight: 700; + line-height: 1.3em; + padding: 64px 0; + margin-bottom: 0; + transition: color .3s; + color: #fff; +} + +.gh-dashboard-community .gh-dashboard-resource-footer { + border-color: transparent; +} + +.gh-dashboard-community .gh-dashboard-resource-footer a { + color: #fff; +} + +.gh-dashboard-community .gh-dashboard-resource-title:not(.is-large) h4 { + color: #fff; +} + + +/* --------------------------------- +Dashboard v5 Misc */ + +.gh-dashboard .gh-offers-help { + margin: 0; +} + +.gh-dashboard .gh-list-header { + border-bottom: 0; +} + +.gh-dashboard-rate-bar { + flex: 1; display: flex; flex-direction: row; align-items: center; + justify-content: flex-start; } -.gh-dashboard-activity-detail { +.gh-dashboard-rate-amount { + height: 6px; + border-radius: 2.5px; + background: var(--whitegrey); + overflow: hidden; + position: relative; + display: block; + flex-grow: 1; + margin-left: 20px; + margin-right: 8px; +} + +.gh-dashboard-rate-amount + span { + flex-shrink: 0; + padding-left: 15px; +} + +.gh-dashboard-rate-amount > span { + 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; + min-width: 2px; +} + + +/* --------------------------------- +Dashboard v5 Resource */ + +.gh-dashboard-resource { + position: relative; + display: flex; +} + +.gh-dashboard-resource-box { + flex: 1; + border: 1px solid var(--whitegrey); + padding: 28px 24px 24px; + border-radius: 6px; display: flex; flex-direction: column; + position: relative; + align-items: stretch; + background: var(--white); } -.gh-dashboard-activity-container svg { - width: 24px; - height: 24px; - margin: 0 1rem 1rem 0; +.gh-dashboard-box.gh-dashboard-box.is-secondary .gh-dashboard-resource-box.link { + border: none; + box-shadow: 0 2px 4px rgb(0 0 0 / 7%); + transition: all .3s ease-in-out; } -.gh-dashboard-activity-event { - display: inline-block; - text-transform: lowercase; +.gh-dashboard-resource-box.is-secondary { + border: none; + box-shadow: none; } -.gh-dashboard-activity-event:first-letter { +.gh-dashboard-resource-title:not(.is-large) h4 { + font-size: 1.1rem; + font-weight: 600; text-transform: uppercase; + letter-spacing: 0.3px; + color: var(--middarkgrey); + margin: 0 0 8px; + padding: 0; + transition: color .3s; } -.gh-dashboard-activity-time { +.gh-dashboard-resource-title.is-large h4 { + align-items: center; + font-size: 1.55rem; + font-weight: 700; + line-height: 1em; + margin: 0 0 8px; + padding: 0; + color: var(--black); white-space: nowrap; - margin-left: 12px; - color: var(--midgrey); + letter-spacing: -.3px; +} + +.gh-dashboard-resource-title.has-border { + border-bottom: 1px solid var(--whitegrey); +} + +.gh-dashboard-resource-title p { + margin: 8px 0 16px; + padding: 0; + color: var(--middarkgrey); + font-size: 1.55rem; +} + +.gh-dashboard-resource-body { + flex: 1; + display: flex; + justify-content: flex-start; + padding-top: 12px; +} + +.gh-dashboard-resource-footer { + padding: 20px 0 0; +} + +.gh-dashboard-list-footer a, +.gh-dashboard-resource-footer a { + font-weight: 500; + color: #2bba3c; +} + +.gh-dashboard-list-footer a:hover, +.gh-dashboard-resource-footer a:hover { + color: #269a34; +} + +.gh-dashboard-resource-thumbnail { + border-radius: 4px; + width: 100%; + height: auto; + background: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(img/resource-1.jpg); +} + +.gh-dashboard-resource-bigarticle { + display: flex; + flex-direction: row; + margin: 0 0 24px; + padding: 0; +} + +.gh-dashboard-resource-bigarticle .gh-dashboard-resource-thumbnail { + width: 40%; + display: flex; + justify-content: center; + align-items: center; +} + +.gh-dashboard-resource-bigarticle h3 { + font-size: 1.8rem; + font-weight: 700; + transition: all 0.25 ease-in-out; +} + +.gh-dashboard-resource-bigarticle:hover h3 { + opacity: 0.8; +} + +.gh-dashboard-resource-bigarticle p { + font-size: 1.5rem; + color: var(--middarkgrey); + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + margin: 0; + padding: 0; +} + +.gh-dashboard-resource-smallarticles { + flex: 1; + display: flex; + flex-direction: row; +} + +.gh-dashboard-resource-smallarticle { + flex: 1; + margin: 0 24px 0 0; + padding: 0 0 32px 0; + display: flex; + flex-direction: column; + justify-content: stretch; +} + +.gh-dashboard-resource-smallarticle .gh-dashboard-resource-thumbnail { + width: 100%; + margin: 0 0 12px; +} + +.gh-dashboard-resource-smallarticle:last-child { + margin-right: 0; +} + +.gh-dashboard-resource-secondary { + font-size: 1.3rem; + line-height: 1.5em; + font-weight: 400; + color: var(--midlightgrey); + padding: 0; + white-space: nowrap; +} + +.gh-dashboard-resource-title h4 { + margin-bottom: 0px; +} + +.gh-dashboard-resource .gh-dashboard-list-header, +.gh-dashboard-resource .gh-dashboard-list-item { + grid-template-columns: 100%; +} + +.gh-dashboard-resource .gh-dashboard-list-item { + padding: 0; +} + +.gh-dashboard-resource .gh-dashboard-list-link { + display: flex; + width: 100%; + min-width: 0; + transition: all 0.25 ease-in-out; +} + +.gh-dashboard-resource .gh-dashboard-list-item:hover .gh-dashboard-list-link { + opacity: 0.8; +} + +.gh-dashboard-resource .gh-dashboard-list-link span { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.gh-dashboard-resource .has-new .gh-dashboard-list-item:first-child .gh-dashboard-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-dashboard-resource .gh-dashboard-list-header, +.gh-dashboard-resource .gh-dashboard-list-item { + grid-template-columns: 100%; +} + +.gh-dashboard-resource .gh-dashboard-list-item { + padding: 0; +} + +.gh-dashboard-resource .gh-dashboard-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-dashboard-resource .gh-dashboard-list-body { + color: var(--midlightgrey); + font-size: 1.4rem; + transition: all .3s ease-in-out; +} + +.gh-dashboard-staff-picks .gh-dashboard-resource-footer a { + display: flex; + align-items: center; + color: #1DA1F2; + font-weight: 500; +} + +.gh-dashboard-staff-picks .gh-dashboard-resource-footer a:hover { + color: #1788ce; +} + +.gh-dashboard-staff-picks .gh-dashboard-resource-footer svg { + width: 20px; + height: 20px; + margin-right: 5px; +} + + +/* --------------------------------- +Dashboard v5 Tooltips */ + +.gh-dashboard-tooltip { + opacity: 0; + position: absolute; + top: 0; + left: 0; + background: var(--white); + border-radius: 9px; + padding: 12px; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.18), 0px 45px 80px rgba(0, 0, 0, 0.04), 0px 18.7999px 33.4221px rgba(0, 0, 0, 0.0287542), 0px 10.0513px 17.869px rgba(0, 0, 0, 0.0238443), 0px 5.6347px 10.0172px rgba(0, 0, 0, 0.02), 0px 2.99255px 5.32008px rgba(0, 0, 0, 0.0161557), 0px 1.24527px 2.21381px rgba(0, 0, 0, 0.0112458); + border-radius: 9px; + z-index: 9999; + pointer-events: none; + min-width: 80px; +} + +.gh-dashboard-tooltip .gh-dashboard-metric-value { + margin: 0; +} + +.gh-dashboard-tooltip-label { + font-size: 1.2rem; + font-weight: 500; + line-height: 1em; + letter-spacing: 0; + color: var(--midlightgrey); + white-space: nowrap; + margin: 0 0 8px; +} + +.gh-dashboard-tooltip-value { + display: flex; + align-items: baseline; + font-size: 1.5rem; + font-weight: 700; + letter-spacing: 0; + line-height: 1em; + white-space: nowrap; + color: var(--black); +} + +.gh-dashboard-tooltip-value .indicator { + display: inline-block; + border-radius: 999px; + margin-right: 6px; +} + +.gh-dashboard-tooltip-value .indicator.solid { + width: 9px; + height: 9px; +} + +.gh-dashboard-tooltip-value .indicator.line { + width: 11px; + height: 11px; + border-width: 2px; + border-style: solid; +} + +.gh-dashboard-tooltip-value .value { + font-size: 1.5rem; + margin-right: 8px; +} + +.gh-dashboard-tooltip-value .metric { + font-size: 1.4rem; + font-weight: 400; + color: var(--middarkgrey); + padding: 0; +} + +.gh-dashboard-totals .indicator { + position: relative; + border: none !important; + background: linear-gradient(225deg, #8E42FF 0%, #FB2D8D 100%); + width: 12px; + height: 12px; +} + +.gh-dashboard-totals .indicator::before { + position: absolute; + background: var(--main-bg-color); + content: ""; + top: 2px; + right: 2px; + bottom: 2px; + left: 2px; + border-radius: 999px; +} + +.gh-dashboard-totals .value { + font-size: 1.7rem; +} + +.gh-dashboard-totals .metric { + font-size: 1.45rem; +} + +.gh-dashboard-mrr .indicator { + border-color: #8E42FF; +} + +.gh-dashboard-breakdown .gh-dashboard-tooltip { + min-width: 140px; +} + +.gh-dashboard-breakdown .gh-dashboard-tooltip-value { + display: grid; + grid-template-columns: auto 1fr; +} + +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-1 { + margin-bottom: 4px; +} + +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-1 .metric, +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-2 .metric { font-size: 1.3rem; } -.gh-dashboard-box.activity .footer { - margin-bottom: -12px; +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-1 .value, +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-2 .value { + display: inline-flex; + align-items: baseline; } -.gh-dashboard-box.activity a .gh-dashboard-activity-name { - font-weight: 600; - font-size: 14px; - color: var(--black); - margin: 0 0 2px; +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-1 .indicator { + background: #8E42FF; } -.gh-dashboard-box.activity a .gh-dashboard-activity-event { - font-weight: 400; - font-size: 13px; - color: var(--middarkgrey); +.gh-dashboard-breakdown .gh-dashboard-tooltip-value-2 .indicator { + background: #FB76B4; +} + +.gh-dashboard-mix .gh-dashboard-tooltip-value .metric { + font-size: 1.3rem; +} + +.gh-dashboard-totals { + margin-top: 24px; +} + +.gh-dashboard-totals .gh-dashboard-loading, +.gh-dashboard-totals .gh-dashboard-chart-container { + height: 200px; +} + +.gh-dashboard-totals .gh-dashboard-chart-container { + margin-right: -10px; /* fix 99% width ChartJS hack */ +} + +@media screen and (max-width: 1120px) { + .gh-dashboard-minicharts { + flex-direction: column; + } + + .gh-dashboard-minichart { + padding: 16px 0; + border-left: 0 none; + border-bottom: 1px solid var(--whitegrey); + } + + .gh-dashboard-minichart:first-child { + padding-top: 4px; + } + + .gh-dashboard-minichart:last-child { + border-bottom: 0 none; + padding-bottom: 0; + } + + .gh-dashboard-minichart .gh-dashboard-data { + position: relative; + width: 50%; + top: 0; + left: 0; + } + + .gh-dashboard-mix .gh-dashboard-chart.narrow { + padding: 0; + } + + .gh-dashboard-mix .gh-dashboard-metric { + margin-top: 0; + } + + .gh-dashboard-minichart .gh-dashboard-select { + top: 4px; + } + + .gh-dashboard-columns { + flex-direction: column; + } + + .gh-dashboard-columns > .gh-dashboard-column { + padding: 16px 0; + border-left: 0 none; + border-bottom: 1px solid var(--whitegrey); + } + + .gh-dashboard-columns > .gh-dashboard-column:first-child { + padding-top: 4px; + } + + .gh-dashboard-columns > .gh-dashboard-column:last-child { + border-bottom: 0 none; + padding-bottom: 0; + } + + .is-zero .gh-dashboard-mrr, + .is-zero .gh-dashboard-breakdown, + .is-zero .gh-dashboard-mix, + .is-zero .gh-dashboard-engagement-30days, + .is-zero .gh-dashboard-engagement-7days { + display: none; + } +} + +@media screen and (max-width: 600px) { + .gh-dashboard-box.gh-dashboard-split { + grid-template-columns: 1fr; + grid-template-rows: auto auto; + } + + .gh-dashboard-box.gh-dashboard-split section { + margin-left: 24px !important; + margin-right: 24px !important; + } + + .gh-dashboard-split { + grid-template-columns: 1fr; + grid-template-rows: auto auto auto; + } + + .gh-dashboard-community { + grid-column: 1; + } } @@ -670,305 +2061,4 @@ a.gh-dashboard-container { margin-top: 12px; font-size: 1.3rem; margin-bottom: 46px; -} - -/* What's new? */ - -.gh-dashboard-box.whats-new .gh-dashboard-header-container svg { - width: 20px; - height: 20px; - margin-top: -12px; -} - -.gh-dashboard-box.whats-new .gh-dashboard-header-container svg path { - fill: var(--pink); -} - -.gh-dashboard-box.whats-new .content a { - display: flex; - flex-direction: column; - align-items: flex-start; - color: var(--darkgrey); - margin: 12px 0; - padding: 0 0 12px; - border-bottom: 1px solid var(--whitegrey); -} - -.gh-dashboard-box.whats-new .content a h2 { - margin-bottom: 0; -} - -.gh-dashboard-box.whats-new .content a span { - font-size: 1.3rem; - color: var(--midgrey); -} - -.gh-dashboard-box.whats-new .content a p { - margin-top: 4px; -} - -.gh-dashboard-box.whats-new .footer { - margin-bottom: -12px; -} - -.gh-dashboard-box.whats-new.has-new .content a:first-of-type h2 { - display: inline-flex; - align-items: center; -} - -.gh-dashboard-box.whats-new.has-new .content a:first-of-type h2:after { - display: inline-block; - content: "New"; - font-size: 1.2rem; - white-space: nowrap; - background: var(--green); - text-transform: uppercase; - color: #fff; - line-height: 1; - border-radius: 2px; - margin-left: 4px; - margin-top: 2px; - padding: 3px 4px; -} - -.gh-dashboard-dismiss { - position: absolute; - top: 20px; - right: 20px; -} - -.gh-dashboard-dismissbutton.dark { - background: rgba(255, 255, 255, 0.1); -} - -.gh-dashboard-dismissbutton svg { - margin: 0; -} - -.gh-dashboard-dismissbutton.dark svg { - color: #fff; - opacity: 0.75; -} - -.gh-dashboard-dismissbutton.dark:hover svg { - opacity: 1.0; -} - -.gh-dashboard-dismissbutton span { - height: 32px; - line-height: 32px; -} - -.gh-dashboard-dismiss-dropdown { - top: calc(100% + 2px); - left: auto; - right: 0; - min-width: 90px; - line-height: 1; -} - -.gh-dashboard-dismiss-dropdown.fade-out { - animation-duration: .001s; - pointer-events: none; -} - -.gh-dashboard-dismiss-dropdown button { - background: var(--white); - width: 100%; - border-radius: 0; -} - -.gh-dashboard-dismiss-dropdown button span { - line-height: 28px; - height: 28px; - font-size: 1.3rem; -} - - -@media (max-width: 1320px) { - .gh-dashboard { - grid-template-columns: 1fr 1fr; - } - - .gh-dashboard-area.charts { - grid-template-columns: 1fr 1fr; - } - - .gh-dashboard-area.charts .mrr .gh-dashboard-chart-container { - flex-direction: column; - align-items: stretch; - justify-content: space-between; - flex-grow: 1; - } - - .gh-dashboard-area.charts .mrr .gh-members-chart-box { - width: 100%; - } - - .gh-dashboard-chart { - height: auto; - } - - .gh-members-chart-box { - height: 140px; - } - - .gh-dashboard-summary.small{ - flex-basis: 100px; - min-width: 100px; - } - - .gh-dashboard-summary:not(.small) .data { - font-size: 3.4rem; - } - - .gh-dashboard-summary:not(.small) .growth { - font-size: 1.5rem; - } - - .gh-dashboard-container.col-2 { - grid-template-columns: 1fr; - grid-gap: 0; - } - - .gh-dashboard-area.charts { - min-height: 240px; - } - - .gh-dashboard-area.charts .mrr .gh-dashboard-chart-box { - height: 140px; - width: 100%; - } - - .gh-dashboard-area.charts .mrr .gh-dashboard-chart { - margin-left: -20px; - } - - .gh-dashboard-header { - white-space: nowrap; - } - - .gh-dashboard-chart.small { - min-width: 50%; - } - - .gh-dashboard-chart-box.small { - width: 100%; - } - - .gh-dashboard-box.blogpost { - grid-template-columns: unset; - grid-template-rows: auto auto; - grid-gap: 24px; - } - - .gh-dashboard-box.blogpost .thumbnail { - min-height: 220px; - grid-row: 1 / 2; - } - - .gh-dashboard-box.blogpost .content { - padding-top: 0; - grid-row: 2 / 3; - } - - .gh-dashboard-container.crunched .chart { - padding: 0; - min-height: 140px; - } - - .gh-dashboard-join-community { - padding: 44px 32px; - } - - .gh-dashboard-join-community .footer-link { - margin-bottom: -24px; - } - - .gh-dashboard-container.start-contents .gh-dashboard-box { - grid-template-columns: 1fr; - grid-template-rows: auto; - } - - .gh-dashboard-container.start-contents .gh-dashboard-box h2 { - grid-column: 1 / 2; - } -} - -@media (max-width: 680px), -(min-width: 800px) and (max-width: 1000px) { - .gh-dashboard { - grid-template-columns: 1fr; - grid-column-gap: 0; - } - - .gh-dashboard-area.charts { - grid-template-columns: 1fr; - grid-template-rows: auto; - } - - .gh-dashboard-area.charts .mrr, - .gh-dashboard-area.charts .total-members, - .gh-dashboard-area.charts .paid-members, - .gh-dashboard-area.charts .newsletter-open-rate { - grid-column: unset; - } - - .gh-dashboard-area.members-activity { - display: none; - } - - .gh-dashboard-area.charts .mrr, - .gh-dashboard-area.charts .total-members, - .gh-dashboard-area.charts .paid-members, - .gh-dashboard-area.charts .newsletter-open-rate { - grid-row: unset; - } - - .gh-dashboard-area.charts .mrr { - padding: 0 28px; - } - - .gh-dashboard-area.charts .total-members, - .gh-dashboard-area.charts .paid-members, - .gh-dashboard-area.charts .newsletter-open-rate { - height: 55px; - } - - .gh-dashboard-chart-box { - padding: 28px 0; - } - - .gh-dashboard-summary:not(.small) { - flex-direction: row; - } - - .gh-dashboard-summary .growth { - margin-left: 8px; - } - - .gh-dashboard-summary.small .data-container { - flex-direction: row; - } - - .gh-dashboard-summary.small .growth { - margin: 3px 0px 0px 8px; - } - - .gh-dashboard-summary.small .data { - font-size: 2.0rem; - } -} - -/* panel collapse animation */ -.gh-dashboard-area-leave { - opacity: 100; - max-height: 350px; -} -.gh-dashboard-area-leave-active { - transition: all ease-in-out 0.25s; -} -.gh-dashboard-area-leave-to { - opacity: 0; - max-height: 0; -} +} \ No newline at end of file diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs index 935b19556f..d9f1552902 100644 --- a/ghost/admin/app/templates/dashboard.hbs +++ b/ghost/admin/app/templates/dashboard.hbs @@ -1,166 +1,68 @@
- {{#if (feature "dashboardV5")}} -
-
- -

- Dashboard -

- -
- +
+
+ +

+ Dashboard +

+
- {{else}} - -

- Dashboard -

- -
- {{#if (and this.session.user.isOwnerOnly (not this.settings.editorIsLaunchComplete) (not (feature "improvedOnboarding")))}} -
-
-

Select your publication style

-

Customize your brand and connect to Stripe to get your membership site ready to be shown to the world.

- Start setup guide -
- - - {{svg-jar "dotdotdot"}} - - - - - -
+
+ {{#if this.isLoading }} + + {{else}} + {{#if this.areMembersEnabled}} + {{#if this.hasPaidTiers}} + + {{/if}} + +
+ + + {{#if this.areNewslettersEnabled}} + + {{/if}} + + {{#if this.isTotalMembersZero}} + + {{/if}}
-
- {{else if this.showMembersGraphs}} - + {{/if}} + + + +
+ + +
+
+ + + +
{{/if}} -
- {{#unless this.settings.editorIsLaunchComplete}} -
-
-

Start creating content

- {{#if this.showMembersData}} - - {{svg-jar "members"}} -
-

Create your first member

-

Add yourself or import members from CSV

-
- - {{/if}} - - {{svg-jar "posts"}} -
-

Publish a post

-

Get familiar with the Ghost editor and start creating

-
- -
+ {{#unless this.isTotalMembersZero}} +
+ + {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} +
- {{/unless}} + {{/unless}} +
-
-
-
-

Customize your site

-

Stand out from the crowd. Ghost lets you customize everything so you can create a publication that doesnโ€™t just look the same as what everyone else has.

-
-
- Design - Email -
-
-
-
-

Looking for help with Ghost features?

-

Our product knowledgebase is packed full of guides, tutorials, answers to frequently asked questions, tips for dealing with common errors, and much more.

-
-
- Visit the help center → -
-
-
- - -
-
-

6 types of newsletters you can start today

-

Choosing one of these newsletter types for your publication will help you create better content at a faster pace with less work.

-

Get some inspiration →

-
5 MIN READ
-
-
-
- - - -
-
-

We're hiring! Join the team that makes Ghost.

-

The creator economy is growing faster than ever, and so are we! ๐Ÿ“ˆ Join a team that's determined to make decentralised, open technology the heart and soul of new media ๐ŸŒบ

-
-
- See open roles → -
-
- - - -
-
-
-

How to grow your audience, starting from 0

-

Starting from zero is hard. Thankfully, successful creators have given us clues on how to grow an audience by using something called a content funnel.

-

Here's how it works →

-
9 MIN READ
-
-
- - -
-
-

Join the Ghost creator community.

-

Meet other people building both free & paid publications with Ghost. Talk strategy, get advice, or just hang out.

- Share the journey -
- community.ghost.org -
-
- -
- {{#if this.showMembersData}} - - {{/if}} - - {{#if (not (or this.whatsNewEntriesLoading this.whatsNewEntriesError))}} -
-
-

What's new?

- {{svg-jar "gift"}} -
-
- {{#each this.whatsNewEntries as |entry|}} - -

{{entry.title}}

- {{moment-format entry.published_at "D MMM YYYY"}} - {{#if entry.custom_excerpt}} -

{{entry.custom_excerpt}}

- {{/if}} - - {{/each}} -
-
- See more → -
-
- {{/if}} -
-
- {{/if}} + {{#if (enable-developer-experiments)}} + + {{/if}} +
diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs index 16efa911b0..59345157f3 100644 --- a/ghost/admin/app/templates/settings/labs.hbs +++ b/ghost/admin/app/templates/settings/labs.hbs @@ -278,19 +278,6 @@
-
-
-
-

Dashboard 5.0

-

- Increased amount of analytics with more useful / dynamic resources -

-
-
- -
-
-
{{/if}} diff --git a/ghost/admin/mirage/config.js b/ghost/admin/mirage/config.js index 6b10ec5f8e..84f43d222a 100644 --- a/ghost/admin/mirage/config.js +++ b/ghost/admin/mirage/config.js @@ -17,6 +17,7 @@ import mockSettings from './config/settings'; import mockSite from './config/site'; import mockSlugs from './config/slugs'; import mockSnippets from './config/snippets'; +import mockStats from './config/stats'; import mockTags from './config/tags'; import mockThemes from './config/themes'; import mockTiers from './config/tiers'; @@ -81,6 +82,7 @@ export function testConfig() { mockOffers(this); mockSnippets(this); mockNewsletters(this); + mockStats(this); /* Notifications -------------------------------------------------------- */ diff --git a/ghost/admin/mirage/config/stats.js b/ghost/admin/mirage/config/stats.js new file mode 100644 index 0000000000..8105665a72 --- /dev/null +++ b/ghost/admin/mirage/config/stats.js @@ -0,0 +1,66 @@ +export default function mockStats(server) { + server.get('/stats/subscriptions/', function () { + return { + stats: [], + meta: { + cadences: [], + tiers: [], + totals: [] + } + }; + }); + + server.get('/stats/member_count/', function () { + return { + stats: [ + { + date: '2022-04-18', + paid: 0, + free: 2, + comped: 0, + paid_subscribed: 0, + paid_canceled: 0 + }, + { + date: '2022-04-19', + paid: 0, + free: 2, + comped: 0, + paid_subscribed: 2, + paid_canceled: 0 + }, + { + date: '2022-04-28', + paid: 0, + free: 12, + comped: 0, + paid_subscribed: 0, + paid_canceled: 0 + }, + { + date: '2022-05-02', + paid: 0, + free: 35, + comped: 0, + paid_subscribed: 0, + paid_canceled: 0 + }, + { + date: '2022-05-10', + paid: 0, + free: 38, + comped: 1, + paid_subscribed: 0, + paid_canceled: 0 + } + ], + meta: { + totals: { + paid: 0, + free: 38, + comped: 1 + } + } + }; + }); +} diff --git a/ghost/admin/tests/acceptance/dashboard-test.js b/ghost/admin/tests/acceptance/dashboard-test.js index a08b05d73e..1006839fcd 100644 --- a/ghost/admin/tests/acceptance/dashboard-test.js +++ b/ghost/admin/tests/acceptance/dashboard-test.js @@ -1,5 +1,5 @@ import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support'; -import {currentURL, find, visit} from '@ember/test-helpers'; +import {currentURL, visit} from '@ember/test-helpers'; import {describe, it} from 'mocha'; import {enableLabsFlag} from '../helpers/labs-flag'; import {expect} from 'chai'; @@ -32,28 +32,6 @@ describe('Acceptance: Dashboard', function () { expect(currentURL()).to.equal('/dashboard'); }); - describe('members graphs', function () { - it('is shown when members exist', async function () { - this.server.createList('member', 5); - await visit('/dashboard'); - expect(find('[data-test-dashboard-members-graphs]'), 'members graphs block').to.exist; - }); - - it('is hidden when no members exist', async function () { - this.server.db.members.remove(); - await visit('/dashboard'); - expect(find('[data-test-dashboard-members-graphs]'), 'members graphs block').to.not.exist; - }); - - it('is hidden when members is disabled', async function () { - this.server.createList('member', 5); - this.server.db.settings.update({key: 'members_signup_access'}, {value: 'none'}); - - await visit('/dashboard'); - expect(find('[data-test-dashboard-members-graphs]'), 'members graphs block').to.not.exist; - }); - }); - describe('permissions', function () { beforeEach(async function () { this.server.db.users.remove(); diff --git a/ghost/admin/tests/integration/components/dashboard/latest-member-activity-test.js b/ghost/admin/tests/integration/components/dashboard/latest-member-activity-test.js deleted file mode 100644 index f19863344c..0000000000 --- a/ghost/admin/tests/integration/components/dashboard/latest-member-activity-test.js +++ /dev/null @@ -1,29 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import {describe, it} from 'mocha'; -import {expect} from 'chai'; -import {find, findAll, render} from '@ember/test-helpers'; -import {setupMirage} from 'ember-cli-mirage/test-support'; -import {setupRenderingTest} from 'ember-mocha'; - -describe('Integration: Component: ', function () { - const hooks = setupRenderingTest(); - setupMirage(hooks); - - it('renders with no activities', async function () { - await render(hbs(``)); - - expect(find('[data-test-dashboard-member-activity]')).to.exist; - expect(find('[data-test-no-member-activities]')).to.exist; - }); - - it('renders 5 latest activities', async function () { - this.server.createList('member-activity-event', 10); - - await render(hbs(``)); - - expect(find('[data-test-dashboard-member-activity]')).to.exist; - expect(find('[data-test-no-member-activities]')).to.not.exist; - - expect(findAll('[data-test-dashboard-member-activity-item]').length).to.equal(5); - }); -});