feat: Implement search results page #2916
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
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:
If you keep clicking "show more hashtags" you get the full list:
"Loading" UI state:
Search input is sticky
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:
Mobile:
Issues
This PR helps with #2900