anirudh.fi
Signed-off-by: Anirudh Oppiliappan anirudh@tangled.sh
+7
-7
appview/pages/templates/layouts/topbar.html
+7
-7
appview/pages/templates/layouts/topbar.html
···
1
{{ define "layouts/topbar" }}
2
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
3
-
<div class="container flex justify-between p-0">
4
<div id="left-items">
5
<a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
6
tangled<sub>alpha</sub>
···
19
{{ i "code" "size-4" }} source
20
</a>
21
</div>
22
-
<div id="right-items" class="flex gap-2">
23
{{ with .LoggedInUser }}
24
-
<a href="/repo/new" hx-boost="true">
25
-
{{ i "plus" "w-6 h-6" }}
26
</a>
27
{{ block "dropDown" . }} {{ end }}
28
{{ else }}
···
47
<a href="/knots">knots</a>
48
<a href="/spindles">spindles</a>
49
<a href="/settings">settings</a>
50
-
<a href="#"
51
-
hx-post="/logout"
52
-
hx-swap="none"
53
class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
54
logout
55
</a>
···
1
{{ define "layouts/topbar" }}
2
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
3
+
<div class="container flex justify-between p-0 items-center">
4
<div id="left-items">
5
<a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
6
tangled<sub>alpha</sub>
···
19
{{ i "code" "size-4" }} source
20
</a>
21
</div>
22
+
<div id="right-items" class="flex items-center gap-4">
23
{{ with .LoggedInUser }}
24
+
<a href="/repo/new" hx-boost="true" class="btn-create hover:no-underline hover:text-white">
25
+
{{ i "plus" "w-4 h-4" }}
26
</a>
27
{{ block "dropDown" . }} {{ end }}
28
{{ else }}
···
47
<a href="/knots">knots</a>
48
<a href="/spindles">spindles</a>
49
<a href="/settings">settings</a>
50
+
<a href="#"
51
+
hx-post="/logout"
52
+
hx-swap="none"
53
class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
54
logout
55
</a>
+1
-1
appview/pages/templates/repo/issues/issues.html
+1
-1
appview/pages/templates/repo/issues/issues.html
+5
-4
appview/pages/templates/repo/issues/new.html
+5
-4
appview/pages/templates/repo/issues/new.html
···
23
></textarea>
24
</div>
25
<div>
26
+
<button type="submit" class="btn-create flex items-center gap-2">
27
+
{{ i "circle-plus" "w-4 h-4" }}
28
+
create issue
29
+
<span id="create-pull-spinner" class="group">
30
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
31
</span>
32
</button>
33
</div>
+8
-7
appview/pages/templates/repo/new.html
+8
-7
appview/pages/templates/repo/new.html
···
60
</fieldset>
61
62
<div class="space-y-2">
63
-
<button type="submit" class="btn flex items-center">
64
-
create repo
65
-
<span id="spinner" class="group">
66
-
{{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
67
-
</span>
68
-
</button>
69
-
<div id="repo" class="error"></div>
70
</div>
71
</form>
72
</div>
···
60
</fieldset>
61
62
<div class="space-y-2">
63
+
<button type="submit" class="btn-create flex items-center gap-2">
64
+
{{ i "book-plus" "w-4 h-4" }}
65
+
create repo
66
+
<span id="create-pull-spinner" class="group">
67
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
68
+
</span>
69
+
</button>
70
+
<div id="repo" class="error"></div>
71
</div>
72
</form>
73
</div>
+1
-1
appview/pages/templates/repo/pulls/new.html
+1
-1
appview/pages/templates/repo/pulls/new.html
+1
-1
appview/pages/templates/repo/pulls/pulls.html
+1
-1
appview/pages/templates/repo/pulls/pulls.html
+22
-19
input.css
+22
-19
input.css
···
74
75
@layer components {
76
.btn {
77
-
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
78
-
justify-center bg-transparent px-2 pb-[0.2rem] text-base
79
-
text-gray-900 before:absolute before:inset-0 before:-z-10
80
-
before:block before:rounded before:border before:border-gray-200
81
-
before:bg-white before:drop-shadow-sm
82
-
before:content-[''] hover:before:border-gray-300
83
-
hover:before:bg-gray-50
84
-
hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
85
-
focus:outline-none focus-visible:before:outline
86
-
focus-visible:before:outline-4 focus-visible:before:outline-gray-500
87
-
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
88
-
disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
89
-
disabled:hover:before:bg-white disabled:hover:before:shadow-none
90
-
dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
91
-
dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
92
-
dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
93
-
dark:focus-visible:before:outline-gray-400
94
-
dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
95
-
dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
96
}
97
98
.prose img {
···
74
75
@layer components {
76
.btn {
77
+
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
78
+
bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
79
+
before:absolute before:inset-0 before:-z-10 before:block before:rounded
80
+
before:border before:border-gray-200 before:bg-white
81
+
before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
82
+
before:content-[''] before:transition-all before:duration-150 before:ease-in-out
83
+
hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
84
+
hover:before:bg-gray-50
85
+
dark:hover:before:bg-gray-700
86
+
active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
87
+
focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
88
+
disabled:cursor-not-allowed disabled:opacity-50
89
+
dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
90
+
}
91
+
92
+
.btn-create {
93
+
@apply btn text-white
94
+
before:bg-green-600 hover:before:bg-green-700
95
+
dark:before:bg-green-700 dark:hover:before:bg-green-800
96
+
before:border before:border-green-700 hover:before:border-green-800
97
+
focus-visible:before:outline-green-500
98
+
disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
99
}
100
101
.prose img {