github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-24 21:21:34 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: search dropdown layout improvements (#31568)

Browse Source 
This change improves the alignment and placement of the search spinner
and icons (ie. clear search / advanced search). Having a fixed width on
desktop prevents the search field from changing width when the loading
icon is toggled.
This commit is contained in:
David Battersby
2025-03-03 09:36:53 +04:00
committed by GitHub
parent 8615fc6cbb
commit 081a0159d8
2 changed files with 3 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -382,13 +382,12 @@ $search-pad-horizontal: 0.5em;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-width: 2px; border-width: 2px;
margin: 0; margin: 0 0.5em 0.25em 0;
margin-top: 2px; margin-top: 2px;
} }
.show-advanced-search, .show-advanced-search,
a.clear-search { a.clear-search {
padding: 0 3px;
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;

10
app/assets/stylesheets/desktop/components/header-search.scss
View File

@ -72,20 +72,14 @@
} }
.searching { .searching {
display: flex; width: 3em;
padding-right: 0.5rem; justify-content: flex-end;
.show-advanced-search, .show-advanced-search,
a.clear-search { a.clear-search {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.spinner-holder {
display: inline-block;
vertical-align: top;
margin-left: 4px;
}
} }
.search-icon { .search-icon {