Log-in and registration form icons #110

Closed
ndarville opened this Issue Mar 20, 2013 · 9 comments

1 participant

@ndarville
Owner
/****          *****
***** ACCOUNTS *****
*****          ****/
#content-body input[name="username"] {
    background: url(/static/glyphish/111-user.png) no-repeat left;
    background-size: 1.5em;
    background-position: 5px 50%;
    padding-left: 35px;
}

#content-body input[name="email"] {
    background: url(/static/glyphish/18-envelope.png) no-repeat left;
    background-size: 1.5em;
    background-position: 7px 50%;
    padding-left: 35px;
}

#content-body input[name="password"] {
    background: url(/static/glyphish/54-lock.png) no-repeat left;
    background-size: 1.5em;
    background-position: 5px 50%;
    padding-left: 35px;
}

#content-body input[name="password1"] {
    background: url(/static/glyphish/54-lock.png) no-repeat left;
    background-size: 1.5em;
    background-position: 5px 50%;
    padding-left: 35px;
}

#content-body input[name="password2"] {
    background: url(/static/glyphish/54-lock.png) no-repeat left;
    background-size: 1.5em;
    background-position: 5px 50%;
    padding-left: 35px;
}

All input forums: size:="30".

<form action="" method="post" id="account-form">

#account-form label { display: none; }

Screen Shot 2013-03-20 at 22 03 40

Screen Shot 2013-03-20 at 22 09 51

To do:

  • All the icons aren’t the same size; they need to be centred
  • The text padding/icon positioning could be improved
  • Do something about the really ugly, boring label text. It still needs to be there semantically, though. Maybe hide it and leave it for screenreaders? How is browser support degradation for placeholder?
@ndarville
Owner

I removed hid the labels to everyone not using screenreaders and used placehodler text instead. This is not particularly friendly to older, stupider browsers, but I think it is better to implement backwards compatibility that provide the same look, rather than to create a 90s-looking design that works across all browsers.

Final results:

Screen Shot 2013-03-21 at 00 47 05

Screen Shot 2013-03-21 at 00 15 00

Not digging the look of the #login-helpers font, but it is not due to any bugged CSS.

@ndarville
Owner

Password Reset

Screen Shot 2013-03-21 at 00 48 44

E-mail Change

Screen Shot 2013-03-21 at 01 02 12

@ndarville
Owner

Problem: Error (Errow, Hurr) Indentation

Screen Shot 2013-03-21 at 01 01 37

Solutions:

  • An invisible arrow that displays, if:

    for field:
        if form.errors:
            if form.errors and not field.errors:
                insert_fake_arrow_with_white_colour
    
  • Negative margin-right CSS for the arrow

    The main problem with the hackishness of this is mainly that it will be a clusterfuck in screenreaders.

@ndarville
Owner

Addressed the problem by using the—admittedly bugged—original error display and ditching the arrows:

Screen Shot 2013-03-21 at 13 42 04

@ndarville ndarville added a commit that referenced this issue Mar 21, 2013
@ndarville Fixed form error CSS for #110 5a0ceff
@ndarville ndarville closed this in ac256d3 Mar 21, 2013
@ndarville
Owner

The look on the iPhone and especially on the iPad are not satisfactory. The forms are way too small on the iPad.

Clipboard01

Clipboard02

The screenshots actually make the forms look bigger than they appear on the viewports, so they aren’t the best example.

The forms aren’t smaller than they used to, though.

@ndarville ndarville reopened this Mar 21, 2013
@ndarville
Owner

The container div also appears to exceed the viewport of the iPhone (portrait and landscape), which leads it to zoom in when interacting with a form. That needs to be fixed as well.

This could be responsible:

#board,
#content,
#credits,
#header,
#navigation {
    width: 95%;
}

Or not; the container is bigger than the iPhone viewport, which lets you scroll horizontally, which is not the case on the iPad.


Changing the value to 100% removes the horizontal scrolling problem, but the forms are still zoomed in on when clicked.

Still, the CSS from now on should probably be something like:

#content,
#credits,
#navigation {
    width: 100%;
}

.categories,
.threads,
#board,
#header {
    width: 95%;
}
@ndarville
Owner
  • Bigger forms on mobile devices
  • Fix viewport-fitting problems on iPhone
@ndarville
Owner

Changing the input and textarea font-size: 16px; according to this did not work. Perhaps because I added line-height?

@ndarville
Owner

Spinning off the iPhone zoom problem to a separate issue.

@ndarville ndarville closed this Mar 25, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment