Opened 12 years ago

Closed 12 years ago

#19177 closed Cleanup/optimization (fixed)

Add some ems to the width of username label at login page.

Reported by: Alexey Boriskin Owned by: anonymous
Component: contrib.admin Version: dev
Severity: Normal Keywords: sprints-django-ar
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

Recent landing of the Russel's work contains one small, but important change: ​https://github.com/django/django/commit/70a0de37d132e5f1514fb939875f69649f103124#L5L33

It makes the username label of the login form to be the same as user model username field's verbose_name. Previously it was just a translated "User" string. I'm fine with that, but that change cause a tiny layout issue. "Username" is two words in some languages, and some languages have longer words than others, and now in the number of languages username label have shifted to the second line.

My proposal is to increase the width of username label by 3em, based on the following screenshots:
​http://dl.dropbox.com/u/302516/Screenshots/18.png (Czech, +1em required)
​http://dl.dropbox.com/u/302516/Screenshots/19.png (Spanish, +1em required)
​http://dl.dropbox.com/u/302516/Screenshots/1a.png (Georgian, +3em required)
​http://dl.dropbox.com/u/302516/Screenshots/1b.png (Kazakh, +1em required)
​http://dl.dropbox.com/u/302516/Screenshots/1c.png (Mongolian, +1em required)
​http://dl.dropbox.com/u/302516/Screenshots/1d.png (Russian, +1em required)
​http://dl.dropbox.com/u/302516/Screenshots/1e.png (Slovak, +2em required)

Change History (5)

comment:1 by Łukasz Rekucki, 12 years ago

Triage Stage: Unreviewed → Accepted

It would be best if the layout just scaled with the width of the text in the label.

comment:2 by Claude Paroz, 12 years ago

If we care for i18n, either use top-aligned labels (​http://css-tricks.com/label-placement-on-forms/) or simply a table, yes, a table.

comment:3 by PMourelle (@…, 12 years ago

Keywords: sprints-django-ar added
Owner: changed from nobody to anonymous
Status: new → assigned

Top-aligned labels sounds and feels like the best option here.

comment:4 by Pedro Mourelle <pedromagnus@…>, 12 years ago

Has patch: set

Patch here:
​https://github.com/django/django/pull/790

comment:5 by Ramiro Morales <cramm0@…>, 12 years ago

Resolution: → fixed
Status: assigned → closed

In 0868e5a8ac6811fffcb25e9dc8248d87d25abcd1:

Fixed #19177 -- Better layout for admin login form field labels.

Thanks goes to void for the comprehensive report, to Pedro Mourelle for
the fix and to Bryan Veloso, Łukasz Rekucki and Claude Paroz for the
review.

This fix includes the following changes:

  • Modified layout to top-aligned labels.
  • Added 'air' for inputs (the padding was really needed there.). It adjust good to zoom in/out.
  • Removed float attributes from label and inputs in login form.
  • Removed useless text-align property.
Note: See TracTickets for help on using tickets.
Back to Top