Move all login and account creation page labels to be above inputs #29432

rafh · 2024-02-26T19:14:53Z

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.

This PR updates the following routes:
/user/login
/user/sign_up
/user/login/openid
/user/forgot_password
/user/link_account
/user/recover_account

Before

After

This PR addresses a revert of the original PR due to this comment.

KN4CK3R · 2024-02-26T19:51:05Z

Could you have a look at the two factor page too? Last time I checked the content was not centered.

silverwind · 2024-02-26T20:48:20Z

Looks cleaner with that layout, I like it.

zokkis · 2024-02-26T21:37:16Z

Maybe remove the 2. title?
Because now there is the tab with "sign in" and directly under the tab is the title with "sign in"

wxiaoguang · 2024-02-27T02:49:05Z

templates/user/auth/captcha.tmpl

 		{{.Captcha.CreateHTML}}
 	</div>
 	<div class="required inline field {{if .Err_Captcha}}error{{end}}">
 		<label for="captcha">{{ctx.Locale.Tr "captcha"}}</label>
-		<input id="captcha" name="captcha" value="{{.captcha}}" autocomplete="off">
+		<input id="captcha" class="gt-w-full" name="captcha" value="{{.captcha}}" autocomplete="off">


I just realized that it is playing a CSS style overriding game ....

For example: by Fomantic UI: the inline field above means that the label is the same row as the input

https://fomantic-ui.com/collections/form.html#inline-field

So, by default, without the inline, it should be the UI you need.

I do not think it is right to use "inline" outside, and change the "inline" behavior inside.

There are already many UI bugs caused by such unclear overridings.

I understand this perspective. I removed the inline class to allow the default behavior of the div to take over.

On the topic of helper classes, we recently implemented tailwinds. We should update our contribution docs to reflect the usage of these classes? If tailwinds is the path forward, I'll open a PR to update these docs.

gitea/docs/content/contributing/guidelines-frontend.en-us.md

Line 50 in 4b8293a

12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).

I think it should be updated accordingly. At the moment the plan is to remove most Gitea's own helpers (gt-), use Tailwind (tw-) as much as possible.

lunny · 2024-02-27T02:57:30Z

I personally like the previous style. It's more beautiful to not align every line.

wxiaoguang

Put a "request change" by #29432 (comment)

Personally I think it should clearly define the HTML layout and styles, instead of overriding the styles to a different purpose.

If most people agree to override, feel free to dismiss this request change.

Thank you.

dismiss old change request

wxiaoguang

Thank you very much. Without the "inline" patches, the new approach looks better to me.

It seems that the ".user.activate" form is still using "inline", should it be updated too?
Why sometimes there is "md:tw-max-w-2xl tw-m-auto" but sometimes there isn't? Could there be some general (unified) framework approaches?

rafh · 2024-03-05T00:08:41Z

md:tw-max-w-2xl

I updated the activate template to no longer be inline.

This line of CSS is the reason for the use of md:tw-max-w-2xl tw-m-auto. To create a unified approach, I removed the CSS and updated the templates that used it. The PR grew, but things are now more consistent.

wxiaoguang · 2024-03-05T01:57:23Z

Thank you, it looks better. Actually, I am not a fan of fine-tuning everything, that's why I proposed to use some clearly defined CSS classes for these forms. But the current approach is not unacceptable ....

The last question: why user.activate form is left there? I think it also belongs to the "user sign in/out" pages.

rafh · 2024-03-05T16:58:18Z

Thank you, it looks better. Actually, I am not a fan of fine-tuning everything, that's why I proposed to use some clearly defined CSS classes for these forms. But the current approach is not unacceptable ....

The last question: why user.activate form is left there? I think it also belongs to the "user sign in/out" pages.

It was still being used by the activate_prompt.tmpl and prohibit_login.tmpl. I removed the CSS and updated the tmpl to align with the previous changes.

silverwind · 2024-03-06T01:00:20Z

Sidenote: Please don't raise PR's from the default branch main for reasons mentioned here and because it's a pain for reviewers to work with that branch as they need to rename their local branch.

* origin/main: (29 commits) Tweak actions color and borders (go-gitea#29640) Add download URL for executable files (go-gitea#28260) Move all login and account creation page labels to be above inputs (go-gitea#29432) Avoid issue info panic (go-gitea#29625) Cache repository default branch commit status to reduce query on commit status table (go-gitea#29444) Avoid unexpected panic in graceful manager (go-gitea#29629) Add a link for the recently pushed branch notification (go-gitea#29627) Fix wrong header of org project view page (go-gitea#29626) Detect broken git hooks (go-gitea#29494) Sync branches to DB immediately when handle git hook calling (go-gitea#29493) Fix wrong line number in code search result (go-gitea#29260) Make wiki default branch name changable (go-gitea#29603) A small refactor for agit implementation (go-gitea#29614) Update Twitter Logo (go-gitea#29621) Fix 500 error when adding PR comment (go-gitea#29622) Run editorconfig-checker on `locale_en-US.ini` (go-gitea#29608) bump protobuf module (go-gitea#29617) Add ac claim for old docker/build-push-action@v3 / current buildx gha cache (go-gitea#29584) Skip email domain check when admins edit user emails (go-gitea#29609) Improve natural sort (go-gitea#29611) ...

* giteaofficial/main: Use strict protocol check when redirect (go-gitea#29642) Update various logos and unify their filenames (go-gitea#29637) Tweak actions color and borders (go-gitea#29640) Add download URL for executable files (go-gitea#28260) Move all login and account creation page labels to be above inputs (go-gitea#29432) Avoid issue info panic (go-gitea#29625) Cache repository default branch commit status to reduce query on commit status table (go-gitea#29444) Avoid unexpected panic in graceful manager (go-gitea#29629) Add a link for the recently pushed branch notification (go-gitea#29627) Fix wrong header of org project view page (go-gitea#29626) Detect broken git hooks (go-gitea#29494) Sync branches to DB immediately when handle git hook calling (go-gitea#29493) Fix wrong line number in code search result (go-gitea#29260) Make wiki default branch name changable (go-gitea#29603) A small refactor for agit implementation (go-gitea#29614) Update Twitter Logo (go-gitea#29621) Fix 500 error when adding PR comment (go-gitea#29622)

rafh added 11 commits February 26, 2024 11:10

add helper class for width

0e5932f

move labels above for sign in tmpl

86f498b

move labels above for forgot password tmpl

3844836

move labels above for sign in openid tmpl

0e5c7fd

move labels above for signup tmpl

eea82fe

move labels above for captcha tmpl

a5ebb50

move labels above for reset password tmpl

ba6e24b

move labels above for signup openid tmpl

c63bfca

update css to ensure labels are left aligned

5118fa3

fix lint errors

a809db8

remove Str2html

47bac4f

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 26, 2024

pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Feb 26, 2024

github-actions bot added the modifies/frontend label Feb 26, 2024

ensure forms within signin class are centered on all screens

95c65df

wxiaoguang reviewed Feb 27, 2024

View reviewed changes

wxiaoguang previously requested changes Feb 27, 2024

View reviewed changes

GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 27, 2024

rafh and others added 3 commits February 29, 2024 12:22

Merge branch 'main' into main

b7c4cfb

implement tailwind helper classes

95d4253

remove helper classes and remove inline class

ca237d0

rafh requested a review from wxiaoguang March 1, 2024 18:13

Merge branch 'main' into main

e1e456e

GiteaBot removed the lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged label Mar 2, 2024

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 2, 2024

wxiaoguang reviewed Mar 2, 2024

View reviewed changes

rafh added 3 commits March 4, 2024 18:11

top align labels for activate tmpl

7b245a7

Merge branch 'main' of github.com:rafh/gitea

6fe5939

update tmpl to use a unified approach to form width

731a104

add tailwinds classes to tmpl that used activate class on main

0832e6f

rafh added 2 commits March 5, 2024 12:15

Merge branch 'main' into main

90cabcb

Merge branch 'main' into main

573b90b

rafh requested a review from wxiaoguang March 5, 2024 20:52

wxiaoguang approved these changes Mar 6, 2024

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 6, 2024

silverwind approved these changes Mar 6, 2024

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 6, 2024

rafh added 2 commits March 5, 2024 21:14

Merge branch 'main' into main

24d7a3f

Merge branch 'main' into main

eecef7e

silverwind enabled auto-merge (squash) March 6, 2024 14:03

silverwind merged commit c996e35 into go-gitea:main Mar 6, 2024
26 checks passed

GiteaBot added this to the 1.23.0 milestone Mar 6, 2024

lunny modified the milestones: 1.23.0, 1.22.0 Mar 8, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move all login and account creation page labels to be above inputs #29432

Move all login and account creation page labels to be above inputs #29432

rafh commented Feb 26, 2024

KN4CK3R commented Feb 26, 2024

silverwind commented Feb 26, 2024

zokkis commented Feb 26, 2024

wxiaoguang Feb 27, 2024

rafh Mar 1, 2024

wxiaoguang Mar 2, 2024 •

edited

Loading

lunny commented Feb 27, 2024

wxiaoguang left a comment

wxiaoguang left a comment

rafh commented Mar 5, 2024 •

edited

Loading

wxiaoguang commented Mar 5, 2024

rafh commented Mar 5, 2024

silverwind commented Mar 6, 2024 •

edited

Loading

Move all login and account creation page labels to be above inputs #29432

Move all login and account creation page labels to be above inputs #29432

Conversation

rafh commented Feb 26, 2024

KN4CK3R commented Feb 26, 2024

silverwind commented Feb 26, 2024

zokkis commented Feb 26, 2024

wxiaoguang Feb 27, 2024

Choose a reason for hiding this comment

rafh Mar 1, 2024

Choose a reason for hiding this comment

wxiaoguang Mar 2, 2024 • edited Loading

Choose a reason for hiding this comment

lunny commented Feb 27, 2024

wxiaoguang left a comment

Choose a reason for hiding this comment

wxiaoguang left a comment

Choose a reason for hiding this comment

rafh commented Mar 5, 2024 • edited Loading

wxiaoguang commented Mar 5, 2024

rafh commented Mar 5, 2024

silverwind commented Mar 6, 2024 • edited Loading

wxiaoguang Mar 2, 2024 •

edited

Loading

rafh commented Mar 5, 2024 •

edited

Loading

silverwind commented Mar 6, 2024 •

edited

Loading