Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement | Search Results UI #170

Open
aadeshkulkarni opened this issue Jun 13, 2024 · 6 comments · May be fixed by #257
Open

Enhancement | Search Results UI #170

aadeshkulkarni opened this issue Jun 13, 2024 · 6 comments · May be fixed by #257
Labels
enhancement New feature or request frontend good first issue Good for newcomers

Comments

@aadeshkulkarni
Copy link
Owner

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

@aadeshkulkarni aadeshkulkarni added frontend enhancement New feature or request good first issue Good for newcomers labels Jun 13, 2024
@moiam
Copy link
Contributor

moiam commented Jun 14, 2024

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
Copy link
Owner Author

@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
Copy link

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

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
Copy link
Owner Author

@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
Copy link

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

@moiam
Copy link
Contributor

moiam commented Jul 14, 2024

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

@Nexonikk Nexonikk linked a pull request Jul 28, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request frontend good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants