Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pagination to the edit-group-members page (frontend part) #9148

Closed
seanh opened this issue Nov 28, 2024 · 2 comments
Closed

Add pagination to the edit-group-members page (frontend part) #9148

seanh opened this issue Nov 28, 2024 · 2 comments
Assignees
Labels

Comments

@seanh
Copy link
Contributor

seanh commented Nov 28, 2024

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

@seanh seanh changed the title Add pagination to the edit-group-members page Add pagination to the edit-group-members page (frontend part) Nov 28, 2024
@seanh seanh added the frontend label Dec 4, 2024
@robertknight
Copy link
Member

robertknight commented Dec 12, 2024

Pagination controls are now implemented, with the following differences from the mocks:

  1. There is no page size control yet. This is still planned.
  2. 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.
  3. 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.
  4. The font size in the pagination controls is 14px (our standard UI text size) instead of 13px
  5. 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

@robertknight
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants