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,22 +88,69 @@
<div class="gh-links-pagination"> <div class="gh-links-pagination">
{{#if (feature "fixNewsletterLinks")}} {{#if (feature "fixNewsletterLinks")}}
<span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span> <span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span>
{{else}}
<div class="gh-links-pagination-progress"> {{#if (not (feature "audienceFeedback"))}}
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}} <div class="gh-links-pagination-actions">
</div> <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}}
{{#if this.showPagination}}
<div class="gh-links-pagination-actions"> {{#if (and (not (feature "fixNewsletterLinks")) (not (feature "audienceFeedback")))}}
<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}}> <div class="gh-links-pagination-progress">
{{svg-jar "arrow-left-pagination"}} Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
Previous </div>
</button> {{#if this.showPagination}}
<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}}> <div class="gh-links-pagination-actions">
Next <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-right-pagination"}} {{svg-jar "arrow-left-pagination"}}
</button> Previous
</div> </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 (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}} {{/if}}
</div> </div>
{{/if}} {{/if}}

View file

@ -61,7 +61,7 @@
</button> </button>
</div> </div>
Showing {{eventsFetcher.previousEvents}} - {{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}} Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
</div> </div>
{{#if (and @linkQuery @linkText)}} {{#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 { .gh-post-analytics-split {
display: flex; display: flex;
gap: 2.4rem; gap: 2.4rem;
min-height: 440px; min-height: 445px;
} }
.gh-newsletter-clicks-header { .gh-newsletter-clicks-header {
@ -1696,6 +1696,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
gap: 16px; gap: 16px;
margin-top: 16px; margin-top: 16px;
border-top: 1px solid #eceef0; border-top: 1px solid #eceef0;
padding: 18px 0;
} }
.gh-post-activity-feed-pagination { .gh-post-activity-feed-pagination {