UX: Add second Search button on mobile (#14404)

This commit is contained in:
Penar Musaraj 2021-09-21 13:02:00 -04:00 committed by GitHub
parent ed0b6a3660
commit 3e3043dbaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 4 deletions

View File

@ -411,8 +411,8 @@ export default Controller.extend({
this.selected.clear(); this.selected.clear();
}, },
search(collapseFilters = false) { search(options = {}) {
if (collapseFilters) { if (options.collapseFilters) {
document document
.querySelector("details.advanced-filters") .querySelector("details.advanced-filters")
?.removeAttribute("open"); ?.removeAttribute("open");

View File

@ -228,4 +228,17 @@
</div> </div>
</div> </div>
</details> </details>
{{#if site.mobileView}}
<div class="second-search-button">
{{d-button
action=search
icon="search"
label="search.search_button"
class="btn-primary search-cta"
ariaLabel="search.search_button"
disabled=searchButtonDisabled
}}
</div>
{{/if}}
</div> </div>

View File

@ -16,7 +16,7 @@
value=searchTerm value=searchTerm
class="full-page-search search no-blur search-query" class="full-page-search search no-blur search-query"
aria-label=(i18n "search.search_term_label") aria-label=(i18n "search.search_term_label")
enter=(action "search" true) enter=(action "search" (hash collapseFilters=true))
hasAutofocus=hasAutofocus hasAutofocus=hasAutofocus
aria-controls="search-result-count" aria-controls="search-result-count"
}} }}
@ -28,7 +28,7 @@
onChange=(action (mut search_type)) onChange=(action (mut search_type))
}} }}
{{d-button {{d-button
action=(action "search" true) action=(action "search" (hash collapseFilters=true))
icon="search" icon="search"
label="search.search_button" label="search.search_button"
class="btn-primary search-cta" class="btn-primary search-cta"
@ -50,6 +50,8 @@
{{search-advanced-options {{search-advanced-options
searchTerm=(readonly searchTerm) searchTerm=(readonly searchTerm)
onChangeSearchTerm=(action (mut searchTerm)) onChangeSearchTerm=(action (mut searchTerm))
search=(action "search" (hash collapseFilters=true))
searchButtonDisabled=searchButtonDisabled
expandFilters=expandFilters expandFilters=expandFilters
}} }}
</div> </div>

View File

@ -3,4 +3,12 @@
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.second-search-button {
margin-top: 1em;
display: flex;
.btn {
width: 100%;
}
}
} }