TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated empty members screen (#2084)

Browse Source 
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.
This commit is contained in:
Peter Zimon 2021-09-08 12:03:49 +02:00 committed by GitHub
parent f9d97bdc35
commit d585ba62ef
9 changed files with 144 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ghost/admin/app/components/gh-member-activity-feed.hbs
View File

@ -1,33 +1,39 @@
<div class="gh-member-feed" ...attributes>
<div class="flex-auto flex flex-column items-stretch {{if this.activities "justify-between" "h-100 justify-center"}}">
<div>
{{#if this.activities}}
{{#each this.firstActivities as |activity|}}
<GhMemberActivityFeedItem @activity={{activity}} />
{{/each}}
{{#liquid-if this.isShowingAll class="show-overflow"}}
{{#each this.remainingActivities as |activity|}}
{{#if this.activities}}<h4 class="gh-main-section-header small bn">Member activity</h4>{{/if}}
<div class="gh-main-section-content bordered {{if this.activities "" "mt8"}}">
<div class="gh-member-feed" ...attributes>
<div class="flex-auto flex flex-column items-stretch {{if this.activities "justify-between" "h-100 justify-center"}}">
<div>
{{#if this.activities}}
{{#each this.firstActivities as |activity|}}
<GhMemberActivityFeedItem @activity={{activity}} />
{{/each}}
{{/liquid-if}}
{{#if (and this.remainingActivities (not this.isShowingAll))}}
<button
type="button"
class="gh-btn gh-member-btn-expandfeed"
data-test-button="view-all-activity"
{{on "click" this.showAll}}
>
<span>View all activity</span>
</button>
{{#liquid-if this.isShowingAll class="show-overflow"}}
{{#each this.remainingActivities as |activity|}}
<GhMemberActivityFeedItem @activity={{activity}} />
{{/each}}
{{/liquid-if}}
{{#if (and this.remainingActivities (not this.isShowingAll))}}
<button
type="button"
class="gh-btn gh-member-btn-expandfeed"
data-test-button="view-all-activity"
{{on "click" this.showAll}}
>
<span>View all activity</span>
</button>
{{/if}}
{{else}}
<div class="gh-members-no-data gh-members-no-list">
<div class="lightgrey">{{svg-jar "no-data-list"}}</div>
<h4>Member activity</h4>
<p>
All events related to this member will be shown here.
</p>
</div>
{{/if}}
{{else}}
<div class="gh-no-data-list">
{{svg-jar "no-data-list"}}
<span>No member activity.</span>
</div>
{{/if}}
</div>
</div>
</div>
</div>

48
ghost/admin/app/components/gh-member-settings-form-cp.hbs
View File

@ -108,7 +108,13 @@
<div class="gh-main-section-content bordered">
<div class="gh-cp-memberproduct-noproduct">
{{#unless this.isCreatingComplimentary}}
<div class="mb2">This member doesn't have subscriptions.</div>
<div class="gh-members-no-data gh-members-no-subs">
<span class="lightgrey nt10">{{svg-jar "no-data-subscription"}}</span>
<h4>No subscriptions</h4>
<p>
This member doesn't have any subscriptions.
</p>
</div>
{{/unless}}
{{#unless this.member.isNew}}
@ -317,25 +323,31 @@
</div>
<div class="gh-main-section-block">
<div class="gh-main-section-content bordered">
<div class="gh-heading-xs">Emails received</div>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailCount}}</div>
<div class="gh-heading-xs">Emails opened</div>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailOpenedCount}}</div>
<div class="gh-heading-xs">Avg. open rate</div>
<div class="gh-data-summary gh-cp-data-summary">
{{#if (is-empty @member.emailOpenRate)}}
<span data-tooltip="Insufficient data available">–</span>
{{else}}
{{@member.emailOpenRate}}%
{{/if}}
</div>
</div>
<h4 class="gh-main-section-header small bn">Member activity</h4>
<div class="gh-main-section-content bordered">
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
{{#if (eq @member.emailCount 0)}}
<div class="gh-members-no-data gh-members-no-stats">
<span class="lightgrey">{{svg-jar "no-data-line-chart"}}</span>
<h4>Email engagement</h4>
<p>
This member hasn't received a newsletter yet. Once they do, we'll show their engagement here.
</p>
</div>
{{else}}
<div class="gh-heading-xs">Emails received</div>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailCount}}</div>
<div class="gh-heading-xs">Emails opened</div>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailOpenedCount}}</div>
<div class="gh-heading-xs">Avg. open rate</div>
<div class="gh-data-summary gh-cp-data-summary {{if (is-empty @member.emailOpenRate) "gh-data-unavailable-label"}}">
{{#if (is-empty @member.emailOpenRate)}}
Will be available once this member received at least 5 emails.
{{else}}
{{@member.emailOpenRate}}%
{{/if}}
</div>
{{/if}}
</div>
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
</div>
</section>

8
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -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;
}

4
ghost/admin/app/styles/layouts/main.css
View File

@ -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);

52
ghost/admin/app/styles/layouts/members.css
View File

@ -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;
}

9
ghost/admin/app/styles/patterns/global.css
View File

@ -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,

1
ghost/admin/public/assets/icons/no-data-line-chart.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>analytics-board-graph-line</title><rect class="a" x="0.75" y="3.75" width="22.5" height="16.5" rx="1.5" ry="1.5"/><polyline class="a" points="3.75 15 6.9 9.75 9.75 15 12.75 12 15.75 15 20.25 8.25"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

17
ghost/admin/public/assets/icons/no-data-list.svg
View File

@ -1,8 +1,9 @@
<svg width="91" height="70" viewBox="0 0 91 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="65" width="35" height="5" rx="1" fill="#DDE1E5"/>
<rect y="37" width="64" height="5" rx="1" fill="#DDE1E5"/>
<rect y="9" width="44" height="5" rx="1" fill="#DDE1E5"/>
<rect y="56" width="91" height="5" rx="1" fill="#DDE1E5"/>
<rect y="28" width="91" height="5" rx="1" fill="#DDE1E5"/>
<rect width="91" height="5" rx="1" fill="#DDE1E5"/>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs>
<path d="M1 2H23" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 10H23" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 18H23" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 5H14" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 13H18" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 21H10" class="a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 831 B

1
ghost/admin/public/assets/icons/no-data-subscription.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>single-neutral-actions-credit-card</title><rect class="cls-1" x="11.25" y="14.25" width="12" height="9" rx="1.5" ry="1.5"/><line class="cls-1" x1="11.25" y1="17.25" x2="23.25" y2="17.25"/><line class="cls-1" x1="17.25" y1="20.25" x2="20.25" y2="20.25"/><circle class="cls-1" cx="7.5" cy="4.875" r="4.125"/><path class="cls-1" d="M.75,17.25A6.753,6.753,0,0,1,10.5,11.2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 584 B