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

feat: Implement search results page #2916

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Christopher-Hayes
Copy link
Contributor

@Christopher-Hayes Christopher-Hayes commented Aug 11, 2024

This PR seeks to more fully implement the /search page.

This allows Elk to take desktop users to the full /search page when they hit enter from the search dropdown widget.

Changes

  • Hitting enter when the search dropdown widget is open will open the /search page.
  • Search input and search results are implemented directly in the search.vue page.
  • This reuses pre-existing search components, but does add a SearchResultList.vue component to be shared by both the search widget and the search page.

This PR does not handle advanced search settings. Advanced search would be really nice on the /search page, but I didn't want to make this PR too complex.

UI Choices

This is obviously open to discussion and tweaks are encouraged.

For hashtags and accounts, I wanted to give users the possibility of seeing ALL results, but I didn't want to clutter the UI too much. So, I currently have the only 6 hashtags and 6 accounts showing by default on desktop, on mobile it's 3. Both sections have a "show more" button.

The widget dropdown looks identical, it just takes you to /search when you hit enter.

Screenshots

Search page:

image

If you keep clicking "show more hashtags" you get the full list:

image

"Loading" UI state:

image

Search input is sticky

image

I'm not crazy about the floating search box UI for this page. When we add advanced settings, I think we may need to change that up for /search. I tried to not change too much with the search box in this PR.

Edge cases:

image

Mobile:

image

image

Issues

This PR helps with #2900

Copy link

netlify bot commented Aug 11, 2024

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 7ee3146
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/66b86d17b0d8e100087563f8

Copy link

netlify bot commented Aug 11, 2024

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 7ee3146
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/66b86d175464980008152298
😎 Deploy Preview https://deploy-preview-2916--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant