You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Pagination controls are now implemented, with the following differences from the mocks:
There is no page size control yet. This is still planned.
The pagination control is centered at the bottom rather than placed on the top aligned to the right. There are several reasons for this: 1) it provides more space for the control. See notes below about button and label sizes, 2) it avoids the user needing to scroll back up when they get to the bottom of the page, 3) it is where the control is most often positioned in other UIs (examples: Google Search, Stack Overflow, GitHub issues). Regarding the second point, some UIs avoid this problem by using a sticky header (Gmail). I think there are sites that have pagination controls at the top and bottom, but I don't have an example to hand.
The previous and next page buttons are larger and have explicit text labels. This was an intentional choice as some users were unclear about the behavior of unlabeled arrows. Also this is common in other UIs.
The font size in the pagination controls is 14px (our standard UI text size) instead of 13px
For a single-digit page number, the button size is 36x42px rather than 24x24. For touch devices the minimum recommended size is ~40px, for desktop they can be smaller but I would still advise not to go too small.
The nuances of exactly how pagination items are determined is explained in Revise pagination item calculation frontend-shared#1829. In brief, the items are chosen to satisfy the following constraints:
First, last and current pages always visible
One page before and after current always visible
Same number of items shown regardless of current page
I added some notes above on the rationale for the current implementation. We may decide to revisit these questions but I will create new issues for that.
Depends on #9133.
Designs for how pagination should look can be seen in the mockups here: https://www.figma.com/design/jon1U01LGSLcx7PWtZ9TPZ/Hypothesis---Group-Management?node-id=2677-127&node-type=canvas&t=p3razwyrGsqdX50I-0
The text was updated successfully, but these errors were encountered: