Mobile NFT trait filter overlay improvement
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.5k
- Forks
- 5.4k
- PR merge metrics
- No merged PRs in 30d
Description
Is your feature request related to a problem? Please describe.
I'm frustrated when using the NFT trait filter. When applying the filter selecting the 'close' button in the top right is the only way to apply filters. This feels counter intuative as this could be mistaken for cancel. Additionally, if the list of filters extends beyond the viewable area, users lose sight of the 'close' button and have to scroll back up to apply their changes.
Describe the solution you'd like
To enhance the user experience, the following changes are suggested:
- Fixed Navigation: Make the navigation bar fixed at the top, so users can easily close the overlay at any point.
- Fixed Footer: Introduce a fixed footer at the bottom of the overlay, containing buttons to "Apply Changes" and "Clear All". This will provide a more intuitive way for users to interact with the filter settings.
Describe alternatives you've considered
Alternative solutions like a slide-in panel were considered. Or only showing the footer when a filter exists. However, these alternatives would require significant changes to the current UI and would not align with the overall design. Based on quick comparisons platforms like OpenSea, Rarible, and Airbnb use similar filtering patterns.
Additional context
A quick concept of how this could work.
https://github.com/Uniswap/interface/assets/9797920/6160e8a2-2e64-42c6-b65a-0db2731dff22
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the mobile NFT trait filter overlay described in this issue and compare its current navigation and filter controls with the provided concept. Done means the navigation remains fixed while scrolling and a fixed footer provides working “Apply Changes” and “Clear All” actions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100