From d585ba62ef09901cc77ae7d704348c426e216ad3 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 8 Sep 2021 12:03:49 +0200 Subject: [PATCH] Updated empty members screen (#2084) Updated empty state of members detail screen. - Added appropriate messaging to Analytics, Events and Subscriptions blocks about what's supposed to be in them once there's sufficient data. - Updated tooltip for average open rate when there isn't significant data yet. --- .../components/gh-member-activity-feed.hbs | 58 ++++++++++--------- .../components/gh-member-settings-form-cp.hbs | 48 +++++++++------ ghost/admin/app/styles/layouts/dashboard.css | 8 ++- ghost/admin/app/styles/layouts/main.css | 4 ++ ghost/admin/app/styles/layouts/members.css | 52 +++++++++++++++++ ghost/admin/app/styles/patterns/global.css | 9 +++ .../assets/icons/no-data-line-chart.svg | 1 + .../public/assets/icons/no-data-list.svg | 17 +++--- .../assets/icons/no-data-subscription.svg | 1 + 9 files changed, 144 insertions(+), 54 deletions(-) create mode 100644 ghost/admin/public/assets/icons/no-data-line-chart.svg create mode 100644 ghost/admin/public/assets/icons/no-data-subscription.svg diff --git a/ghost/admin/app/components/gh-member-activity-feed.hbs b/ghost/admin/app/components/gh-member-activity-feed.hbs index 104550203a..f5f16dbe5a 100644 --- a/ghost/admin/app/components/gh-member-activity-feed.hbs +++ b/ghost/admin/app/components/gh-member-activity-feed.hbs @@ -1,33 +1,39 @@ -
-
-
- {{#if this.activities}} - {{#each this.firstActivities as |activity|}} - - {{/each}} - - {{#liquid-if this.isShowingAll class="show-overflow"}} - {{#each this.remainingActivities as |activity|}} +{{#if this.activities}}

Member activity

{{/if}} +
+
+
+
+ {{#if this.activities}} + {{#each this.firstActivities as |activity|}} {{/each}} - {{/liquid-if}} - {{#if (and this.remainingActivities (not this.isShowingAll))}} - + {{#liquid-if this.isShowingAll class="show-overflow"}} + {{#each this.remainingActivities as |activity|}} + + {{/each}} + {{/liquid-if}} + + {{#if (and this.remainingActivities (not this.isShowingAll))}} + + {{/if}} + {{else}} +
+
{{svg-jar "no-data-list"}}
+

Member activity

+

+ All events related to this member will be shown here. +

+
{{/if}} - {{else}} -
- {{svg-jar "no-data-list"}} - No member activity. -
- {{/if}} +
diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs index 46adb5079b..b6659940e2 100644 --- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs +++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs @@ -108,7 +108,13 @@
{{#unless this.isCreatingComplimentary}} -
This member doesn't have subscriptions.
+
+ {{svg-jar "no-data-subscription"}} +

No subscriptions

+

+ This member doesn't have any subscriptions. +

+
{{/unless}} {{#unless this.member.isNew}} @@ -317,25 +323,31 @@
-
Emails received
-
{{@member.emailCount}}
-
Emails opened
-
{{@member.emailOpenedCount}}
-
Avg. open rate
-
- {{#if (is-empty @member.emailOpenRate)}} - – - {{else}} - {{@member.emailOpenRate}}% - {{/if}} -
-
- -

Member activity

-
- + {{#if (eq @member.emailCount 0)}} +
+ {{svg-jar "no-data-line-chart"}} +

Email engagement

+

+ This member hasn't received a newsletter yet. Once they do, we'll show their engagement here. +

+
+ {{else}} +
Emails received
+
{{@member.emailCount}}
+
Emails opened
+
{{@member.emailOpenedCount}}
+
Avg. open rate
+
+ {{#if (is-empty @member.emailOpenRate)}} + Will be available once this member received at least 5 emails. + {{else}} + {{@member.emailOpenRate}}% + {{/if}} +
+ {{/if}}
+
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index fc4d7f6f70..0f5fb9dd5f 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -726,12 +726,16 @@ a.gh-dashboard-container { .gh-no-data-list svg { margin-top: 60px; - width: 80px; + width: 76px; height: auto; } +.gh-no-data-list svg path { + stroke-width: 1px; +} + .gh-no-data-list span { - margin-top: 16px; + margin-top: 12px; font-size: 1.3rem; margin-bottom: 46px; } diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index 1f9db39267..dda1b7cc80 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -1073,6 +1073,10 @@ border: none; } +.gh-main-section-header.pt0 { + padding-top: 0; +} + .gh-main-section-description { color: var(--middarkgrey); border-bottom: 1px solid var(--whitegrey); diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 9f5a56d8e4..0c8692796d 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -715,6 +715,58 @@ textarea.gh-member-details-textarea { background: var(--red); } +.gh-members-no-data { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin: 32px 0; +} + +.gh-members-no-data svg { + width: 76px; + height: auto; + margin-bottom: 8px; +} + +.gh-members-no-data svg path, +.gh-members-no-data svg rect, +.gh-members-no-data svg circle { + stroke-width: 0.8px; +} + +.gh-members-no-data h4 { + font-size: 1.5rem; + font-weight: 600; + color: var(--middarkgrey); +} + +.gh-members-no-data p { + font-size: 1.3rem; + line-height: 1.5em; + margin: 4px 44px 0; + color: var(--midgrey); +} + +.gh-members-no-list h4 { + margin-top: 8px; +} + +.gh-members-no-list svg path { + stroke-width: 1px; +} + +.gh-members-no-subs svg { + width: 64px; + margin-left: 18px; +} + +.gh-members-no-subs svg path, +.gh-members-no-subs svg rect, +.gh-members-no-subs svg circle { + stroke-width: 1px; +} + .gh-member-feed { margin: -12px 0 -8px; } diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index 2366525ecf..f8861c84a9 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -371,6 +371,15 @@ h6 { color: var(--black); } +.gh-data-unavailable-label { + font-size: 1.3rem; + line-height: 1.4em; + font-weight: 400; + color: var(--midgrey); + margin: 4px 0; + max-width: 330px; +} + p, ul, ol, diff --git a/ghost/admin/public/assets/icons/no-data-line-chart.svg b/ghost/admin/public/assets/icons/no-data-line-chart.svg new file mode 100644 index 0000000000..b2d65de491 --- /dev/null +++ b/ghost/admin/public/assets/icons/no-data-line-chart.svg @@ -0,0 +1 @@ +analytics-board-graph-line \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/no-data-list.svg b/ghost/admin/public/assets/icons/no-data-list.svg index 7ab40f0f1c..d058935da0 100644 --- a/ghost/admin/public/assets/icons/no-data-list.svg +++ b/ghost/admin/public/assets/icons/no-data-list.svg @@ -1,8 +1,9 @@ - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/no-data-subscription.svg b/ghost/admin/public/assets/icons/no-data-subscription.svg new file mode 100644 index 0000000000..40e655527d --- /dev/null +++ b/ghost/admin/public/assets/icons/no-data-subscription.svg @@ -0,0 +1 @@ +single-neutral-actions-credit-card \ No newline at end of file