More work on the posts table for attribution

- Added in the open rate progress bar
- Columns in place with feature flag
- Moved open rate to tooltip for exact data

refs https://github.com/TryGhost/Team/issues/1818
This commit is contained in:
James Morris 2022-08-23 15:53:48 +01:00
parent f4f757c314
commit c3fb0ef578
5 changed files with 108 additions and 49 deletions

View File

@ -47,40 +47,6 @@
</LinkTo>
{{/if}}
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor))}}
{{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients">
<div class="flex fw4">
{{#if (eq @post.email.status "submitted")}}
<span class="flex" data-tooltip="{{capitalize @post.email.recipientFilter}} members">
<span class="darkgrey fw5 gh-content-email-stats">{{format-number @post.email.emailCount}}</span>
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{gh-pluralize @post.email.emailCount "send"}}</span>
</span>
{{else}}
{{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
{{/if}}
</div>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
<div class="flex">
<span class="darkgrey fw5 gh-content-email-stats">
{{#if this.isHovered}}
{{format-number @post.email.openedCount}}
{{else}}
{{@post.email.openRate}}%&nbsp;
{{/if}}
</span>
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
</div>
{{else}}
{{#if this.feature.memberAttribution}}<span class="gh-list-nodata">&mdash;</span>{{/if}}
{{/if}}
</LinkTo>
{{/if}}
{{/if}}
{{#if this.feature.memberAttribution}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-signups" target="_blank" rel="noopener noreferrer">
<span class="darkgrey fw5 gh-content-attribution-stats">{{@post.count.signups}}</span>
@ -99,6 +65,38 @@
</a>
{{/if}}
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor))}}
{{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients">
<div class="flex fw4">
{{#if (eq @post.email.status "submitted")}}
<span class="flex" data-tooltip="{{capitalize @post.email.recipientFilter}} members">
<span class="darkgrey fw5 gh-content-email-stats">{{format-number @post.email.emailCount}}</span>
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{gh-pluralize @post.email.emailCount "send"}}</span>
</span>
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}}
</div>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
<div class="flex">
<span class="gh-list-rate-bar">
<span data-tooltip="{{format-number @post.email.openedCount}}">{{@post.email.openRate}}%&nbsp;</span>
<span class="gh-list-rate-amount"><span style={{html-safe (concat "width: " @post.email.openRate "%;")}}/></span>
</span>
<span class="midgrey-l2 fw4 gh-content-email-stats-mobile">{{@post.email.openRate}}% opens</span>
</div>
{{else}}
<span class="gh-list-nodata">&mdash;</span>
{{/if}}
</LinkTo>
{{/if}}
{{/if}}
{{#unless @hideStatusColumn }}
{{#if (and this.session.user.isContributor @post.isPublished)}}
<a href={{@post.url}} class="permalink gh-list-data gh-post-list-status" target="_blank" rel="noopener noreferrer">

View File

@ -214,6 +214,10 @@ ul.nostyle li {
.gh-list .gh-list-nodata {
display: none;
}
.gh-list-rate-bar {
display: none !important;
}
}
@media (max-width: 800px) {
@ -460,3 +464,37 @@ ul.nostyle li {
height: calc(100vh - 96px);
}
}
.gh-list-rate-bar {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.gh-list-rate-amount {
height: 6px;
border-radius: 2.5px;
background: var(--whitegrey);
overflow: hidden;
position: relative;
display: block;
flex-grow: 1;
margin-left: 10px;
margin-right: 8px;
}
.gh-list-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;
}

View File

@ -168,15 +168,25 @@
padding-left: 10px;
}
.gh-posts-sends-header,
.gh-posts-signups-header,
.gh-posts-conversions-header,
.gh-posts-sends-header {
width: 110px;
}
.gh-posts-opens-header {
width: 120px;
width: 200px;
}
.gh-posts-status-header {
width: 140px;
}
.pages-list .gh-posts-conversions-header,
.pages-list .gh-posts-sends-header {
width: 140px;
}
.gh-post-list-title {
padding-left: 10px;
}
@ -353,6 +363,19 @@
width: 1px;
}
@media (max-width: 1600px) {
.gh-posts-signups-header,
.gh-posts-conversions-header,
.gh-posts-sends-header {
width: 80px;
}
.gh-posts-opens-header {
width: 180px;
}
}
/* Mobile style of post list */
@media (max-width: 1200px) {
.gh-posts-list-item {

View File

@ -27,15 +27,15 @@
</GhCanvasHeader>
<section class="view-container content-list">
<ol class="gh-list {{unless this.postsInfinityModel "no-posts"}}">
<ol class="pages-list gh-list {{unless this.postsInfinityModel "no-posts"}}">
{{#if this.postsInfinityModel}}
<li class="gh-list-row header">
<div class="gh-list-header gh-posts-title-header">Title</div>
{{#if this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-opens-header">Signups</div>
<div class="gh-list-header gh-posts-opens-header">Conversions</div>
<div class="gh-list-header gh-posts-signups-header">Signups</div>
<div class="gh-list-header gh-posts-conversions-header">Conversions</div>
{{/if}}
<div class="gh-list-header gh-posts-status-header">Status</div>
<div class="gh-list-header gh-posts-status-header"></div>
</li>
{{/if}}

View File

@ -31,15 +31,15 @@
{{#if this.postsInfinityModel}}
<li class="gh-list-row header">
<div class="gh-list-header gh-posts-title-header">Title</div>
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) this.feature.emailAnalytics)}}
<div class="gh-list-header gh-posts-sends-header">Sends</div>
<div class="gh-list-header gh-posts-opens-header">Opens</div>
{{/if}}
{{#if this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-opens-header">Signups</div>
<div class="gh-list-header gh-posts-opens-header">Conversions</div>
{{/if}}
<div class="gh-list-header gh-posts-status-header">Status</div>
{{#if this.feature.memberAttribution}}
<div class="gh-list-header gh-posts-signups-header">Signups</div>
<div class="gh-list-header gh-posts-conversions-header">Paid</div>
{{/if}}
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled") (not this.session.user.isContributor) this.feature.emailAnalytics)}}
<div class="gh-list-header gh-posts-sends-header">Sends</div>
<div class="gh-list-header gh-posts-opens-header">Opens</div>
{{/if}}
<div class="gh-list-header gh-posts-status-header"></div>
</li>
{{/if}}