#15999 Login form #16006
#15999 Login form #16006
Conversation
There was a problem hiding this comment.
It seems like maybe your IDE has automatically reformatted the template using different indentation. Could you please restore the original indentations, so that only the intentional modified portions of the template appear in the PR?
Also, we should add some vertical margin between the two form fields so that it looks less cramped.
|
I indeed used auto-formating on my IDE for clarity on my part. Will revert that when I get to my keyboard again |
|
Took some tries, but it ended up working (possible to squash commits tomorrow) |
| @@ -46,7 +46,21 @@ <h2 class="text-center mb-4">{% trans "Log In" %}</h2> | |||
| <input type="hidden" name="next" value="{{ request.POST.next }}" /> | |||
| {% endif %} | |||
|
|
|||
| {% render_form form %} | |||
| <div class="form-group"> | |||
| <label for="id_username" style="font-weight: bold; margin-bottom: 5px;">{{ form.username.label }}</label> | |||
There was a problem hiding this comment.
We should avoid using inline CSS wherever possible. Bootstrap provides plenty of convenient utility classes for this purpose.
| @@ -46,7 +46,21 @@ <h2 class="text-center mb-4">{% trans "Log In" %}</h2> | |||
| <input type="hidden" name="next" value="{{ request.POST.next }}" /> | |||
| {% endif %} | |||
|
|
|||
| {% render_form form %} | |||
| <div class="form-group"> | |||
| <label for="id_username" style="font-weight: bold; margin-bottom: 5px;">{{ form.username.label }}</label> | |||
There was a problem hiding this comment.
Try to keep a two-space indentation for each child element.
| {% endfor %} | ||
| </div> | ||
|
|
||
| <div class="form-group"> |
There was a problem hiding this comment.
There isn't enough space between the two form fields. Try adding the mb-3 class or similar to the first group.
|
I did some cleanup but am not able to push to your branch. I'll merge this as-is and do the cleanup afterward. |
Putting login form labels on top
Fixes: #15999
like @jeremystretch proposed, instead of having the labels on the side, let's put them on top.