Skip to content

Conversation

@altf4arnold
Copy link
Contributor

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.

@altf4arnold altf4arnold marked this pull request as ready for review May 7, 2024 15:42
Copy link
Member

@jeremystretch jeremystretch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@altf4arnold
Copy link
Contributor Author

I indeed used auto-formating on my IDE for clarity on my part. Will revert that when I get to my keyboard again

@altf4arnold
Copy link
Contributor Author

Took some tries, but it ended up working (possible to squash commits tomorrow)

@altf4arnold altf4arnold changed the title Login form #15999 Login form May 8, 2024
@altf4arnold altf4arnold requested a review from jeremystretch May 8, 2024 04:31

{% render_form form %}
<div class="form-group">
<label for="id_username" style="font-weight: bold; margin-bottom: 5px;">{{ form.username.label }}</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should avoid using inline CSS wherever possible. Bootstrap provides plenty of convenient utility classes for this purpose.


{% render_form form %}
<div class="form-group">
<label for="id_username" style="font-weight: bold; margin-bottom: 5px;">{{ form.username.label }}</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to keep a two-space indentation for each child element.

{% endfor %}
</div>

<div class="form-group">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There isn't enough space between the two form fields. Try adding the mb-3 class or similar to the first group.

screenshot

@jeremystretch
Copy link
Member

I did some cleanup but am not able to push to your branch. I'll merge this as-is and do the cleanup afterward.

@jeremystretch jeremystretch merged commit 6ff349d into netbox-community:develop May 8, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

French login prompt overflows on lines

2 participants