loading up the forgejo repo on tangled to test page performance
Use flex instead of float for sort button and search input (#25519)
Right now some sort buttons beside search input are unclickable because
#25338 removed `max-width` and the sort button is using float, sort
button is then covered by the `input`.
The way to fix this in this PR is changing the layout to `flex` and put
`input form` and sort `button` into `secondary menu`.
After:
<img width="1411" alt="Screen Shot 2023-06-26 at 16 40 52"
src="https://github.com/go-gitea/gitea/assets/17645053/63c12b17-793a-4ae7-bbda-f67b13b87212">
<img width="1428" alt="Screen Shot 2023-06-26 at 16 34 06"
src="https://github.com/go-gitea/gitea/assets/17645053/cb7d967e-355d-4cb0-955c-6139580fc17a">
<img width="716" alt="Screen Shot 2023-06-26 at 16 34 22"
src="https://github.com/go-gitea/gitea/assets/17645053/c74b5ef2-d46e-4487-8794-28bec984bb36">
<img width="1424" alt="Screen Shot 2023-06-26 at 16 34 32"
src="https://github.com/go-gitea/gitea/assets/17645053/8a5fdc05-a2c5-4ec4-979d-15a21501fe14">
<img width="1425" alt="Screen Shot 2023-06-26 at 16 35 21"
src="https://github.com/go-gitea/gitea/assets/17645053/eb73cd31-3914-4bc9-92ab-aba56f25128b">
<img width="1437" alt="Screen Shot 2023-06-26 at 16 36 14"
src="https://github.com/go-gitea/gitea/assets/17645053/1c3b4595-bb26-491f-aa68-60dc9ab22b84">
+51
-51
+9
-9
templates/admin/base/search.tmpl
+9
-9
templates/admin/base/search.tmpl
···
1
-
<div class="ui right floated secondary filter menu">
2
-
<!-- Sort -->
3
-
<div class="ui dropdown type jump item">
1
+
<div class="ui secondary filter menu gt-ac gt-mx-0">
2
+
<form class="ui form ignore-dirty gt-f1">
3
+
<div class="ui fluid action input">
4
+
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
5
+
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
6
+
</div>
7
+
</form>
8
+
<!-- Sort -->
9
+
<div class="ui dropdown type jump item gt-mr-0">
4
10
<span class="text">
5
11
{{.locale.Tr "repo.issues.filter_sort"}}
6
12
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
···
15
21
</div>
16
22
</div>
17
23
</div>
18
-
<form class="ui form ignore-dirty">
19
-
<div class="ui fluid action input">
20
-
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
21
-
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
22
-
</div>
23
-
</form>
+9
-9
templates/admin/emails/list.tmpl
+9
-9
templates/admin/emails/list.tmpl
···
4
4
{{.locale.Tr "admin.emails.email_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
5
5
</h4>
6
6
<div class="ui attached segment">
7
-
<div class="ui right floated secondary filter menu">
8
-
<!-- Sort -->
9
-
<div class="ui dropdown type jump item">
7
+
<div class="ui secondary filter menu gt-ac gt-mx-0">
8
+
<form class="ui form ignore-dirty gt-f1">
9
+
<div class="ui fluid action input">
10
+
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
11
+
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
12
+
</div>
13
+
</form>
14
+
<!-- Sort -->
15
+
<div class="ui dropdown type jump item gt-mr-0">
10
16
<span class="text">
11
17
{{.locale.Tr "repo.issues.filter_sort"}}
12
18
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
···
19
25
</div>
20
26
</div>
21
27
</div>
22
-
<form class="ui form ignore-dirty">
23
-
<div class="ui fluid action input">
24
-
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
25
-
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
26
-
</div>
27
-
</form>
28
28
</div>
29
29
<div class="ui attached table segment">
30
30
<table class="ui very basic striped table unstackable">
+8
-8
templates/admin/repo/search.tmpl
+8
-8
templates/admin/repo/search.tmpl
···
1
-
<div class="ui right floated secondary filter menu">
1
+
<div class="ui secondary filter menu gt-ac gt-mx-0">
2
+
<form class="ui form ignore-dirty gt-f1">
3
+
<div class="ui fluid action input">
4
+
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
5
+
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
6
+
</div>
7
+
</form>
2
8
<!-- Sort -->
3
-
<div class="ui dropdown type jump item">
9
+
<div class="ui dropdown type jump item gt-mr-0">
4
10
<span class="text">
5
11
{{.locale.Tr "repo.issues.filter_sort"}}
6
12
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
···
21
27
</div>
22
28
</div>
23
29
</div>
24
-
<form class="ui form ignore-dirty">
25
-
<div class="ui fluid action input">
26
-
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
27
-
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
28
-
</div>
29
-
</form>
+1
-1
templates/code/searchform.tmpl
+1
-1
templates/code/searchform.tmpl
···
1
-
<form class="ui form ignore-dirty" style="max-width: 100%">
1
+
<form class="ui form ignore-dirty">
2
2
<div class="ui fluid action input">
3
3
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true "Disabled" .CodeIndexerUnavailable}}
4
4
<div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{.locale.Tr "explore.search.type.tooltip"}}">
+15
-15
templates/explore/repo_search.tmpl
+15
-15
templates/explore/repo_search.tmpl
···
1
-
<div class="ui right floated secondary filter menu">
1
+
<div class="ui secondary filter menu gt-ac gt-mx-0">
2
+
<form class="ui form ignore-dirty gt-f1">
3
+
<input type="hidden" name="sort" value="{{$.SortType}}">
4
+
<input type="hidden" name="language" value="{{$.Language}}">
5
+
<div class="ui fluid action input">
6
+
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
7
+
{{if .PageIsExploreRepositories}}
8
+
<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
9
+
{{else}}
10
+
<input type="hidden" name="tab" value="repositories">
11
+
{{end}}
12
+
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
13
+
</div>
14
+
</form>
2
15
<!-- Sort -->
3
-
<div class="ui right dropdown type jump item">
16
+
<div class="ui dropdown type jump item gt-mr-0">
4
17
<span class="text">
5
18
{{.locale.Tr "repo.issues.filter_sort"}}
6
19
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
···
21
34
</div>
22
35
</div>
23
36
</div>
24
-
<form class="ui form ignore-dirty">
25
-
<input type="hidden" name="sort" value="{{$.SortType}}">
26
-
<input type="hidden" name="language" value="{{$.Language}}">
27
-
<div class="ui fluid action input">
28
-
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
29
-
{{if .PageIsExploreRepositories}}
30
-
<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
31
-
{{else}}
32
-
<input type="hidden" name="tab" value="repositories">
33
-
{{end}}
34
-
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
35
-
</div>
36
-
</form>
37
37
{{if and .PageIsExploreRepositories .OnlyShowRelevant}}
38
38
<div class="ui message explore-relevancy-note">
39
39
<span data-tooltip-content="{{.locale.Tr "explore.relevant_repositories_tooltip"}}">{{.locale.Tr "explore.relevant_repositories" ((printf "%s%s" $.Link "?only_show_relevant=0")|Escape) | Safe}}</span>
+9
-9
templates/explore/search.tmpl
+9
-9
templates/explore/search.tmpl
···
1
-
<div class="ui right floated secondary filter menu">
2
-
<!-- Sort -->
3
-
<div class="ui right dropdown type jump item">
1
+
<div class="ui secondary filter menu gt-ac gt-mx-0">
2
+
<form class="ui form ignore-dirty gt-f1">
3
+
<div class="ui fluid action input">
4
+
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
5
+
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
6
+
</div>
7
+
</form>
8
+
<!-- Sort -->
9
+
<div class="ui dropdown type jump item gt-mr-0">
4
10
<span class="text">
5
11
{{.locale.Tr "repo.issues.filter_sort"}}
6
12
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
···
15
21
</div>
16
22
</div>
17
23
</div>
18
-
<form class="ui form ignore-dirty">
19
-
<div class="ui fluid action input">
20
-
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
21
-
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
22
-
</div>
23
-
</form>
24
24
<div class="ui divider"></div>