1
1
mirror of https://github.com/go-gitea/gitea synced 2025-07-22 18:28:37 +00:00

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](https://github.com/go-gitea/gitea/assets/2114189/b965ac00-bad6-4d2f-9103-8841bd940aa5)

</details>


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

<details>

![image](https://github.com/go-gitea/gitea/assets/2114189/a1add892-21dc-423b-90d5-5569faa3dced)


![image](https://github.com/go-gitea/gitea/assets/2114189/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
6 changed files with 37 additions and 27 deletions

View File

@@ -204,12 +204,13 @@
<h2>Dropdown with SVG</h2>
<div>
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
<span class="text">simple</span>
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input &amp; flex-item in menu</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="menu flex-items-menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
<div class="item">item</div>
<div class="item"><input type="radio">item</div>
<div class="item"><input type="radio">item</div>
</div>
</div>
<div class="ui search selection dropdown">