Skip to content

Commit 059efa7

Browse files
rafhrafh
authored and
silverwind
committed
move sign in labels to be above inputs (go-gitea#28753)
There are a few inconsistencies within Gitea and this PR addresses one of them. This PR updates the sign-in page layout, including the register and openID tabs, to match the layout of the settings pages (`/user/settings`) for more consistency. **Before** <img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM" src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d"> **After** <img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM" src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41"> --------- Co-authored-by: rafh <[email protected]>
1 parent 2bbd9ac commit 059efa7

File tree

5 files changed

+13
-21
lines changed

5 files changed

+13
-21
lines changed

‎templates/user/auth/signin_inner.tmpl‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,20 @@
99
{{end}}
1010
</h4>
1111
<div class="ui attached segment">
12-
<form class="ui form" action="{{.SignInLink}}" method="post">
12+
<form class="ui form gt-max-width-36rem gt-m-auto" action="{{.SignInLink}}" method="post">
1313
{{.CsrfTokenHtml}}
1414
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
1515
<label for="user_name">{{ctx.Locale.Tr "home.uname_holder"}}</label>
16-
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
16+
<input id="user_name" class="gt-w-full" type="text" name="user_name" value="{{.user_name}}" autofocus required>
1717
</div>
1818
{{if or (not .DisablePassword) .LinkAccountMode}}
1919
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
2020
<label for="password">{{ctx.Locale.Tr "password"}}</label>
21-
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
21+
<input id="password" class="gt-w-full" name="password" type="password" value="{{.password}}" autocomplete="current-password" required>
2222
</div>
2323
{{end}}
2424
{{if not .LinkAccountMode}}
2525
<div class="inline field">
26-
<label></label>
2726
<div class="ui checkbox">
2827
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
2928
<input name="remember" type="checkbox">
@@ -34,7 +33,6 @@
3433
{{template "user/auth/captcha" .}}
3534

3635
<div class="inline field">
37-
<label></label>
3836
<button class="ui primary button">
3937
{{if .LinkAccountMode}}
4038
{{ctx.Locale.Tr "auth.oauth_signin_submit"}}
@@ -47,7 +45,6 @@
4745

4846
{{if .ShowRegistrationButton}}
4947
<div class="inline field">
50-
<label></label>
5148
<a href="{{AppSubUrl}}/user/sign_up">{{ctx.Locale.Tr "auth.sign_up_now" | Str2html}}</a>
5249
</div>
5350
{{end}}
@@ -60,7 +57,7 @@
6057
<div class="gt-df gt-fc gt-jc">
6158
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
6259
{{range $provider := .OAuth2Providers}}
63-
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
60+
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 gt-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
6461
{{$provider.IconHTML 28}}
6562
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
6663
</a>

‎templates/user/auth/signin_openid.tmpl‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
OpenID
99
</h4>
1010
<div class="ui attached segment">
11-
<form class="ui form" action="{{.Link}}" method="post">
11+
<form class="ui form gt-m-auto" action="{{.Link}}" method="post">
1212
{{.CsrfTokenHtml}}
1313
<div class="inline field">
1414
{{ctx.Locale.Tr "auth.openid_signin_desc"}}
@@ -18,17 +18,15 @@
1818
{{svg "fontawesome-openid"}}
1919
OpenID URI
2020
</label>
21-
<input id="openid" name="openid" value="{{.openid}}" autofocus required>
21+
<input id="openid" class="gt-w-full" name="openid" value="{{.openid}}" autofocus required>
2222
</div>
2323
<div class="inline field">
24-
<label></label>
2524
<div class="ui checkbox">
2625
<label>{{ctx.Locale.Tr "auth.remember_me"}}</label>
2726
<input name="remember" type="checkbox">
2827
</div>
2928
</div>
3029
<div class="inline field">
31-
<label></label>
3230
<button class="ui primary button">{{ctx.Locale.Tr "sign_in"}}</button>
3331
</div>
3432
</form>

‎templates/user/auth/signup_inner.tmpl‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{end}}
88
</h4>
99
<div class="ui attached segment">
10-
<form class="ui form" action="{{.SignUpLink}}" method="post">
10+
<form class="ui form gt-max-width-36rem gt-m-auto" action="{{.SignUpLink}}" method="post">
1111
{{.CsrfTokenHtml}}
1212
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister)}}
1313
{{template "base/alert" .}}
@@ -17,28 +17,27 @@
1717
{{else}}
1818
<div class="required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
1919
<label for="user_name">{{ctx.Locale.Tr "username"}}</label>
20-
<input id="user_name" type="text" name="user_name" value="{{.user_name}}" autofocus required>
20+
<input id="user_name" class="gt-w-full" type="text" name="user_name" value="{{.user_name}}" autofocus required>
2121
</div>
2222
<div class="required inline field {{if .Err_Email}}error{{end}}">
2323
<label for="email">{{ctx.Locale.Tr "email"}}</label>
24-
<input id="email" name="email" type="email" value="{{.email}}" required>
24+
<input id="email" class="gt-w-full" name="email" type="email" value="{{.email}}" required>
2525
</div>
2626

2727
{{if not .DisablePassword}}
2828
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
2929
<label for="password">{{ctx.Locale.Tr "password"}}</label>
30-
<input id="password" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
30+
<input id="password" class="gt-w-full" name="password" type="password" value="{{.password}}" autocomplete="new-password" required>
3131
</div>
3232
<div class="required inline field {{if and (.Err_Password) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
3333
<label for="retype">{{ctx.Locale.Tr "re_type"}}</label>
34-
<input id="retype" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
34+
<input id="retype" class="gt-w-full" name="retype" type="password" value="{{.retype}}" autocomplete="new-password" required>
3535
</div>
3636
{{end}}
3737

3838
{{template "user/auth/captcha" .}}
3939

4040
<div class="inline field">
41-
<label></label>
4241
<button class="ui primary button">
4342
{{if .LinkAccountMode}}
4443
{{ctx.Locale.Tr "auth.oauth_signup_submit"}}
@@ -50,7 +49,6 @@
5049

5150
{{if not .LinkAccountMode}}
5251
<div class="inline field">
53-
<label></label>
5452
<a href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "auth.register_helper_msg"}}</a>
5553
</div>
5654
{{end}}
@@ -64,7 +62,7 @@
6462
<div class="gt-df gt-fc gt-jc">
6563
<div id="oauth2-login-navigator-inner" class="gt-df gt-fc gt-fw gt-ac gt-gap-3">
6664
{{range $provider := .OAuth2Providers}}
67-
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
65+
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 gt-w-full oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$provider.DisplayName}}">
6866
{{$provider.IconHTML 28}}
6967
{{ctx.Locale.Tr "sign_in_with_provider" $provider.DisplayName}}
7068
</a>

‎web_src/css/form.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,6 @@ textarea:focus,
243243
.user.forgot.password form,
244244
.user.reset.password form,
245245
.user.link-account form,
246-
.user.signin form,
247246
.user.signup form {
248247
margin: auto;
249248
width: 700px !important;
@@ -279,7 +278,6 @@ textarea:focus,
279278
.user.forgot.password form .inline.field > label,
280279
.user.reset.password form .inline.field > label,
281280
.user.link-account form .inline.field > label,
282-
.user.signin form .inline.field > label,
283281
.user.signup form .inline.field > label {
284282
text-align: right;
285283
width: 250px !important;

‎web_src/css/helpers.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ Gitea's private styles use `g-` prefix.
4848

4949
.gt-max-width-12rem { max-width: 12rem !important; }
5050
.gt-max-width-24rem { max-width: 24rem !important; }
51+
.gt-max-width-36rem { max-width: 36rem !important; }
5152

5253
/* below class names match Tailwind CSS */
5354
.gt-break-all { word-break: break-all !important; }

0 commit comments

Comments
 (0)