willdot.net
appview/pages: improve repo/new styles on mobile
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+156
-140
appview/pages/templates/repo/new.html
+156
-140
appview/pages/templates/repo/new.html
···
1
1
{{ define "title" }}new repo{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<div class="px-6 py-2 mb-4">
5
-
<h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
6
-
<p class="text-gray-600 dark:text-gray-400 mb-1">
7
-
Repositories contain a project's files and version history.
8
-
</p>
4
+
<div class="grid grid-cols-12">
5
+
<div class="col-span-full md:col-start-3 md:col-span-8 px-6 py-2 mb-4">
6
+
<h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
7
+
<p class="text-gray-600 dark:text-gray-400 mb-1">
8
+
Repositories contain a project's files and version history. All
9
+
repositories are publicly accessible.
10
+
</p>
11
+
</div>
12
+
{{ template "newRepoPanel" . }}
9
13
</div>
14
+
{{ end }}
10
15
11
-
<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
16
+
{{ define "newRepoPanel" }}
17
+
<div class="col-span-full md:col-start-3 md:col-span-8 bg-white dark:bg-gray-800 drop-shadow-sm rounded p-6 md:px-10">
18
+
{{ template "newRepoForm" . }}
19
+
</div>
20
+
{{ end }}
21
+
22
+
{{ define "newRepoForm" }}
12
23
<form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
24
+
{{ template "step-1" . }}
25
+
{{ template "step-2" . }}
13
26
14
-
<div class="p-6">
15
-
<!-- Step 1: General -->
16
-
<div class="flex gap-4">
17
-
<div class="flex flex-col items-center w-10 flex-shrink-0">
18
-
<div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
19
-
1
20
-
</div>
21
-
<div class="w-px bg-gray-300 dark:bg-gray-600 h-80 mt-1"></div>
22
-
</div>
23
-
<div class="flex-1">
24
-
<div class="mb-6">
25
-
<div class="text-lg font-semibold dark:text-white mb-1">General</div>
26
-
<div class="text-sm text-gray-500 dark:text-gray-400">Basic repository information.</div>
27
-
</div>
27
+
<div class="mt-8 flex justify-end">
28
+
<button type="submit" class="btn-create flex items-center gap-2">
29
+
{{ i "book-plus" "w-4 h-4" }}
30
+
create repo
31
+
<span id="spinner" class="group">
32
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
33
+
</span>
34
+
</button>
35
+
</div>
36
+
<div id="repo" class="error mt-2"></div>
28
37
29
-
<div class="space-y-2">
30
-
<!-- Repository Name with Owner -->
31
-
<div>
32
-
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
33
-
Repository name
34
-
</label>
35
-
<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
36
-
{{ if .LoggedInUser.Handle }}
37
-
<div class="flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
38
-
{{ template "user/fragments/picHandle" .LoggedInUser.Handle }}
39
-
<span class="md:hidden pr-2 py-2 text-gray-500 dark:text-gray-400">/</span>
40
-
</div>
41
-
<span class="hidden md:inline pr-2 py-2 text-gray-500 dark:text-gray-400 border-t border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">/</span>
42
-
{{ end }}
43
-
<input
44
-
type="text"
45
-
id="name"
46
-
name="name"
47
-
required
48
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
49
-
placeholder="repository-name"
50
-
/>
51
-
</div>
52
-
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
53
-
Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
54
-
</p>
55
-
</div>
38
+
</form>
39
+
{{ end }}
40
+
41
+
{{ define "step-1" }}
42
+
<div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
43
+
<div class="absolute -left-3 -top-0">
44
+
{{ template "numberCircle" 1 }}
45
+
</div>
46
+
47
+
<!-- Content column -->
48
+
<div class="flex-1 pb-12">
49
+
<h2 class="text-lg font-semibold dark:text-white">General</h2>
50
+
<div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Basic repository information.</div>
56
51
57
-
<!-- Description -->
58
-
<div>
59
-
<label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
60
-
Description
61
-
</label>
62
-
<input
63
-
type="text"
64
-
id="description"
65
-
name="description"
66
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
67
-
placeholder="A brief description of your project..."
68
-
/>
69
-
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
70
-
Optional. A short description to help others understand what your project does.
71
-
</p>
72
-
</div>
73
-
</div>
74
-
</div>
52
+
<div class="space-y-2">
53
+
{{ template "name" . }}
54
+
{{ template "description" . }}
75
55
</div>
56
+
</div>
57
+
</div>
58
+
{{ end }}
76
59
77
-
<!-- Step 2: Configuration -->
78
-
<div class="flex gap-4">
79
-
<div class="flex flex-col items-center w-10 flex-shrink-0">
80
-
<div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
81
-
2
82
-
</div>
83
-
</div>
84
-
<div class="flex-1">
85
-
<div class="mb-6">
86
-
<div class="text-lg font-semibold dark:text-white mb-1">Configuration</div>
87
-
<div class="text-sm text-gray-500 dark:text-gray-400">Repository settings and hosting.</div>
88
-
</div>
60
+
{{ define "step-2" }}
61
+
<div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6">
62
+
<div class="absolute -left-3 -top-0">
63
+
{{ template "numberCircle" 2 }}
64
+
</div>
89
65
90
-
<div class="space-y-2">
91
-
<!-- Default Branch -->
92
-
<div>
93
-
<label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
94
-
Default branch
95
-
</label>
96
-
<input
97
-
type="text"
98
-
id="branch"
99
-
name="branch"
100
-
value="main"
101
-
required
102
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
103
-
/>
104
-
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
105
-
The primary branch where development happens. Common choices are "main" or "master".
106
-
</p>
107
-
</div>
66
+
<div class="flex-1">
67
+
<h2 class="text-lg font-semibold dark:text-white">Configuration</h2>
68
+
<div class="text-sm text-gray-500 dark:text-gray-400 mb-4">Repository settings and hosting.</div>
108
69
109
-
<!-- Knot Selection -->
110
-
<div>
111
-
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
112
-
Select a knot
113
-
</label>
114
-
<div class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
115
-
{{ range .Knots }}
116
-
<div class="flex items-center">
117
-
<input
118
-
type="radio"
119
-
name="domain"
120
-
value="{{ . }}"
121
-
class="mr-2"
122
-
id="domain-{{ . }}"
123
-
required
124
-
/>
125
-
<label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
126
-
</div>
127
-
{{ else }}
128
-
<p class="dark:text-white">no knots available.</p>
129
-
{{ end }}
130
-
</div>
131
-
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
132
-
A knot hosts repository data and handles Git operations.
133
-
You can also <a href="/knots" class="underline">register your own knot</a>.
134
-
</p>
135
-
</div>
136
-
</div>
137
-
</div>
70
+
<div class="space-y-2">
71
+
{{ template "defaultBranch" . }}
72
+
{{ template "knot" . }}
138
73
</div>
139
74
</div>
75
+
</div>
76
+
{{ end }}
140
77
141
-
<!-- Create Repository Button -->
142
-
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
143
-
<div class="flex items-center justify-between">
144
-
<div class="text-sm text-gray-500 dark:text-gray-400">
145
-
All repositories are publicly accessible.
146
-
</div>
147
-
<button type="submit" class="btn-create flex items-center gap-2">
148
-
{{ i "book-plus" "w-4 h-4" }}
149
-
create repo
150
-
<span id="spinner" class="group">
151
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
152
-
</span>
153
-
</button>
78
+
{{ define "name" }}
79
+
<!-- Repository Name with Owner -->
80
+
<div>
81
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
82
+
Repository name
83
+
</label>
84
+
<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
85
+
<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
86
+
{{ template "user/fragments/picHandle" .LoggedInUser.Did }}
154
87
</div>
155
-
<div id="repo" class="error mt-2"></div>
88
+
<input
89
+
type="text"
90
+
id="name"
91
+
name="name"
92
+
required
93
+
class="flex-1 dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
94
+
placeholder="repository-name"
95
+
/>
156
96
</div>
97
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
98
+
Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
99
+
</p>
100
+
</div>
101
+
{{ end }}
157
102
158
-
</form>
159
-
</div>
103
+
{{ define "description" }}
104
+
<!-- Description -->
105
+
<div>
106
+
<label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
107
+
Description
108
+
</label>
109
+
<input
110
+
type="text"
111
+
id="description"
112
+
name="description"
113
+
class="w-full w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
114
+
placeholder="A brief description of your project..."
115
+
/>
116
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
117
+
Optional. A short description to help others understand what your project does.
118
+
</p>
119
+
</div>
120
+
{{ end }}
121
+
122
+
{{ define "defaultBranch" }}
123
+
<!-- Default Branch -->
124
+
<div>
125
+
<label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
126
+
Default branch
127
+
</label>
128
+
<input
129
+
type="text"
130
+
id="branch"
131
+
name="branch"
132
+
value="main"
133
+
required
134
+
class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
135
+
/>
136
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
137
+
The primary branch where development happens. Common choices are "main" or "master".
138
+
</p>
139
+
</div>
140
+
{{ end }}
141
+
142
+
{{ define "knot" }}
143
+
<!-- Knot Selection -->
144
+
<div>
145
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
146
+
Select a knot
147
+
</label>
148
+
<div class="w-full dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
149
+
{{ range .Knots }}
150
+
<div class="flex items-center">
151
+
<input
152
+
type="radio"
153
+
name="domain"
154
+
value="{{ . }}"
155
+
class="mr-2"
156
+
id="domain-{{ . }}"
157
+
required
158
+
/>
159
+
<label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
160
+
</div>
161
+
{{ else }}
162
+
<p class="dark:text-white">no knots available.</p>
163
+
{{ end }}
164
+
</div>
165
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
166
+
A knot hosts repository data and handles Git operations.
167
+
You can also <a href="/knots" class="underline">register your own knot</a>.
168
+
</p>
169
+
</div>
170
+
{{ end }}
171
+
172
+
{{ define "numberCircle" }}
173
+
<div class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium mt-1">
174
+
{{.}}
175
+
</div>
160
176
{{ end }}