Adds Search Bar and Autocomplete Functionality

Step7750 commented 6 years ago

Adds Search Bar toggle to header
On desktop, presents the search bar in the header, on mobile it opens a dialog (due to lack of space)
Creates SearchService that hooks up to the autocomplete backend
Uses autocomplete results to populate autocomplete for the input

Some side effects

Fixes utils.isMobile reference for the side nav, it now changes the mode when mobile
Fixes utils.isMobile reference for the top margin of the content when mobile
Renames the site title in the header to "MP" on mobile devices for more header space

Continues progress on #10

Step7750 commented 6 years ago

Screenshots:

Mobile:

Desktop without Toggle:

Desktop w/ toggle and input:

Step7750 commented 6 years ago

@xiningchen Thoughts on the styling?

xiningchen commented 6 years ago

As a matter of fact, yes. Two things on the styling:

Mobile
- The search pop up should have an explicit close button on the top right corner. Currently looking at the icon (x) on the search, it feels like if I click it, the entire popup might close. In other words, it feels less like a clear input and might be misinterpreted. So I strongly recommend an actual close button on the top right. It doesn't have to be very bold (maybe grey color). Of course since it's for mobile, also support the function where user can close popup by clicking anywhere else on the screen.
- The search pop up should be moved slightly higher up. Reason: when people give input on mobile, the keyboard pops up from the bottom of the screen; this might cover up the popup/input box. I'm not sure how you can test/check this but I think it's worth looking up.
Desktop
- I think we should just have the expanded search bar instead of a toggle icon. The reason is because we have a HUGE space and so we've got lots of room. Another thing is that we want to give the impression that the search bar is for the entire website and it's a permanent feature. Hence having it expanded will emphasize that. An icon is difficult to see and for someone looking to browse, they won't go looking for a search icon. If it's expanded, even if they might not be looking for it, it'll remind them they can search and will encourage the user to search.

Step7750 commented 6 years ago

@xiningchen I've made the search bar expand by default on desktop.

The little x in the input when typing is automatically added by the browser when using type=search for the input. If we remove that, the browser may handle it improperly: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

There is no built in option to offset a Material2 dialog AFAIK. I don't think it is worth the potential hack to make that work given how it could break if the library updates.

xiningchen commented 6 years ago

I think this can be merged.

MemePlace / Frontend

Adds Search Bar and Autocomplete Functionality #28

The search pop up should be moved slightly higher up. Reason: when people give input on mobile, the keyboard pops up from the bottom of the screen; this might cover up the popup/input box. I'm not sure how you can test/check this but I think it's worth looking up.