lewis.moe
Monorepo for Tangled
appview/pages: improve search bar styling in issues and pulls
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
Tangled
823624a4
9a46abec
+1
-1
appview/pages/templates/layouts/repobase.html
+1
-1
appview/pages/templates/layouts/repobase.html
···
104
104
</div>
105
105
</nav>
106
106
{{ block "repoContentLayout" . }}
107
-
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
107
+
<section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">
108
108
{{ block "repoContent" . }}{{ end }}
109
109
</section>
110
110
{{ block "repoAfter" . }}{{ end }}
+38
-32
appview/pages/templates/repo/issues/issues.html
+38
-32
appview/pages/templates/repo/issues/issues.html
···
8
8
{{ end }}
9
9
10
10
{{ define "repoContent" }}
11
-
<div class="flex justify-between items-center gap-4">
12
-
<div class="flex gap-4">
13
-
<a
14
-
href="?state=open"
15
-
class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
16
-
>
17
-
{{ i "circle-dot" "w-4 h-4" }}
18
-
<span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>
19
-
</a>
20
-
<a
21
-
href="?state=closed"
22
-
class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
23
-
>
24
-
{{ i "ban" "w-4 h-4" }}
25
-
<span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>
26
-
</a>
27
-
<form class="flex gap-4" method="GET">
11
+
<div class="flex justify-between items-stretch gap-4">
12
+
<form class="flex flex-1 relative" method="GET">
28
13
<input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
29
-
<input class="" type="text" name="q" value="{{ .FilterQuery }}">
30
-
<button class="btn" type="submit">
31
-
search
32
-
</button>
33
-
</form>
34
-
</div>
35
-
<a
36
-
href="/{{ .RepoInfo.FullName }}/issues/new"
37
-
class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
38
-
>
39
-
{{ i "circle-plus" "w-4 h-4" }}
40
-
<span>new</span>
41
-
</a>
42
-
</div>
43
-
<div class="error" id="issues"></div>
14
+
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
15
+
{{ i "search" "w-4 h-4" }}
16
+
</div>
17
+
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
18
+
<a
19
+
href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
20
+
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"
21
+
>
22
+
{{ i "x" "w-4 h-4" }}
23
+
</a>
24
+
</form>
25
+
<a
26
+
href="/{{ .RepoInfo.FullName }}/issues/new"
27
+
class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
28
+
>
29
+
{{ i "circle-plus" "w-4 h-4" }}
30
+
<span>new</span>
31
+
</a>
32
+
</div>
33
+
<div class="mt-2 ml-2 flex gap-4 text-xs">
34
+
<a
35
+
href="?state=open"
36
+
class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
37
+
>
38
+
{{ i "circle-dot" "w-4 h-4" }}
39
+
<span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>
40
+
</a>
41
+
<a
42
+
href="?state=closed"
43
+
class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
44
+
>
45
+
{{ i "ban" "w-4 h-4" }}
46
+
<span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>
47
+
</a>
48
+
</div>
49
+
<div class="error" id="issues"></div>
44
50
{{ end }}
45
51
46
52
{{ define "repoAfter" }}
+40
-34
appview/pages/templates/repo/pulls/pulls.html
+40
-34
appview/pages/templates/repo/pulls/pulls.html
···
8
8
{{ end }}
9
9
10
10
{{ define "repoContent" }}
11
-
<div class="flex justify-between items-center">
12
-
<div class="flex gap-4">
13
-
<a
14
-
href="?state=open"
15
-
class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
16
-
>
17
-
{{ i "git-pull-request" "w-4 h-4" }}
18
-
<span>{{ .RepoInfo.Stats.PullCount.Open }} open</span>
19
-
</a>
20
-
<a
21
-
href="?state=merged"
22
-
class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
23
-
>
24
-
{{ i "git-merge" "w-4 h-4" }}
25
-
<span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span>
26
-
</a>
27
-
<a
28
-
href="?state=closed"
29
-
class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
30
-
>
31
-
{{ i "ban" "w-4 h-4" }}
32
-
<span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>
33
-
</a>
34
-
<form class="flex gap-4" method="GET">
35
-
<input type="hidden" name="state" value="{{ .FilteringBy.String }}">
36
-
<input class="" type="text" name="q" value="{{ .FilterQuery }}">
37
-
<button class="btn" type="submit">
38
-
search
39
-
</button>
40
-
</form>
11
+
<div class="flex justify-between items-stretch gap-4">
12
+
<form class="flex flex-1 relative" method="GET">
13
+
<input type="hidden" name="state" value="{{ .FilteringBy.String }}">
14
+
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
15
+
{{ i "search" "w-4 h-4" }}
41
16
</div>
17
+
<input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
18
+
<a
19
+
href="?state={{ .FilteringBy.String }}"
20
+
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"
21
+
>
22
+
{{ i "x" "w-4 h-4" }}
23
+
</a>
24
+
</form>
25
+
<a
26
+
href="/{{ .RepoInfo.FullName }}/pulls/new"
27
+
class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
28
+
>
29
+
{{ i "git-pull-request-create" "w-4 h-4" }}
30
+
<span>new</span>
31
+
</a>
32
+
</div>
33
+
<div class="mt-2 ml-2 flex gap-4 text-xs">
42
34
<a
43
-
href="/{{ .RepoInfo.FullName }}/pulls/new"
44
-
class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
35
+
href="?state=open"
36
+
class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
37
+
>
38
+
{{ i "git-pull-request" "w-4 h-4" }}
39
+
<span>{{ .RepoInfo.Stats.PullCount.Open }} open</span>
40
+
</a>
41
+
<a
42
+
href="?state=merged"
43
+
class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
45
44
>
46
-
{{ i "git-pull-request-create" "w-4 h-4" }}
47
-
<span>new</span>
45
+
{{ i "git-merge" "w-4 h-4" }}
46
+
<span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span>
47
+
</a>
48
+
<a
49
+
href="?state=closed"
50
+
class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
51
+
>
52
+
{{ i "ban" "w-4 h-4" }}
53
+
<span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>
48
54
</a>
49
55
</div>
50
56
<div class="error" id="pulls"></div>