forked from
tangled.org/core
this repo has no description
appview/pages: new button for create actions
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>
authored by
Anirudh Oppiliappan
and committed by
Tangled
efdd850b
f97f292f
+45
-40
+7
-7
appview/pages/templates/layouts/topbar.html
+7
-7
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
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">
3
+
<div class="container flex justify-between p-0 items-center">
4
4
<div id="left-items">
5
5
<a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
6
6
tangled<sub>alpha</sub>
···
19
19
{{ i "code" "size-4" }} source
20
20
</a>
21
21
</div>
22
-
<div id="right-items" class="flex gap-2">
22
+
<div id="right-items" class="flex items-center gap-4">
23
23
{{ with .LoggedInUser }}
24
-
<a href="/repo/new" hx-boost="true">
25
-
{{ i "plus" "w-6 h-6" }}
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
26
</a>
27
27
{{ block "dropDown" . }} {{ end }}
28
28
{{ else }}
···
47
47
<a href="/knots">knots</a>
48
48
<a href="/spindles">spindles</a>
49
49
<a href="/settings">settings</a>
50
-
<a href="#"
51
-
hx-post="/logout"
52
-
hx-swap="none"
50
+
<a href="#"
51
+
hx-post="/logout"
52
+
hx-swap="none"
53
53
class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
54
54
logout
55
55
</a>
+1
-1
appview/pages/templates/repo/issues/issues.html
+1
-1
appview/pages/templates/repo/issues/issues.html
···
27
27
</div>
28
28
<a
29
29
href="/{{ .RepoInfo.FullName }}/issues/new"
30
-
class="btn text-sm flex items-center justify-center gap-2 no-underline hover:no-underline"
30
+
class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
31
31
>
32
32
{{ i "circle-plus" "w-4 h-4" }}
33
33
<span>new</span>
+5
-4
appview/pages/templates/repo/issues/new.html
+5
-4
appview/pages/templates/repo/issues/new.html
···
23
23
></textarea>
24
24
</div>
25
25
<div>
26
-
<button type="submit" class="btn flex items-center gap-2">
27
-
create
28
-
<span id="spinner" class="group">
29
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
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" }}
30
31
</span>
31
32
</button>
32
33
</div>
+8
-7
appview/pages/templates/repo/new.html
+8
-7
appview/pages/templates/repo/new.html
···
60
60
</fieldset>
61
61
62
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>
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>
70
71
</div>
71
72
</form>
72
73
</div>
+1
-1
appview/pages/templates/repo/pulls/new.html
+1
-1
appview/pages/templates/repo/pulls/new.html
···
141
141
</div>
142
142
143
143
<div class="flex justify-start items-center gap-2 mt-4">
144
-
<button type="submit" class="btn flex items-center gap-2">
144
+
<button type="submit" class="btn-create flex items-center gap-2">
145
145
{{ i "git-pull-request-create" "w-4 h-4" }}
146
146
create pull
147
147
<span id="create-pull-spinner" class="group">
+1
-1
appview/pages/templates/repo/pulls/pulls.html
+1
-1
appview/pages/templates/repo/pulls/pulls.html
···
34
34
</div>
35
35
<a
36
36
href="/{{ .RepoInfo.FullName }}/pulls/new"
37
-
class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"
37
+
class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
38
38
>
39
39
{{ i "git-pull-request-create" "w-4 h-4" }}
40
40
<span>new</span>
+22
-19
input.css
+22
-19
input.css
···
74
74
75
75
@layer components {
76
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;
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;
96
99
}
97
100
98
101
.prose img {