From 729935eca789a38740766ccbc62947fb8e1a5deb Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 22 Sep 2022 17:18:46 +0100 Subject: [PATCH] Tidied up the page a bit more with the source attribution included - Has the source attribution chart and table with some basic styles - Added in a edit button to the analytics page refs https://github.com/TryGhost/Team/issues/1920 --- .../source-attribution-table.hbs | 2 +- .../posts-list/list-item-clicks.hbs | 8 +- ghost/admin/app/styles/layouts/content.css | 69 ++++++++++-- ghost/admin/app/templates/posts/analytics.hbs | 102 +++++++++--------- 4 files changed, 117 insertions(+), 64 deletions(-) diff --git a/ghost/admin/app/components/member-attribution/source-attribution-table.hbs b/ghost/admin/app/components/member-attribution/source-attribution-table.hbs index 96866335df..e332d89bf5 100644 --- a/ghost/admin/app/components/member-attribution/source-attribution-table.hbs +++ b/ghost/admin/app/components/member-attribution/source-attribution-table.hbs @@ -3,7 +3,7 @@
Sources
Signups
{{#if this.membersUtils.paidMembersEnabled}} -
Paid Conversions
+
Paid Conversions
{{/if}}
diff --git a/ghost/admin/app/components/posts-list/list-item-clicks.hbs b/ghost/admin/app/components/posts-list/list-item-clicks.hbs index 0101f1a54d..e06f4d694f 100644 --- a/ghost/admin/app/components/posts-list/list-item-clicks.hbs +++ b/ghost/admin/app/components/posts-list/list-item-clicks.hbs @@ -157,12 +157,12 @@ {{#if (not-eq this.settings.membersSignupAccess "none")}}
{{#if (and (not this.session.user.isContributor) (or @post.isSent @post.isPublished) (or this.settings.emailTrackClicks (feature "memberAttribution")))}} - - {{svg-jar "stats"}} + + {{svg-jar "stats" title="View post analytics"}} {{else}} - - {{svg-jar "pen"}} + + {{svg-jar "pen" title="Edit this post"}} {{/if}}
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index d1b72360f5..75483da77b 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -622,7 +622,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho display: none; } - .gh-post-analytics-item .hide-when-small { + .hide-when-small { display: none; } } @@ -735,9 +735,19 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho } .gh-post-analytics-meta { + width: 100%; margin: 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.gh-post-analytics-meta-text { color: var(--midlightgrey-d2); font-size: 1.35rem; + display: flex; + align-items: center; + justify-content: flex-start; } .gh-post-analytics-box { @@ -860,6 +870,33 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho text-transform: uppercase; } +.gh-attribution-box { + margin: 0; + padding: 20px; + background: var(--white); + box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1); + border-radius: var(--border-radius); + display: flex; + gap: 0; +} + +.gh-attribution-chart-column { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.gh-attribution-chart-column-inner { + padding: 0 24px; + max-width: 296px; +} + +.gh-attribution-table-column { + flex: 2; + padding: 2rem 0; +} + .gh-links-list { margin: 0; padding: 20px; @@ -1001,7 +1038,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho } -.gh-posts-list-item-labs a.gh-post-list-cta { +a.gh-post-list-cta { display: flex; align-items: center; max-width: max-content; @@ -1014,39 +1051,44 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho transition: all .2s ease; } -.gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered { +a.gh-post-list-cta.stats.is-hovered { color: var(--green); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } -.gh-posts-list-item-labs a.gh-post-list-cta.stats.is-hovered:hover { +a.gh-post-list-cta.stats.is-hovered:hover { border-color: var(--lightgrey); color: var(--green-d1); } -.gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered { +a.gh-post-list-cta.edit.is-hovered { color: var(--pink-l2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } -.gh-posts-list-item-labs a.gh-post-list-cta.edit.is-hovered:hover { +a.gh-post-list-cta.edit.is-hovered:hover, +a.gh-post-list-cta.edit:not(.is-hovered):hover { border-color: var(--lightgrey); color: var(--pink-l1); } -.gh-posts-list-item-labs .gh-post-list-cta svg { +a.gh-post-list-cta svg { width: 1.5rem; height: 1.5rem; } -.gh-posts-list-item-labs .gh-post-list-cta.edit svg { +a.gh-post-list-cta.edit svg { padding: 1px; } -.gh-posts-list-item-labs .gh-post-list-cta svg path { +a.gh-post-list-cta svg path { stroke-width: 2; } +.gh-post-analytics-meta a.gh-post-list-cta { + margin-right: 0; +} + @media screen and (max-width: 1080px) { .gh-post-analytics-box.resources { flex-direction: column; @@ -1058,6 +1100,15 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho flex-direction: column; } + .gh-attribution-box { + flex-direction: column; + } + + .gh-attribution-chart-column-inner { + padding: 8px; + max-width: 300px; + } + .gh-post-analytics-item { border-left: 0 none; border-bottom: 1px solid var(--whitegrey-d1); diff --git a/ghost/admin/app/templates/posts/analytics.hbs b/ghost/admin/app/templates/posts/analytics.hbs index fcf4102cae..2511c94035 100644 --- a/ghost/admin/app/templates/posts/analytics.hbs +++ b/ghost/admin/app/templates/posts/analytics.hbs @@ -10,29 +10,34 @@

{{this.post.title}}

-

- {{#if - (or this.post.isSent - (and this.post.isPublished this.post.email) - this.post.willEmail - ) - }} - {{#if this.post.emailOnly}} - Sent +

+
+ {{#if + (or this.post.isSent + (and this.post.isPublished this.post.email) + this.post.willEmail + ) + }} + {{#if this.post.emailOnly}} + Sent + {{else}} + Published and sent + {{/if}} {{else}} - Published and sent + Published on your site {{/if}} - {{else}} - Published on your site - {{/if}} - {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}} - on - {{moment-format publishedAt "D MMM YYYY"}} - at - {{moment-format publishedAt "HH:mm"}} - {{/let}} -

+ {{#let (moment-site-tz this.post.publishedAtUTC) as |publishedAt|}} + on + {{moment-format publishedAt "D MMM YYYY"}} + at + {{moment-format publishedAt "HH:mm"}} + {{/let}} +
+ + {{svg-jar "pen" title="Edit this post"}} + +

@@ -60,11 +65,10 @@ {{/if}} {{/if}} - {{#if (and (feature 'memberAttribution') (not this.post.emailOnly)) }}

{{format-number this.post.count.signups}}

-

{{gh-pluralize this.post.count.signups "Signup" without-count=true}}

+

{{gh-pluralize this.post.count.signups "signup" without-count=true}}

{{#if this.membersUtils.paidMembersEnabled}} @@ -77,49 +81,47 @@

{{#if (and this.settings.emailTrackClicks (or this.post.isSent (and this.post.isPublished this.post.email)))}} -

- Link clicks -

{{#if (not-eq this.links null)}} -
-
- {{#if (is-empty this.links) }} - There are no links in this email. - {{else}} + {{#if (is-empty this.links) }} + {{!-- Empty state --}} + {{else}} +

+ Link clicks +

+
+
{{#each this.links as |link|}}
{{link.link.title}}

{{link.count.clicks}}

{{/each}} - {{/if}} +
-
+ {{/if}} {{else}} Loading... {{/if}} {{/if}} {{#if (and (feature 'sourceAttribution') (not this.post.emailOnly))}} -

- Source attribution -

{{#if (not-eq this.sources null) }} {{#if (is-empty this.sources) }} - No data yet. + {{!-- Empty state --}} {{else}} -
-
- - -