Pagination #19
Open
Pagination #19
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Create Pagination.tsx, which should be able to be slotted into any page that has a lengthy list of child elements. This commit enables pagination for the EventsPage.tsx, but this should prove suitable for other pages as well. Of note: this method of pagination does not reduce the initial load time, just changes the way elements are displayed, potentially making them easier to comb through.
Previously, not enough buttons were shown when on the right edge of the potential pages. Now, they should display correctly. The JSDoc string has also been updated to clarify how even numbers behave when used for buttonLimit.
For consistency between this and other pages that use `react-select`, these components have been modified. Both can be styled, simultaneously, from the Pagination component, using `react-select` `styles` objects.
Improves the consistency of PageNav buttons by enforcing a minimum width - rapid clicking is less likely to jumbled you up. Fixes an incorrect property in the `grid-rows-update-mobile` Tailwind, which now works as expected -- but without being an invalid property value. Game update layouts now flow a bit better together. Adds `grid-rows-pagination-mobile` and addresses some layout issues with small screens. Some tiny visual improvements tucked in there as well.
Snipe another CSS issue while I'm here! PageButtons were displaying a little poorly at 3 characters, so now they're a bit less apt to do that. Also, `PageSizer` was hogging a bit too much room on small screens.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This one is a doozy, but hopefully will be helpful in the long run!
I've created a relatively-extensible (I hope)
Paginationcomponent, then put it in place for the Events page. It's got some built-in customization for the child components found within, but by default it shows areact-selectdropdown to change how many events appear on the page, a handful of navigational buttons, and anotherreact-selectdropdown to jump to a specific page at both the top and bottom of the screen, surrounding the paginated content.The pagination elements are responsive, insofar as they'll rearrange themselves using CSS grid properties as much as they can to get out of each other's way on screens lower than the
smbreakpoint, with some slight adjustments at themdbreakpoint as well, just because I thought the layout looked a little better on that size screen.Notably, there is no pagination of the loading of Events here, just pagination for their display.
EventPage.tsxstill loads all the event objects, this just controls how many are made popped in for folks to see.Please let me know if you've got any feedback!