tenseleyflow/shithub / 6218607

Browse files

Reshape new repo form

Authored by espadonne
SHA
62186070fef84a6a6f22e17322ef11fdb5db3f80
Parents
935ff95
Tree
73ad052

3 changed files

StatusFile+-
M internal/web/handlers/repo/repo.go 1 1
M internal/web/static/css/shithub.css 161 43
M internal/web/templates/repo/new.html 94 72
internal/web/handlers/repo/repo.gomodified
@@ -333,7 +333,7 @@ func (h *Handlers) ownerOptions(r *http.Request) []ownerOption {
333333
 			Kind:    "org",
334334
 			ID:      m.OrgID,
335335
 			Slug:    string(m.Slug),
336
-			Display: display + " (" + string(m.Slug) + ")",
336
+			Display: display,
337337
 			Token:   "org:" + strconv.FormatInt(m.OrgID, 10),
338338
 		})
339339
 	}
internal/web/static/css/shithub.cssmodified
@@ -1049,66 +1049,189 @@ code {
10491049
10501050
 /* ----- repo create + empty home (S11) ----- */
10511051
 .shithub-repo-new {
1052
-  max-width: 56rem;
1053
-  margin: 2rem auto;
1052
+  max-width: 48rem;
1053
+  margin: 2rem auto 5rem;
10541054
   padding: 0 1rem;
10551055
 }
1056
+.shithub-repo-new-head {
1057
+  margin: 0 0 1.25rem 3rem;
1058
+}
10561059
 .shithub-repo-new h1 {
1057
-  margin: 0 0 0.5rem;
1060
+  margin: 0;
10581061
   font-size: 1.5rem;
1059
-  font-weight: 400;
1062
+  line-height: 1.25;
1063
+  font-weight: 600;
10601064
 }
1061
-.shithub-repo-new-lede {
1062
-  margin: 0 0 1.5rem;
1065
+.shithub-repo-new-head p {
1066
+  margin: 0.25rem 0 0;
10631067
   color: var(--fg-muted);
1064
-  padding-bottom: 1rem;
1065
-  border-bottom: 1px solid var(--border-default);
1068
+  font-size: 0.875rem;
1069
+}
1070
+.shithub-repo-new-required {
1071
+  font-style: italic;
10661072
 }
10671073
 .shithub-repo-new-form {
10681074
   display: grid;
1069
-  gap: 1.25rem;
1070
-  max-width: 36rem;
1075
+  gap: 1.5rem;
1076
+}
1077
+.shithub-repo-new-step {
1078
+  display: grid;
1079
+  grid-template-columns: 2rem minmax(0, 1fr);
1080
+  gap: 1rem;
1081
+  position: relative;
1082
+}
1083
+.shithub-repo-new-step::before {
1084
+  content: "";
1085
+  position: absolute;
1086
+  left: 1rem;
1087
+  top: 2rem;
1088
+  bottom: -1.5rem;
1089
+  width: 1px;
1090
+  background: var(--border-muted);
1091
+}
1092
+.shithub-repo-new-step:last-of-type::before {
1093
+  display: none;
1094
+}
1095
+.shithub-repo-new-step-marker {
1096
+  position: relative;
1097
+  z-index: 1;
1098
+  display: inline-flex;
1099
+  align-items: center;
1100
+  justify-content: center;
1101
+  width: 1.5rem;
1102
+  height: 1.5rem;
1103
+  margin: 0.1rem auto 0;
1104
+  border-radius: 50%;
1105
+  background: var(--canvas-subtle);
1106
+  border: 1px solid var(--border-muted);
1107
+  color: var(--fg-muted);
1108
+  font-size: 0.75rem;
1109
+  font-weight: 600;
1110
+}
1111
+.shithub-repo-new-step-body {
1112
+  min-width: 0;
1113
+}
1114
+.shithub-repo-new-step-body h2 {
1115
+  margin: 0 0 0.75rem;
1116
+  font-size: 1rem;
1117
+  line-height: 1.5;
1118
+  font-weight: 600;
1119
+}
1120
+.shithub-repo-new-form label {
1121
+  font-size: 0.875rem;
1122
+  font-weight: 600;
10711123
 }
1072
-.shithub-repo-new-form label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
10731124
 .shithub-repo-new-form input[type=text],
1074
-.shithub-repo-new-form select {
1125
+.shithub-repo-new-form select,
1126
+.shithub-repo-new-form textarea {
10751127
   font: inherit;
1076
-  padding: 0.5rem 0.75rem;
1077
-  border: 1px solid var(--border-default);
1128
+  width: 100%;
1129
+  min-height: 2rem;
1130
+  padding: 0.35rem 0.5rem;
10781131
   border-radius: 6px;
1079
-  background: var(--canvas-subtle);
10801132
 }
10811133
 .shithub-repo-new-form em { color: #cf222e; font-style: normal; }
1082
-.shithub-repo-new-form small { font-weight: 400; color: var(--fg-muted); font-size: 0.8rem; }
1083
-
1084
-.shithub-repo-new-visibility, .shithub-repo-new-init {
1085
-  border: none;
1086
-  padding: 0;
1087
-  margin: 0;
1134
+.shithub-repo-new-form small {
1135
+  display: block;
1136
+  font-weight: 400;
1137
+  color: var(--fg-muted);
1138
+  font-size: 0.75rem;
1139
+}
1140
+.shithub-repo-new-owner-row {
10881141
   display: grid;
1142
+  grid-template-columns: minmax(9rem, 11rem) max-content minmax(12rem, 1fr);
10891143
   gap: 0.5rem;
1144
+  align-items: end;
10901145
 }
1091
-.shithub-repo-new-visibility legend, .shithub-repo-new-init legend {
1092
-  padding: 0;
1093
-  font-size: 0.85rem;
1094
-  font-weight: 600;
1095
-  margin-bottom: 0.5rem;
1096
-}
1097
-.shithub-repo-new-vis-card,
1098
-.shithub-repo-new-init-row {
1146
+.shithub-repo-new-owner,
1147
+.shithub-repo-new-name,
1148
+.shithub-repo-new-description {
10991149
   display: grid;
1100
-  grid-template-columns: max-content 1fr;
1101
-  gap: 0.75rem;
1102
-  padding: 0.75rem 1rem;
1150
+  gap: 0.25rem;
1151
+}
1152
+.shithub-repo-new-sep {
1153
+  padding-bottom: 0.25rem;
1154
+  color: var(--fg-muted);
1155
+  font-size: 1.25rem;
1156
+}
1157
+.shithub-repo-new-hint {
1158
+  margin: 0.5rem 0 1rem;
1159
+  color: var(--fg-muted);
1160
+  font-size: 0.875rem;
1161
+}
1162
+.shithub-repo-new-hint strong {
1163
+  color: var(--success-fg);
1164
+}
1165
+.shithub-repo-new-config {
11031166
   border: 1px solid var(--border-default);
11041167
   border-radius: 6px;
1105
-  background: var(--canvas-subtle);
1168
+  overflow: hidden;
1169
+  background: var(--canvas-default);
1170
+}
1171
+.shithub-repo-new-config-row {
1172
+  margin: 0;
1173
+  display: grid;
1174
+  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, max-content);
1175
+  gap: 1rem;
1176
+  align-items: center;
1177
+  padding: 0.75rem;
1178
+  border-top: 1px solid var(--border-muted);
1179
+}
1180
+.shithub-repo-new-config-row:first-child {
1181
+  border-top: 0;
1182
+}
1183
+.shithub-repo-new-config-row strong {
1184
+  display: block;
1185
+  font-size: 0.875rem;
1186
+}
1187
+.shithub-repo-new-config-row select {
1188
+  max-width: 11rem;
1189
+}
1190
+.shithub-repo-new-toggle {
1191
+  display: inline-flex;
1192
+  justify-self: end;
1193
+  align-items: center;
1194
+  gap: 0.4rem;
1195
+  color: var(--fg-muted);
1196
+  font-size: 0.75rem;
1197
+  font-weight: 600;
1198
+}
1199
+.shithub-repo-new-toggle input {
1200
+  width: 1.9rem;
1201
+  height: 1rem;
1202
+  margin: 0;
1203
+  accent-color: var(--success-emphasis);
1204
+}
1205
+.shithub-repo-new-form > .shithub-button-primary {
1206
+  justify-self: end;
1207
+  margin-right: 0;
1208
+}
1209
+@media (max-width: 640px) {
1210
+  .shithub-repo-new-head {
1211
+    margin-left: 0;
1212
+  }
1213
+  .shithub-repo-new-step {
1214
+    grid-template-columns: minmax(0, 1fr);
1215
+  }
1216
+  .shithub-repo-new-step::before,
1217
+  .shithub-repo-new-step-marker,
1218
+  .shithub-repo-new-sep {
1219
+    display: none;
1220
+  }
1221
+  .shithub-repo-new-owner-row,
1222
+  .shithub-repo-new-config-row {
1223
+    grid-template-columns: minmax(0, 1fr);
1224
+  }
1225
+  .shithub-repo-new-config-row select {
1226
+    max-width: none;
1227
+  }
1228
+  .shithub-repo-new-toggle {
1229
+    justify-self: start;
1230
+  }
1231
+  .shithub-repo-new-form > .shithub-button-primary {
1232
+    justify-self: stretch;
1233
+  }
11061234
 }
1107
-.shithub-repo-new-vis-card.active { border-color: var(--accent-emphasis); }
1108
-.shithub-repo-new-vis-card strong,
1109
-.shithub-repo-new-init-row strong { display: block; font-size: 0.95rem; }
1110
-.shithub-repo-new-vis-card small,
1111
-.shithub-repo-new-init-row small { display: block; color: var(--fg-muted); font-size: 0.85rem; }
11121235
11131236
 .shithub-repo-empty {
11141237
   max-width: 56rem;
@@ -2098,11 +2221,6 @@ button.shithub-repo-action {
20982221
 .shithub-repo-subnav-tab:hover { background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
20992222
 .shithub-repo-subnav-tab.is-active { border-bottom-color: var(--accent-emphasis, #fd8c73); font-weight: 600; }
21002223
2101
-/* New-repo owner picker (S30) */
2102
-.shithub-repo-new-owner-row { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
2103
-.shithub-repo-new-owner select { padding: 0.4rem 0.5rem; }
2104
-.shithub-repo-new-sep { font-size: 1.5rem; color: var(--fg-muted); padding-bottom: 0.4rem; }
2105
-
21062224
 .shithub-repo-content-grid {
21072225
   display: grid;
21082226
   grid-template-columns: minmax(0, 1fr) 296px;
internal/web/templates/repo/new.htmlmodified
@@ -1,85 +1,107 @@
11
 {{ define "page" -}}
22
 <section class="shithub-repo-new">
3
-  <h1>Create a new repository</h1>
4
-  <p class="shithub-repo-new-lede">A repository contains all project files, including the revision history.</p>
3
+  <header class="shithub-repo-new-head">
4
+    <h1>Create a new repository</h1>
5
+    <p>Repositories contain a project's files and version history.</p>
6
+    <p class="shithub-repo-new-required">Required fields are marked with an asterisk (*).</p>
7
+  </header>
58
69
   {{ with .Error }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }}
710
811
   <form method="POST" action="/new" novalidate class="shithub-repo-new-form">
912
     <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
1013
11
-    <div class="shithub-repo-new-row shithub-repo-new-owner-row">
12
-      <label class="shithub-repo-new-owner">
13
-        <span>Owner <em>*</em></span>
14
-        <select name="owner" required>
15
-          {{ range .Owners }}
16
-          <option value="{{ .Token }}"{{ if eq .Token $.Form.Owner }} selected{{ end }}>{{ .Display }}</option>
17
-          {{ end }}
18
-        </select>
19
-      </label>
20
-      <span class="shithub-repo-new-sep">/</span>
21
-      <label class="shithub-repo-new-name">
22
-        <span>Repository name <em>*</em></span>
23
-        <input type="text" name="name" required maxlength="100" autocomplete="off"
24
-               spellcheck="false" pattern="^[a-z0-9](?:[a-z0-9._-]{0,98}[a-z0-9_])?$"
25
-               value="{{ .Form.Name }}">
26
-        <small>Lowercase letters, digits, dots, hyphens, underscores. 1–100 characters.</small>
27
-      </label>
14
+    <div class="shithub-repo-new-step">
15
+      <div class="shithub-repo-new-step-marker" aria-hidden="true">1</div>
16
+      <section class="shithub-repo-new-step-body" aria-labelledby="repo-new-general">
17
+        <h2 id="repo-new-general">General</h2>
18
+        <div class="shithub-repo-new-owner-row">
19
+          <label class="shithub-repo-new-owner">
20
+            <span>Owner <em>*</em></span>
21
+            <select name="owner" required>
22
+              {{ range .Owners }}
23
+              <option value="{{ .Token }}"{{ if eq .Token $.Form.Owner }} selected{{ end }}>{{ .Display }}</option>
24
+              {{ end }}
25
+            </select>
26
+          </label>
27
+          <span class="shithub-repo-new-sep">/</span>
28
+          <label class="shithub-repo-new-name">
29
+            <span>Repository name <em>*</em></span>
30
+            <input type="text" name="name" required maxlength="100" autocomplete="off"
31
+                   spellcheck="false" pattern="^[a-z0-9](?:[a-z0-9._-]{0,98}[a-z0-9_])?$"
32
+                   value="{{ .Form.Name }}">
33
+          </label>
34
+        </div>
35
+        <p class="shithub-repo-new-hint">Great repository names are short and memorable. How about <strong>effective-enigma</strong>?</p>
36
+        <label class="shithub-repo-new-description">
37
+          <span>Description</span>
38
+          <input type="text" name="description" maxlength="350" value="{{ .Form.Description }}">
39
+          <small>{{ len .Form.Description }} / 350 characters</small>
40
+        </label>
41
+      </section>
2842
     </div>
2943
30
-    <label>
31
-      <span>Description <small>(optional)</small></span>
32
-      <input type="text" name="description" maxlength="350" value="{{ .Form.Description }}">
33
-    </label>
34
-
35
-    <fieldset class="shithub-repo-new-visibility">
36
-      <legend>Visibility</legend>
37
-      <label class="shithub-repo-new-vis-card{{ if eq .Form.Visibility "public" }} active{{ end }}">
38
-        <input type="radio" name="visibility" value="public"{{ if eq .Form.Visibility "public" }} checked{{ end }}>
39
-        <span>
40
-          <strong>Public</strong>
41
-          <small>Anyone on the internet can see this repository. You choose who can commit.</small>
42
-        </span>
43
-      </label>
44
-      <label class="shithub-repo-new-vis-card{{ if eq .Form.Visibility "private" }} active{{ end }}">
45
-        <input type="radio" name="visibility" value="private"{{ if eq .Form.Visibility "private" }} checked{{ end }}>
46
-        <span>
47
-          <strong>Private</strong>
48
-          <small>You choose who can see and commit to this repository.</small>
49
-        </span>
50
-      </label>
51
-    </fieldset>
52
-
53
-    <fieldset class="shithub-repo-new-init">
54
-      <legend>Initialize this repository with</legend>
55
-      <label class="shithub-repo-new-init-row">
56
-        <input type="checkbox" name="init_readme" value="on"{{ if .Form.InitReadme }} checked{{ end }}>
57
-        <span>
58
-          <strong>Add a README file</strong>
59
-          <small>This is where you can write a long description for your project.</small>
60
-        </span>
61
-      </label>
62
-      <label>
63
-        <span>Add .gitignore</span>
64
-        <select name="gitignore">
65
-          <option value="">None</option>
66
-          {{ $picked := .Form.Gitignore }}
67
-          {{ range .Gitignores }}
68
-          <option value="{{ . }}"{{ if eq . $picked }} selected{{ end }}>{{ . }}</option>
69
-          {{ end }}
70
-        </select>
71
-      </label>
72
-      <label>
73
-        <span>Choose a license</span>
74
-        <select name="license">
75
-          <option value="">None</option>
76
-          {{ $picked := .Form.License }}
77
-          {{ range .Licenses }}
78
-          <option value="{{ . }}"{{ if eq . $picked }} selected{{ end }}>{{ . }}</option>
79
-          {{ end }}
80
-        </select>
81
-      </label>
82
-    </fieldset>
44
+    <div class="shithub-repo-new-step">
45
+      <div class="shithub-repo-new-step-marker" aria-hidden="true">2</div>
46
+      <section class="shithub-repo-new-step-body" aria-labelledby="repo-new-config">
47
+        <h2 id="repo-new-config">Configuration</h2>
48
+        <div class="shithub-repo-new-config">
49
+          <label class="shithub-repo-new-config-row">
50
+            <span>
51
+              <strong>Choose visibility <em>*</em></strong>
52
+              <small>Choose who can see and commit to this repository</small>
53
+            </span>
54
+            <select name="visibility" required>
55
+              <option value="public"{{ if eq .Form.Visibility "public" }} selected{{ end }}>Public</option>
56
+              <option value="private"{{ if eq .Form.Visibility "private" }} selected{{ end }}>Private</option>
57
+            </select>
58
+          </label>
59
+          <div class="shithub-repo-new-config-row" aria-disabled="true">
60
+            <span>
61
+              <strong>Start with a template</strong>
62
+              <small>Templates pre-configure your repository with files.</small>
63
+            </span>
64
+            <button type="button" class="shithub-button shithub-button-small" disabled>No template</button>
65
+          </div>
66
+          <label class="shithub-repo-new-config-row">
67
+            <span>
68
+              <strong>Add README</strong>
69
+              <small>READMEs can be used as longer descriptions.</small>
70
+            </span>
71
+            <span class="shithub-repo-new-toggle">
72
+              <span>Off</span>
73
+              <input type="checkbox" name="init_readme" value="on"{{ if .Form.InitReadme }} checked{{ end }} aria-label="Add README">
74
+            </span>
75
+          </label>
76
+          <label class="shithub-repo-new-config-row">
77
+            <span>
78
+              <strong>Add .gitignore</strong>
79
+              <small>.gitignore tells git which files not to track.</small>
80
+            </span>
81
+            <select name="gitignore">
82
+              <option value="">No .gitignore</option>
83
+              {{ $picked := .Form.Gitignore }}
84
+              {{ range .Gitignores }}
85
+              <option value="{{ . }}"{{ if eq . $picked }} selected{{ end }}>{{ . }}</option>
86
+              {{ end }}
87
+            </select>
88
+          </label>
89
+          <label class="shithub-repo-new-config-row">
90
+            <span>
91
+              <strong>Add license</strong>
92
+              <small>Licenses explain how others can use your code.</small>
93
+            </span>
94
+            <select name="license">
95
+              <option value="">No license</option>
96
+              {{ $picked := .Form.License }}
97
+              {{ range .Licenses }}
98
+              <option value="{{ . }}"{{ if eq . $picked }} selected{{ end }}>{{ . }}</option>
99
+              {{ end }}
100
+            </select>
101
+          </label>
102
+        </div>
103
+      </section>
104
+    </div>
83105
84106
     <button type="submit" class="shithub-button shithub-button-primary">Create repository</button>
85107
   </form>