mirror of
https://github.com/discourse/discourse.git
synced 2025-06-04 23:36:11 +08:00
8b5da219d8
## Requirements Initially defined in https://meta.discourse.org/t/software-engineer-frontend-ember-js-yuriy-kurant/353612/14?u=yaran. 1. On mobile devices and tablets, users can open the search input field by tapping the search icon 2. When opened, the search input takes over the entire header area: - Users can tap the sliders icon to navigate to the advanced search page (/search) - Users can tap Cancel to close search input 3. After submitting a search, results area will take over the entire screen: - Users can tap the X icon to clear the search term from the input field - Users can tap Cancel to close search results area and return to their previous page (i.e. search area overlays content) ## Implementation 1. When opened, the search input takes over the entire header area: - changed panel width from `90vw` to `100vw` - on initial render (when search input is empty), search panel hovers over the header section only (doesn't cover main content below) - quick tip and recent searches lists are not displayed on mobile view 2. Tap on the sliders icon navigates to the advanced search page (`/search`) 3. Tap on the **Cancel** button: - closes search menu - if the search term is present, it is cleared 4. Tap on the left-hand side **Search** icon triggers a topics search ## Dev notes 1. Added `// TODO` questioning `search` service `noResults` default value of `false` 2. Added animation on toggling header search panel (created `delayed-destroy` custom modifier) 3. Extracted in-context search filters into a standalone component `search-menu/active-filters`: - mobile: active filters below search input - desktop: active filters inside search input 3. Removed unnecessary top padding when search results are empty 4. Added `data-test-` attrs for Ember tests. Benefits: - semantically `data-test-` attrs indicate that these parts of the layout are covered with tests - decouples selector dependency on `id/class` names for testing purposes - eliminates risk of broken tests due to `id/class` name changes