Update Pagination in Blog Index Page

[oz456]

Description:

This PR updates the pagination system on the blog index page, as referenced in #349. It introduces pagination logic that aligns with the conventions outlined in the GSC docs.

Pagination Sequence Logic:

• If there are 7 or fewer pages in total, all pages are displayed without ellipses (...).
• For more than 7 pages:
  • Displays up to 7 pages at a time, with ellipses (...) when necessary.
  • Displays 6 pages when the current page is near either end of the page range.
  • Always displays at least 2 page numbers to the left and right of the current page, if they exist.

Screenshots:

Pagination Sequence on different pages

For more than 7 pages in total:





For 7 or fewer total pages:

Pagination on Small devices

[zerolab]

It may be worth checking out wagtail/wagtail#12607 which addresses a similar requirement, but for the Wagtail admin

[oz456]

Thanks @zerolab for the reference, simplified the code.
And also shall we have a similar pagination for the showcase page, or leave it as is with the current one since there aren’t many pages.
whats your opinion? @zerolab, @vossisboss

Updated Pagination Logic

• If Total pages are 6 or less:
  • Displays all existing pages in order
    [1] 2 3 4 5 6 (N)
(P) 1 2 3 [4] 5 6 (N)
(P) 1 2 3 4 5 [6]
• If total pages are 7 or more:
  • Displays up to 2 pages on either side of the current page, along with the first and last pages, using ellipsis (...) when necessary.
    '[1] 2 3 ... 10 (N)'
    (P) 1 2 3 4 [5] 6 7 ... 12 (N)
(P) 1 ... 4 5 [6] 7 8 ... 12 (N)
(P) 1 ... 6 7 [8] 9 10 11 12 (N)
(P) 1 ... 10 11 [12]

[vossisboss]

@oz456 Thank you SO much for this PR! We appreciate you taking the time to make this contribution. I'll try to take a lot at this before the end of the week to test your work and give you some feedback.

Thanks again!

[vossisboss]

All right @oz456, I took a look at this and it seems like your styles need some work because this is how the pagination look for me both in the Firefox and Chrome browsers.

The feature was functional, which was great. But if you could working on fixing the styles and submit again, I'd really appreciate it.

[oz456]

@vossisboss, sorry to hear that it's not working as expected. However, I am able to view it properly on my end.

I'm not sure why this is happening. but just in case, did you recompile the styles?

[vossisboss]

Excellent suggestion @oz456 because my npm was not auto-refreshing like it was supposed to. I'm now seeing what you are. Looks like you've done a great job with preserving the animations and the keyboard navigation works well. At first glance, it seems you've also made some good choices with ARIA labels as well.

Could you restore the "Previous" and "Next" labels to the buttons? I feel like those labels are helpful, especially for users who use assistive technology.

Thanks again for this submission. I appreciate the time you're taking with this. If you haven't joined the #wagtail-org channel in our Slack community yet, that is a good way to get in touch with other community members who contribute to the website.

[oz456]

Thanks @vossisboss for reviewing this PR.

The reason I initially removed the labels from the buttons was that they were causing issues in certain viewports, especially at specific edge cases. Removing the labels seemed to be the most efficient solution at that time.

Previous Issue

However, I’ve added back the labels and addressed the issue by aligning the buttons in a column layout (similar to the mobile view) until the point where the layout breaks. I'm not entirely sure if the styles are optimal yet, so let me know if they look good or if there's anything that can be improved.