diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 11c2fa5940..091cbe7287 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -15,7 +15,7 @@ <div class="ui dropdown type jump item"> <span class="text">{{ctx.Locale.Tr "admin.users.list_status_filter.menu_text"}}</span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} - <div class="menu"> + <div class="menu flex-items-menu"> <a class="item j-reset-status-filter">{{ctx.Locale.Tr "admin.users.list_status_filter.reset"}}</a> <div class="divider"></div> <label class="item"><input type="radio" name="status_filter[is_admin]" value="1"> {{ctx.Locale.Tr "admin.users.list_status_filter.is_admin"}}</label> diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 0b1f982ee4..284566046d 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -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 & 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"> 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}}> diff --git a/tests/integration/explore_repos_test.go b/tests/integration/explore_repos_test.go index 26fd1dde64..1e3ab314fd 100644 --- a/tests/integration/explore_repos_test.go +++ b/tests/integration/explore_repos_test.go @@ -8,11 +8,18 @@ import ( "testing" "code.gitea.io/gitea/tests" + + "github.com/stretchr/testify/assert" ) func TestExploreRepos(t *testing.T) { defer tests.PrepareTestEnv(t)() - req := NewRequest(t, "GET", "/explore/repos") - MakeRequest(t, req, http.StatusOK) + req := NewRequest(t, "GET", "/explore/repos?q=TheKeyword&topic=1&language=TheLang") + resp := MakeRequest(t, req, http.StatusOK) + respStr := resp.Body.String() + + assert.Contains(t, respStr, `<input type="hidden" name="topic" value="true">`) + assert.Contains(t, respStr, `<input type="hidden" name="language" value="TheLang">`) + assert.Contains(t, respStr, `<input type="search" name="q" value="TheKeyword"`) } diff --git a/web_src/css/base.css b/web_src/css/base.css index 4083ec0413..2c055b7439 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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; +}