jargons.dev
jargons.dev copied to clipboard
jargonsdev
Improve Pagination Component
The current pagination component provides basic functionality with links to the previous and next pages, along with a display of the current page number. This issue requests an enhancement to the pagination component to improve its usability and provide additional features.
Features to Add:
- Display of all available pages for easier navigation.
- Next and previous navigation links as chevron icons for better visual indication.
- An input field that allows users to enter a custom page number for quick navigation.
Design Changes:
Current:
Desired: https://app.opensauced.pizza/feed
Implementation Details:
- Update the existing pagination component to include the new features.
- Use chevron icons for the next and previous navigation links.
- Create a input field for selecting a custom page number.
Acceptance Criteria:
- The new pagination component should display all available pages, next and previous navigation links as chevron icons, and an input field for custom page selection.
- The pagination component should be visually appealing and intuitive to use.
Additional Information:
- This enhancement will improve the user experience by providing more intuitive navigation options and making it easier for users to navigate through the pages.
Hi @babblebey , Iām interested in working on this issue as my first contribution to open source.
Oh great @sirconfy
Let's do it šŖš¾
I'm assigning you the issue, kindly reach out here if you need any help either during set-up or as you approach the fix.
This suggests to me that you might have skipped the dev/setup step while setting your local environment š¤
Did you run the npm run setup script as stated in the "Run Project Locally" section of the main README - https://github.com/jargonsdev/jargons.dev?tab=readme-ov-file#run-project-locally?
@babblebey when I run the npm run steup it doesn't run anything (take a look at the image below).
Please create an issue about this on the repo here.
As you write the issue, this will make it real good.
- Add context... This can be your Operating System, NodeJS Version
- Screenshot/Screencast(video)
It is working now. I switched to Windows
Thanks for letting me know this.... Could you kindly update the issue suggesting that this might be associated to masOS???
@babblebey I cannot see the mentioned pagination. Please, how do I locate it? The image shows the current look of the app on my browser.
Okay, so pagination are on pages with plenty words!
We use them on the browse word by alphabet page.
Go to the /browse page, clicking on the Browse Words link below the Search form in the homepage. Then explore different alphabets, you'll find the pagination components rendered on any alphabet page with words so much that it paginates.
Let me know how it goes.
@babblebey, which component in the code base can I locate the stuff I marked in the image? The toggling is not allowing me to text what I am implementing. I have checked and couldn't locate the component where it's been rendered. Thanks
Haha š
That's not related to the project, its related to Astro, the lib we built the project with... Here's a guide to disabling it for you https://docs.astro.build/en/guides/dev-toolbar/#per-user
Thanks, after disabling it when pushing and making a PR do I need to enable it?
@babblebey Please confirm the pagination design before I make a PR. Functionality-wise, everything works fine.
Best way to confirm is to just create PR š... we can go over it then...
One note though... the go to page button... Black please #000000
https://github.com/jargonsdev/jargons.dev/pull/237#pullrequestreview-3327256076
@babblebey can you confirm I made a Push since 5 days ago. I have fixed the suggestion made by copilot.