0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00

Better matching the pagination styles across modules for post analytics

- Careful of flags, having different paginations depending on those
- Little stylistic adjustment to how pagination is shown on engagement bar
- Quite a few feature flag checks to make sure the right style is showing

refs https://github.com/TryGhost/Team/issues/2136
This commit is contained in:
James Morris 2022-10-21 14:53:02 +01:00
parent 3ab1c418bc
commit 11bea8d9f0
3 changed files with 65 additions and 17 deletions

View file

@ -88,11 +88,25 @@
<div class="gh-links-pagination">
{{#if (feature "fixNewsletterLinks")}}
<span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span>
{{else}}
{{#if (not (feature "audienceFeedback"))}}
<div class="gh-links-pagination-actions">
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
{{svg-jar "arrow-left-pagination"}}
Previous
</button>
<button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
Next
{{svg-jar "arrow-right-pagination"}}
</button>
</div>
{{/if}}
{{/if}}
{{#if (and (not (feature "fixNewsletterLinks")) (not (feature "audienceFeedback")))}}
<div class="gh-links-pagination-progress">
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
</div>
{{/if}}
{{#if this.showPagination}}
<div class="gh-links-pagination-actions">
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
@ -105,6 +119,39 @@
</button>
</div>
{{/if}}
{{/if}}
{{#if (feature "audienceFeedback")}}
<div class="gh-post-activity-feed-pagination">
{{#if (feature "fixNewsletterLinks")}}
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
{{/if}}
<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={{this.disablePreviousPage}}
{{on "click" this.openPreviousPage}}
>
{{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={{this.disableNextPage}}
{{on "click" this.openNextPage}}
>
{{svg-jar "arrow-right-pagination"}}
</button>
</div>
{{#if (not (feature "fixNewsletterLinks"))}}
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
{{/if}}
</div>
{{/if}}
</div>
{{/if}}
</div>

View file

@ -61,7 +61,7 @@
</button>
</div>
Showing {{eventsFetcher.previousEvents}} - {{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
</div>
{{#if (and @linkQuery @linkText)}}

View file

@ -857,7 +857,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-post-analytics-split {
display: flex;
gap: 2.4rem;
min-height: 440px;
min-height: 445px;
}
.gh-newsletter-clicks-header {
@ -1696,6 +1696,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
gap: 16px;
margin-top: 16px;
border-top: 1px solid #eceef0;
padding: 18px 0;
}
.gh-post-activity-feed-pagination {