Log-in and registration form icons

[ndarville]

/****          *****
***** 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; }

To do:

• [x] All the icons aren’t the same size; they need to be centred
• [x] The text padding/icon positioning could be improved
• [x] 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]

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:

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

[ndarville]

Password Reset

E-mail Change

[ndarville]

Problem: Error (Errow, Hurr) Indentation

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]

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

[ndarville]

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

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]

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]

• [ ] Bigger forms on mobile devices
• [ ] Fix viewport-fitting problems on iPhone

[ndarville]

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

[ndarville]

Spinning off the iPhone zoom problem to a separate issue.