Improve repo search UI (#29767)

1. Introduce a special "flex-items-block" for menu items, to align the
dropdown menu items
2. Simplify the "repo search" form
3. Add missing "TopicOnly" search option

Screenshots:

The old UI items don't align:

<details>

![image](b965ac00-bad6-4d2f-9103-8841bd940aa5)

</details>


New UI (doesn't change much, but the items align)

<details>

![image](a1add892-21dc-423b-90d5-5569faa3dced)


![image](fb4040b2-96d8-4fb2-a0ed-760b9881fd86)

</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-03-15 17:45:30 +08:00 committed by GitHub
parent 0d3ec8e2ad
commit 7a6260f889
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 37 additions and 27 deletions

View file

@ -1980,7 +1980,6 @@ table th[data-sortt-desc] .svg {
.ui.ui.button,
.ui.ui.dropdown,
.ui.ui.label,
.flex-items-inline > .item,
.flex-text-inline {
display: inline-flex;
align-items: center;
@ -2017,3 +2016,10 @@ table th[data-sortt-desc] .svg {
align-items: center;
gap: .25rem;
}
/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */
.ui.dropdown .menu.flex-items-menu > .item {
display: flex !important;
align-items: center;
gap: .5rem;
}