Opened 3 years ago

Closed 2 years ago

#19177 closed Cleanup/optimization (fixed)

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

Reported by: void Owned by: anonymous
Component: contrib.admin Version: master
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 Changed 3 years ago by lrekucki

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset
  • Triage Stage changed from Unreviewed to Accepted

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

comment:2 Changed 3 years ago by claudep

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 Changed 2 years ago by PMourelle (@…

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

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

comment:4 Changed 2 years ago by Pedro Mourelle <pedromagnus@…>

  • Has patch set

comment:5 Changed 2 years ago by Ramiro Morales <cramm0@…>

  • Resolution set to fixed
  • Status changed from assigned to 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