Enhancement | Search Results UI

aadeshkulkarni / figuringout

https://figuringout.life

MIT License

93 stars 92 forks source link

Enhancement | Search Results UI #170

Open aadeshkulkarni opened 3 months ago

aadeshkulkarni commented 3 months ago

Current

The Search results UI is pretty basic at the moment.

Expectation:

Take inspiration from this design and build something similar: https://dribbble.com/shots/24103501-Search-Results-Animation

Things to consider:

The search result can have Blogs, Users, Topics
The search feature is currently hidden for mobile screens, but consider making this design responsive for all screens.
Observe the intricacies of the design of the dribbble link. The transitions, the borders, the colours, the shortcuts.

Screenshot 2024-06-13 at 10 49 30 AM

Screenshot 2024-06-13 at 10 49 23 AM

moiam commented 3 months ago

Hi @aadeshkulkarni , I am interested in doing this task. We can take advantage of the components you have already made as Avatar for the images of the authors. Then in the settings panel, we should configure a hook for the appearance of the tags that the user wants to have in the search, and also so that when it receives an input that expands the search box. The rest is styling.

aadeshkulkarni commented 3 months ago

@moiam - It's been 2 weeks since the issue got assigned to you. Please share an update every 24 to 48 hours once an issue is assigned.

Please read the contributing.md file once.

mannika763 commented 2 months ago

Hey @aadeshkulkarni I would like to confirm a few things. Currently, the search result looks like this.

For the Dribbble link you provided, do I need to convert it exactly as shown in the Dribbble link? Will the search position remain the same? Also, it seems line functionality already ready and it's just the styling that remains?

aadeshkulkarni commented 2 months ago

@mannika763

For the Dribbble link you provided, do I need to convert it exactly as shown in the Dribbble link?

It would be great, if that's possible. But, I'm okay if it matches at least 75-80%.

Will the search position remain the same?

The initial search position can remain as it is currently (At the top)
When a user clicks on the searchbar, A black overlay with search box can appear (like the dribbble link)
When user types something, the search result can appear on the overlay.
If user clicks on any search result, the app redirects to that page.

Also, it seems line functionality already ready and it's just the styling that remains?

Yes, that's correct.

mannika763 commented 2 months ago

Okay, thank you for the explanation. I am working on it.

moiam commented 2 months ago

Hi, sorry for not writing sooner 😞 I've had a busy few weeks. I can share with the partner @mannika763 the progress I made in case it would be useful for him to continue the task. @aadeshkulkarni