Monorepo for Tangled
appview/pages: nicer pagination styles
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Apr 8, 2026, 7:51 AM +0100)
d71ff6dd
1b29c32f
+11
-25
+11
-25
appview/pages/templates/fragments/pagination.html
+11
-25
appview/pages/templates/fragments/pagination.html
···
9
9
{{ $next := $page.Next.Offset }}
10
10
{{ $lastPage := sub $totalCount (mod $totalCount $page.Limit) }}
11
11
12
-
<div class="flex justify-center items-center mt-4 gap-2">
12
+
<div class="flex justify-center items-center mt-4 gap-5">
13
13
<a
14
14
class="
15
-
btn flex items-center gap-2 no-underline hover:no-underline
16
-
dark:text-white dark:hover:bg-gray-700
15
+
flex items-center gap-1 no-underline hover:no-underline dark:text-white text-sm
17
16
{{ if le $page.Offset 0 }}
18
17
cursor-not-allowed opacity-50
19
18
{{ end }}
···
24
23
{{ end }}
25
24
>
26
25
{{ i "chevron-left" "w-4 h-4" }}
27
-
previous
26
+
prev
28
27
</a>
29
28
30
29
{{ if gt $page.Offset 0 }}
31
-
<a
32
-
hx-boost="true"
33
-
href="{{ $basePath }}?{{ $queryParams }}&offset=0&limit={{ $page.Limit }}"
34
-
>
30
+
<a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset=0&limit={{ $page.Limit }}">
35
31
1
36
32
</a>
37
33
{{ end }}
38
34
39
35
{{ if gt $prev $page.Limit }}
40
-
<span>...</span>
36
+
<span class="text-gray-400 dark:text-gray-500">—</span>
41
37
{{ end }}
42
38
43
39
{{ if gt $prev 0 }}
44
-
<a
45
-
hx-boost="true"
46
-
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}"
47
-
>
40
+
<a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}">
48
41
{{ add (div $prev $page.Limit) 1 }}
49
42
</a>
50
43
{{ end }}
51
44
52
-
<span class="font-bold">
45
+
<span class="px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm">
53
46
{{ add (div $page.Offset $page.Limit) 1 }}
54
47
</span>
55
48
56
49
{{ if lt $next $lastPage }}
57
-
<a
58
-
hx-boost="true"
59
-
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}"
60
-
>
50
+
<a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}">
61
51
{{ add (div $next $page.Limit) 1 }}
62
52
</a>
63
53
{{ end }}
64
54
65
55
{{ if lt $next (sub $totalCount (mul 2 $page.Limit)) }}
66
-
<span>...</span>
56
+
<span class="text-gray-400 dark:text-gray-500">—</span>
67
57
{{ end }}
68
58
69
59
{{ if lt $page.Offset $lastPage }}
70
-
<a
71
-
hx-boost="true"
72
-
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $lastPage }}&limit={{ $page.Limit }}"
73
-
>
60
+
<a hx-boost="true" href="{{ $basePath }}?{{ $queryParams }}&offset={{ $lastPage }}&limit={{ $page.Limit }}">
74
61
{{ add (div $lastPage $page.Limit) 1 }}
75
62
</a>
76
63
{{ end }}
77
64
78
65
<a
79
66
class="
80
-
btn flex items-center gap-2 no-underline hover:no-underline
81
-
dark:text-white dark:hover:bg-gray-700
67
+
flex items-center gap-1 no-underline hover:no-underline dark:text-white text-sm
82
68
{{ if lt $next $totalCount | not }}
83
69
cursor-not-allowed opacity-50
84
70
{{ end }}