From bd091c65c74a9c44e4f0540d50083e091b3338e5 Mon Sep 17 00:00:00 2001 From: James Morris Date: Tue, 25 Oct 2022 12:55:03 +0100 Subject: [PATCH] Tidying up some aspects of the post analytics page and engagement bar - Removed the dummy rows as they looked like loading states - Improved the spacing of the pie chart - Showing total number when pagination isn't required - Tweaks across the page to look more consistent refs https://github.com/TryGhost/Team/issues/2149 --- .../components/posts/post-activity-feed.hbs | 52 +++++++++---------- .../components/posts/post-activity-feed.js | 5 ++ ghost/admin/app/styles/app-dark.css | 8 ++- ghost/admin/app/styles/layouts/content.css | 43 ++++++++++++--- 4 files changed, 71 insertions(+), 37 deletions(-) diff --git a/ghost/admin/app/components/posts/post-activity-feed.hbs b/ghost/admin/app/components/posts/post-activity-feed.hbs index 26746e7c4a..56147358fe 100644 --- a/ghost/admin/app/components/posts/post-activity-feed.hbs +++ b/ghost/admin/app/components/posts/post-activity-feed.hbs @@ -70,39 +70,39 @@ {{#let (compute (fn this.getAmountOfStubs eventsFetcher)) as |stubs|}} {{#each stubs}} -
-
-
-
-
+
{{/each}} {{/let}}
-
- + {{#if (compute (fn this.isPaginationNeeded eventsFetcher))}} + Showing {{eventsFetcher.totalEvents}} in total + {{else}} +
+ - -
+ +
- Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}} + Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}} + {{/if}}
{{#if @linkQuery}} diff --git a/ghost/admin/app/components/posts/post-activity-feed.js b/ghost/admin/app/components/posts/post-activity-feed.js index 0f44846cf8..2cc2153075 100644 --- a/ghost/admin/app/components/posts/post-activity-feed.js +++ b/ghost/admin/app/components/posts/post-activity-feed.js @@ -67,4 +67,9 @@ export default class PostActivityFeed extends Component { isNextButtonDisabled({hasReachedEnd, isLoading}) { return hasReachedEnd || isLoading; } + + @action + isPaginationNeeded({totalEvents}) { + return (totalEvents <= this._pageSize); + } } diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 6c0c616e1b..25895ef21c 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -1447,10 +1447,8 @@ kbd { opacity: 0.2; } -.gh-post-activity-feed .gh-dashboard-list-item + .gh-dashboard-list-item { - border-color: #17191c; -} - +.gh-post-activity-feed .gh-dashboard-list-item + .gh-dashboard-list-item, +.feature-audienceFeedback .gh-links-list-item, .gh-post-activity-feed-footer { border-color: #17191c; -} \ No newline at end of file +} diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css index d1ab73ecd7..1d5469a0af 100644 --- a/ghost/admin/app/styles/layouts/content.css +++ b/ghost/admin/app/styles/layouts/content.css @@ -914,11 +914,16 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho } .gh-post-analytics-resource .gh-btn-link { - color: #30cf43; + color: var(--green); } .gh-post-analytics-resource:hover .gh-btn-link { - color: #2bba3c; + color: var(--green-d1); +} + +.feature-audienceFeedback .gh-post-analytics-resource .gh-btn-link { + font-size: 1.3rem; + font-weight: 400; } .gh-post-analytics-title { @@ -1313,6 +1318,31 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho stroke: var(--green-d2); } +.feature-audienceFeedback .gh-links-list-item { + border-color: rgba(235,238,240,.5); + padding-top: 1.4rem; + padding-bottom: 1.4rem; +} + +.feature-audienceFeedback .gh-links-list-item.gh-links-list-item-edit-mode { + padding-top: 0.8rem; + padding-bottom: 0.8rem; +} + +.feature-audienceFeedback .gh-links-info { + font-size: 1.3rem; +} + +.feature-audienceFeedback .gh-links-info svg { + width: 13px; + margin-bottom: 2px; +} + +.feature-audienceFeedback .gh-links-list-item:hover { + background: none; +} + + /* Post list – LABS /* ---------------------------------------------------------- */ @@ -1596,6 +1626,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * { /* help to hide shadow from selected tab */ opacity: 0.99999; background-color: #ffffff; + border-radius: 0 0 4px 4px; } .gh-tabs-analytics h3 { @@ -1731,7 +1762,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * { .gh-post-activity-feed-footer { display: flex; - min-height: 50px; + min-height: 65px; align-items: center; justify-content: space-between; gap: 16px; @@ -1770,11 +1801,11 @@ a.gh-post-list-cta.stats.is-hovered:hover > * { font-size: 1.3rem; font-weight: 500; line-height: 1.3; - color: #2BBA3C; + color: var(--green); } .gh-post-activity-feed-pagination-link:hover { - filter: brightness(0.8); + color: var(--green-d1); } .gh-post-activity-feed-pagination-link svg { @@ -1861,7 +1892,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * { .gh-feedback-events-feed { position: relative; - padding: 0 40px 16px; + padding: 24px 34px 16px 56px; } .gh-feedback-events-feed-container {