From 7a6260f889e80856e2fb00bdfb8df90ec7652536 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 15 Mar 2024 17:45:30 +0800
Subject: 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>
---
 templates/shared/repo_search.tmpl  | 32 ++++++++++++++------------------
 templates/shared/search/input.tmpl |  2 +-
 2 files changed, 15 insertions(+), 19 deletions(-)

(limited to 'templates/shared')

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}}>
-- 
cgit v1.2.3