Move all login and account creation page labels to be above inputs #29432
Conversation
|
Could you have a look at the two factor page too? Last time I checked the content was not centered. |
|
Looks cleaner with that layout, I like it. |
|
Maybe remove the 2. title? |
templates/user/auth/captcha.tmpl
Outdated
| {{.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"> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
I personally like the previous style. It's more beautiful to not align every line. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
I updated the activate template to no longer be inline. This line of CSS is the reason for the use of |
|
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 |
It was still being used by the |
|
Sidenote: Please don't raise PR's from the default 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)
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_accountBefore
After
This PR addresses a revert of the original PR due to this comment.