Uniswap / Uniswap/interface

Mobile NFT trait filter overlay improvement

Open
#7,216 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

improvement
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:

  1. Fixed Navigation: Make the navigation bar fixed at the top, so users can easily close the overlay at any point.
  2. 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
image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.