mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-21 07:35:47 +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 |
||
|---|---|---|
| .. | ||
| locales | ||
| shared_examples | ||
| backups_helpers.rb | ||
| bookmarkable_helper.rb | ||
| concurrency.rb | ||
| diagnostics_helper.rb | ||
| discourse_event_helper.rb | ||
| dom_matcher.rb | ||
| fake_bookmark_hashtag_data_source.rb | ||
| fake_logger.rb | ||
| fake_s3.rb | ||
| fast_image_helpers.rb | ||
| final_destination_helper.rb | ||
| helpers.rb | ||
| i18n_helpers.rb | ||
| imap_helper.rb | ||
| integration_helpers.rb | ||
| match_html_matcher.rb | ||
| mock_git_importer.rb | ||
| negated_matcher.rb | ||
| omniauth_helpers.rb | ||
| onebox_helpers.rb | ||
| problem_check_matcher.rb | ||
| rate_limit_matcher.rb | ||
| sample_plugin_site_settings.yml | ||
| service_matchers.rb | ||
| sidekiq_helpers.rb | ||
| site_settings_helpers.rb | ||
| system_helpers.rb | ||
| test_second_factor_action.rb | ||
| time_matcher.rb | ||
| topic_guardian_can_see_consistency_check.rb | ||
| ts_vector_matcher.rb | ||
| uploads_helpers.rb | ||
| webauthn_integration_helpers.rb | ||
