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
This commit is contained in:
James Morris 2022-10-25 12:55:03 +01:00
parent c533af61a9
commit bd091c65c7
4 changed files with 71 additions and 37 deletions

View File

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

View File

@ -67,4 +67,9 @@ export default class PostActivityFeed extends Component {
isNextButtonDisabled({hasReachedEnd, isLoading}) {
return hasReachedEnd || isLoading;
}
@action
isPaginationNeeded({totalEvents}) {
return (totalEvents <= this._pageSize);
}
}

View File

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

View File

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