Skip to content

Loading…

Improved labels and inputs layout in admin login #790

Closed
wants to merge 4 commits into from

4 participants

@pmourelle

As explained and proved in #19177 (https://code.djangoproject.com/ticket/19177), layout looks odd/bad in several languages.
Also, it looks like and old design, a renew is needed here. So, I propose this change following claudep sugestion.

  • Changes were made just in the CSS.
  • Modified layout to top-aligned labels.
  • Added more padding to inputs (it was really needed here).
  • It adjust good to zoom in/out.

To make inputs fit perfect, it uses the box-sizing property, with the current support:
Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

Captura de pantalla 2013-02-23 a las 15 08 27

@pmourelle pmourelle Modified layout to top-aligned labels. Added 'air' for inputs (the pa…
…dding was really needed there.). It adjust good to zoom in/out.
40aed8d
@bryanveloso bryanveloso commented on an outdated diff
django/contrib/admin/static/admin/css/login.css
((10 lines not shown))
color: #333;
}
.login .form-row #id_username, .login .form-row #id_password {
- width: 14em;
+ clear: both;
+ float: left;
@bryanveloso Django member

This is looking great! My only qualm is since the labels themselves are no longer floated, I would want to see this done without floats. :+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@pmourelle

I didn't know about squashing, but its existance is completely logic. It's never too late to learn new things about git :).
Done (I think).

@pmourelle pmourelle Merge branch '19177-admin-login-labels-and-input' of github.com:pedro…
…magnus/django into 19177-admin-login-labels-and-input
0d0df94
@oinopion

Something went wrong with your squash and now instead of one commits you have four.

@ramiro
Django member

Merged in 0868e5a.

@ramiro ramiro closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 23, 2013
  1. @pmourelle

    Modified layout to top-aligned labels. Added 'air' for inputs (the pa…

    pmourelle committed
    …dding was really needed there.). It adjust good to zoom in/out.
  2. @pmourelle

    Removed float attributes from label and inputs in login form. Removed…

    pmourelle committed
    … useless text-align property.
Commits on Feb 25, 2013
  1. @pmourelle

    Removed float attributes from label and inputs in login form. Removed…

    pmourelle committed
    … useless text-align property.
  2. @pmourelle

    Merge branch '19177-admin-login-labels-and-input' of github.com:pedro…

    pmourelle committed
    …magnus/django into 19177-admin-login-labels-and-input
This page is out of date. Refresh to see the latest.
Showing with 7 additions and 4 deletions.
  1. +7 −4 django/contrib/admin/static/admin/css/login.css
View
11 django/contrib/admin/static/admin/css/login.css
@@ -29,17 +29,20 @@ body.login {
}
.login .form-row label {
- float: left;
- width: 9em;
padding-right: 0.5em;
line-height: 2em;
- text-align: right;
font-size: 1em;
+ clear: both;
color: #333;
}
.login .form-row #id_username, .login .form-row #id_password {
- width: 14em;
+ clear: both;
+ padding: 6px;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.login span.help {
Something went wrong with that request. Please try again.