Add a wrapper around checkbox and associated label

Adrian Simmons created 1 year ago

Signed-off-by: Adrian Simmons <[e-mail]>

Change summary

ws/static/new.html.tmpl            | 43 +++++++++++++++++++++++--------
ws/static/select-release.html.tmpl | 13 ++++++--
2 files changed, 40 insertions(+), 16 deletions(-)

Detailed changes

ws/static/new.html.tmpl

@@ -1,34 +1,53 @@
 {{- template "head" }}
 {{- template "header" }}
         <div class="wrapper">
-        <h2>Track a new project</h2>
         <form method="post" class="new-project">
+            <h2>New project</h2>
             <div class="input">
-                <label for="url">Project URL:</label>
+                <label for="url">Project URL</label>
                 <input type="text" id="url" name="url">
             </div>
             <div class="input">
-                <label for="name">Project name:</label>
+                <label for="name">Project name</label>
                 <input type="text" id="name" name="name">
             </div>
             <div class="input">
-                <h3>Forge type:</h3>
-                <p>RSS</p>
+                <h3>Forge type</h3>
+                <fieldset>
+                <legend>RSS</legend>
+                <div class="input-wrapper">
                 <input type="radio" id="github" name="forge" value="github">
-                <label for="github">Github</label><br>
+                <label for="github">Github</label>
+                </div>
+                <div class="input-wrapper">
                 <input type="radio" id="gitea" name="forge" value="gitea">
-                <label for="gitea">Gitea</label><br>
+                <label for="gitea">Gitea</label>
+                </div>
+                <div class="input-wrapper">
                 <input type="radio" id="forgejo" name="forge" value="forgejo">
-                <label for="forgejo">Forgejo</label><br>
-                <p>Raw git</p>
+                <label for="forgejo">Forgejo</label>
+                </div>
+                </fieldset>
+
+                <fieldset>
+                <legend>Raw git</legend>
+                <div class="input-wrapper">
                 <input type="radio" id="gitlab" name="forge" value="gitlab">
-                <label for="gitlab">GitLab</label><br>
+                <label for="gitlab">GitLab</label>
+                </div>
+                <div class="input-wrapper">
                 <input type="radio" id="sourcehut" name="forge" value="sourcehut">
-                <label for="sourcehut">Sourcehut</label><br>
+                <label for="sourcehut">Sourcehut</label>
+                </div>
+                <div class="input-wrapper">
                 <input type="radio" id="bitbucket" name="forge" value="bitbucket">
-                <label for="bitbucket">Bitbucket</label><br>
+                <label for="bitbucket">Bitbucket</label>
+                </div>
+                <div class="input-wrapper">
                 <input type="radio" id="other" name="forge" value="other">
                 <label for="other">Other</label>
+                </div>
+                </fieldset>
             </div>
             <input class="button" type="submit" formaction="/new" value="Next">
         </form>

ws/static/select-release.html.tmpl

@@ -9,16 +9,21 @@
                 {{- $forge := .Forge -}}
                 {{- $running := .Running -}}
                 {{- range .Releases -}}
+                <div class="input-wrapper">
                 <input type="radio" id="{{ .Tag }}" name="release" value="{{ .Tag }}" {{- if eq $running .Tag }} checked {{- end -}}>
                 {{- if ne .URL "" -}}
-                <label for="{{ .Tag }}"><a href="{{ .URL }}">{{ .Tag }}</a></label><br>
+                <label for="{{ .Tag }}"><a href="{{ .URL }}">{{ .Tag }}</a></label>
+                </div>
                 {{- else -}}
                 {{- if eq $forge "sourcehut" -}}
-                <label for="{{ .Tag }}"><a href="{{ $url }}/refs/{{ .Tag }}">{{ .Tag }}</a></label><br>
+                <label for="{{ .Tag }}"><a href="{{ $url }}/refs/{{ .Tag }}">{{ .Tag }}</a></label>
+                </div>
                 {{- else if eq $forge "gitlab" -}}
-                <label for="{{ .Tag }}"><a href="{{ $url }}/-releases/{{ .Tag }}">{{ .Tag }}</a></label><br>
+                <label for="{{ .Tag }}"><a href="{{ $url }}/-releases/{{ .Tag }}">{{ .Tag }}</a></label>
+                </div>
                 {{- else -}}
-                <label for="{{ .Tag }}">{{ .Tag }}</label><br>
+                <label for="{{ .Tag }}">{{ .Tag }}</label>
+                </div>
                 {{- end -}}
                 {{- end -}}
                 {{- end -}}