diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2024-03-15 17:45:30 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-15 09:45:30 +0000 |
| commit | 7a6260f889e80856e2fb00bdfb8df90ec7652536 (patch) | |
| tree | d95d867cc923c7acdb753b98e8dfbf3cd9957a23 /templates/shared | |
| parent | 0d3ec8e2adfcf49329b52d74367698b62ffb3f73 (diff) | |
| download | gitea-7a6260f889e80856e2fb00bdfb8df90ec7652536.tar.gz gitea-7a6260f889e80856e2fb00bdfb8df90ec7652536.zip | |
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>
</details>
New UI (doesn't change much, but the items align)
<details>
</details>
---------
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'templates/shared')
| -rw-r--r-- | templates/shared/repo_search.tmpl | 32 | ||||
| -rw-r--r-- | templates/shared/search/input.tmpl | 2 |
2 files changed, 15 insertions, 19 deletions
diff --git a/templates/shared/repo_search.tmpl b/templates/shared/repo_search.tmpl index 7ba0070863..7fcb5d2361 100644 --- a/templates/shared/repo_search.tmpl +++ b/templates/shared/repo_search.tmpl @@ -1,22 +1,18 @@ <div class="ui small secondary filter menu"> - <form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-flex-row tw-gap-x-2 gt-ac"> - {{if .Language}}<input hidden name="language" value="{{.Language}}">{{end}} + <form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-gap-x-2"> + {{if .Language}}<input type="hidden" name="language" value="{{.Language}}">{{end}} + {{if .PageIsExploreRepositories}}<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">{{end}} + {{if .TabName}}<input type="hidden" name="tab" value="{{.TabName}}">{{end}} + {{if .TopicOnly}}<input type="hidden" name="topic" value="{{.TopicOnly}}">{{end}} <div class="ui small fluid action input tw-flex-1"> {{template "shared/search/input" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.repo_kind")}} - {{if .PageIsExploreRepositories}} - <input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}"> - {{else if .TabName}} - <input type="hidden" name="tab" value="{{.TabName}}"> - {{end}} {{template "shared/search/button"}} </div> <!-- Filter --> - <div class="ui small dropdown type jump item tw-mr-0"> - <span class="text"> - {{ctx.Locale.Tr "filter"}} - </span> + <div class="item ui small dropdown jump"> + <span class="text">{{ctx.Locale.Tr "filter"}}</span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} - <div class="menu"> + <div class="menu flex-items-menu"> <label class="item"><input type="radio" name="clear-filter"> {{ctx.Locale.Tr "filter.clear"}}</label> <div class="divider"></div> <label class="item"><input type="radio" name="archived" {{if .IsArchived.Value}}checked{{end}} value="1"> {{ctx.Locale.Tr "filter.is_archived"}}</label> @@ -36,10 +32,8 @@ </div> </div> <!-- Sort --> - <div class="ui small dropdown type jump item gt-mr-0"> - <span class="text"> - {{ctx.Locale.Tr "repo.issues.filter_sort"}} - </span> + <div class="item ui small dropdown jump"> + <span class="text">{{ctx.Locale.Tr "repo.issues.filter_sort"}}</span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} <div class="menu"> <label class="{{if eq .SortType "newest"}}active {{end}}item"><input hidden type="radio" name="sort" {{if eq .SortType "newest"}}checked{{end}} value="newest"> {{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</label> @@ -61,8 +55,10 @@ </form> </div> {{if and .PageIsExploreRepositories .OnlyShowRelevant}} - <div class="ui message explore-relevancy-note"> - <span data-tooltip-content="{{ctx.Locale.Tr "explore.relevant_repositories_tooltip"}}">{{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}}</span> + <div class="ui message"> + <span data-tooltip-content="{{ctx.Locale.Tr "explore.relevant_repositories_tooltip"}}"> + {{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}} + </span> </div> {{end}} <div class="divider"></div> diff --git a/templates/shared/search/input.tmpl b/templates/shared/search/input.tmpl index 195cefc2f6..75bed07b80 100644 --- a/templates/shared/search/input.tmpl +++ b/templates/shared/search/input.tmpl @@ -1,4 +1,4 @@ {{/* Value - value of the search field (for search results page) */}} {{/* Disabled (optional) - if search field has to be disabled */}} {{/* Placeholder (optional) - placeholder text to be used */}} -<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{with .Placeholder}}{{.}}{{else}}{{ctx.Locale.Tr "search.search"}}{{end}}"{{with .Value}} value="{{.}}"{{end}}{{if .Disabled}} disabled{{end}}> +<input type="search" name="q"{{with .Value}} value="{{.}}"{{end}} maxlength="255" spellcheck="false" placeholder="{{with .Placeholder}}{{.}}{{else}}{{ctx.Locale.Tr "search.search"}}{{end}}"{{if .Disabled}} disabled{{end}}> |