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

ghost/admin/app/components/posts/post-activity-feed.hbs

@@ -70,39 +70,39 @@
 
                 {{#let (compute (fn this.getAmountOfStubs eventsFetcher)) as |stubs|}}
                     {{#each stubs}}
-                        <div class="gh-dashboard-list-item">
+                        <div class="gh-dashboard-list-item"></div>
-                            <div class="gh-post-activity-feed-dummy"></div>
-                            <div class="gh-post-activity-feed-dummy"></div>
-                            <div class="gh-post-activity-feed-dummy"></div>
-                        </div>
                     {{/each}}
                 {{/let}}
 
                 <div class="gh-post-activity-feed-footer">
                     <div class="gh-post-activity-feed-pagination">
-                        <div class="gh-post-activity-feed-pagination-group">
+                        {{#if (compute (fn this.isPaginationNeeded eventsFetcher))}}
-                            <button
+                            Showing {{eventsFetcher.totalEvents}} in total
-                                class="gh-post-activity-feed-pagination-button gh-post-activity-feed-prev-button"
+                        {{else}}
-                                type="button"
+                            <div class="gh-post-activity-feed-pagination-group">
-                                title="Previous page"
+                                <button
-                                disabled={{compute (fn this.isPreviousButtonDisabled eventsFetcher)}}
+                                    class="gh-post-activity-feed-pagination-button gh-post-activity-feed-prev-button"
-                                {{on "click" eventsFetcher.loadPreviousPage}}
+                                    type="button"
-                            >
+                                    title="Previous page"
-                                {{svg-jar "arrow-left-pagination"}}
+                                    disabled={{compute (fn this.isPreviousButtonDisabled eventsFetcher)}}
-                            </button>
+                                    {{on "click" eventsFetcher.loadPreviousPage}}
+                                >
+                                    {{svg-jar "arrow-left-pagination"}}
+                                </button>
 
-                            <button
+                                <button
-                                class="gh-post-activity-feed-pagination-button gh-post-activity-feed-next-button"
+                                    class="gh-post-activity-feed-pagination-button gh-post-activity-feed-next-button"
-                                type="button"
+                                    type="button"
-                                title="Next page"
+                                    title="Next page"
-                                disabled={{compute (fn this.isNextButtonDisabled eventsFetcher)}}
+                                    disabled={{compute (fn this.isNextButtonDisabled eventsFetcher)}}
-                                {{on "click" eventsFetcher.loadNextPage}}
+                                    {{on "click" eventsFetcher.loadNextPage}}
-                            >
+                                >
-                                {{svg-jar "arrow-right-pagination"}}
+                                    {{svg-jar "arrow-right-pagination"}}
-                            </button>
+                                </button>
-                        </div>
+                            </div>
 
-                        Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
+                            Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
+                        {{/if}}
                     </div>
 
                     {{#if @linkQuery}}

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);
+    }
 }

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 {
+.gh-post-activity-feed .gh-dashboard-list-item + .gh-dashboard-list-item,
-    border-color: #17191c;
+.feature-audienceFeedback .gh-links-list-item,
-}
-
 .gh-post-activity-feed-footer {
     border-color: #17191c;
-}
+}

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 {