willdot.net
appview/pages: improve search bar UI
- use grid to reduce the HTML elements
- move open/closed buttons to left
- move new button to bottom on small screen
Signed-off-by: Seongmin Lee <git@boltless.me>
authored by
+19
-24
appview/pages/templates/repo/issues/issues.html
+19
-24
appview/pages/templates/repo/issues/issues.html
···
27
27
"Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}
28
28
{{ $values := list $open $closed }}
29
29
30
-
<div class="flex flex-col gap-2">
31
-
<div class="flex justify-between items-stretch gap-4">
32
-
<form class="flex flex-1 relative" method="GET">
33
-
<input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
34
-
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
35
-
{{ i "search" "w-4 h-4" }}
36
-
</div>
37
-
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
38
-
<a
39
-
href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
40
-
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
41
-
>
42
-
{{ i "x" "w-4 h-4" }}
43
-
</a>
44
-
</form>
45
-
<div class="hidden sm:block">
46
-
{{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
30
+
<div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2">
31
+
<form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET">
32
+
<input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
33
+
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
34
+
{{ i "search" "w-4 h-4" }}
47
35
</div>
36
+
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
48
37
<a
49
-
href="/{{ .RepoInfo.FullName }}/issues/new"
50
-
class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
51
-
>
52
-
{{ i "circle-plus" "w-4 h-4" }}
53
-
<span>new</span>
38
+
href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
39
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
40
+
>
41
+
{{ i "x" "w-4 h-4" }}
54
42
</a>
55
-
</div>
56
-
<div class="sm:hidden">
43
+
</form>
44
+
<div class="sm:row-start-1">
57
45
{{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
58
46
</div>
47
+
<a
48
+
href="/{{ .RepoInfo.FullName }}/issues/new"
49
+
class="col-start-3 btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
50
+
>
51
+
{{ i "circle-plus" "w-4 h-4" }}
52
+
<span>new</span>
53
+
</a>
59
54
</div>
60
55
<div class="error" id="issues"></div>
61
56
{{ end }}
+19
-23
appview/pages/templates/repo/pulls/pulls.html
+19
-23
appview/pages/templates/repo/pulls/pulls.html
···
33
33
"Icon" "ban"
34
34
"Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}
35
35
{{ $values := list $open $merged $closed }}
36
-
<div class="flex flex-col gap-2">
37
-
<div class="flex justify-between items-stretch gap-2">
38
-
<form class="flex flex-1 relative" method="GET">
39
-
<input type="hidden" name="state" value="{{ .FilteringBy.String }}">
40
-
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
41
-
{{ i "search" "w-4 h-4" }}
42
-
</div>
43
-
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
44
-
<a
45
-
href="?state={{ .FilteringBy.String }}"
46
-
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
47
-
>
48
-
{{ i "x" "w-4 h-4" }}
49
-
</a>
50
-
</form>
51
-
<div class="hidden sm:block">
52
-
{{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
36
+
<div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2">
37
+
<form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET">
38
+
<input type="hidden" name="state" value="{{ .FilteringBy.String }}">
39
+
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
40
+
{{ i "search" "w-4 h-4" }}
53
41
</div>
54
-
<a href="/{{ .RepoInfo.FullName }}/pulls/new"
55
-
class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
42
+
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
43
+
<a
44
+
href="?state={{ .FilteringBy.String }}"
45
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
56
46
>
57
-
{{ i "git-pull-request-create" "w-4 h-4" }}
58
-
<span>new</span>
47
+
{{ i "x" "w-4 h-4" }}
59
48
</a>
60
-
</div>
61
-
<div class="sm:hidden">
49
+
</form>
50
+
<div class="sm:row-start-1">
62
51
{{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
63
52
</div>
53
+
<a
54
+
href="/{{ .RepoInfo.FullName }}/pulls/new"
55
+
class="col-start-3 btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
56
+
>
57
+
{{ i "git-pull-request-create" "w-4 h-4" }}
58
+
<span>new</span>
59
+
</a>
64
60
</div>
65
61
<div class="error" id="pulls"></div>
66
62
{{ end }}