Fix issue #227 - Improve the case table with sorting and pagination #245
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
mailsg
requested review from
TimidRobot,
Shafiya-Heena and
krysal
and removed request for
a team
TimidRobot
requested changes
Nov 1, 2024
Comment on lines
5
to
53
| <style> | ||
| .pagination { | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 8px 0; | ||
| } | ||
|
|
||
| .pagination-list { | ||
| display: flex; | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .pagination-link { | ||
| font-size: 12px; | ||
| padding: 4px 8px; | ||
| margin: 0 2px; | ||
| background-color: #f8f9fa; | ||
| color: #555; | ||
| border: 2px solid orangered; | ||
| border-radius: 3px; | ||
| text-decoration: none; | ||
| transition: background-color 0.2s, color 0.2s; | ||
| } | ||
|
|
||
| .pagination-link:hover { | ||
| background-color: orangered; | ||
| color: white; | ||
| border: 2px solid orangered; | ||
| } | ||
|
|
||
| .pagination-link.is-current { | ||
| background-color: orangered; | ||
| color: #fff; | ||
| border-radius: 15px; | ||
| border-color: orangered; | ||
| } | ||
|
|
||
| .pagination-link.is-rounded { | ||
| border-radius: 15px; | ||
| } | ||
|
|
||
| .pagination-link:disabled { | ||
| pointer-events: none; | ||
| color: #ccc; | ||
| background-color: #f0f0f0; | ||
| } | ||
| </style> |
legal_db/static/listing.js
Outdated
| paginationList.scrollIntoView({ behavior: 'smooth', block: 'center' }); | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
please ensure the newline at end of file remains
|
Hi @TimidRobot , Thank you for the feedback. I have removed the inline style and ensured newline at the end of the file as suggested. Regards. |
|
The repository now has development data. Please load it and confirm that pagination works correctly with filters. |
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.
Fixes
Description
This pull request enhances the pagination component of the legal cases listing page on the Creative Commons
legal_dbsite. It improves user experience by ensuring that the pagination controls are visually appealing and easily accessible when navigating through multiple pages. The changes include updated HTML structure and CSS styling for better aesthetics, along with a JavaScript implementation that automatically scrolls to the pagination area upon page navigation, ensuring a seamless user experience without cluttering the URL with hash fragments.Technical details
It implements a
flexboxlayout for improved alignment and responsiveness, updatesCSSstyles for enhanced visibility and interactivity of pagination links, and includes aJavaScriptfunction that smoothly scrolls to the pagination area on page load. TheURLremains clean without hash fragments, enhancing overall user navigation experience.Screenshots
pagination.mp4
Checklist
Update index.md).mainormaster).visible errors.
Developer Certificate of Origin
For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."
Developer Certificate of Origin