Removed Right Align and Fixed With of Inputs.

[michaelhiiva]

Summary

The Sign In Page currently aligns each label to the right. Cleans up Sign In Display.

This change removes that and assures that the password and
text input boxes are the same width.

Screenshots

Current

Updated

[neagle]

Thanks for the PR, @EarthSchlange! I'm glad you were able to get things running locally. :)

For the text alignment, I definitely think the login could use some custom design treatment at some point, but I actually don't like having the labels aligned left in this case. It leaves the labels drifting off in space, separated by a large and uneven expanse from the text fields to which they're related.

I can see why the right-aligned version might look broken or unappealing, since the alignment of the login fields seems unrelated to the "Sign In" header, but I'd rather solve that design problem a different way.

Adding the [type="password"] to the CSS to make its width the same is a good fix, though. I'd be happy to merge that in.

[michaelhiiva]

@neagle we could also use the placeholder attribute for input and eliminate the labels. The other thing is we may want to center our Sign In section.

…

On Sat., Jun. 19, 2021, 5:24 a.m. Nate Eagle, ***@***.***> wrote: Thanks for the PR, @EarthSchlange <https://github.com/EarthSchlange>! I'm glad you were able to get things running locally. :) For the text alignment, I definitely think the login could use some custom design treatment at some point, but I actually don't like having the labels aligned left in this case. It leaves the labels drifting off in space, separated by a large and uneven expanse from the text fields to which they're related. I can see why the right-aligned version might look broken or unappealing, since the alignment of the login fields seems unrelated to the "Sign In" header, but I'd rather solve that design problem a different way. Adding the [type="password"] to the CSS to make its width the same is a good fix, though. I'd be happy to merge that in. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#228 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABGSBPMNKPBJTONOVXMZFTLTTSEAVANCNFSM466QJO3Q> .

[michaelhiiva]

This commit removes the labels and uses placeholder instead. @neagle would this approach work for you?

[neagle]

Your approach definitely looks good from an aesthetic perspective, but there are important problems with using the placeholder attribute that way.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

A better approach that might fix your dislike of the right alignment is the one recommended toward the end of that article, where the label is placed above the relevant input:

That said, you should note that the styles you're editing right now affect not just the sign in, but form fields all over the site.

That's one reason I've been gradually changing all the forms to use standard .field-key and .field-value markup, so that they can first be made consistent, and then we can potentially devote some more time to form design. This is also in preparation for making the forms work better in narrow, mobile views.

[michaelhiiva]

@neagle Thank you for the smashing magazine article. The article has two important points accessibility and language. According to this smashing magazine article the placeholder attribute is "skipped over by browsers." This could mean some of our users will not get the full experience of our website.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

The solution of placing a label above is reasonable with the addition of subtext to describe the input.

[michaelhiiva]

Removes the flex display. I don't think we need a description below the email at this point.

[neagle]

Thanks, @EarthSchlange!