648161 - Suggest adding space on change avatar page

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P3)

Description

[Rebecca Billings [:rbillings]]

Attachment: change avatar

On the change avatar page, there is no space between the selected avatar and the browsing field.

1) https://support.allizom.org/en-US/users/avatar [see screenshot]

Comment 1

[Rebecca Billings [:rbillings]]

There is also no space between the field and the browse button

Comment 2

[James Socol [:jsocol, :james]]

(In reply to comment #1)
> There is also no space between the field and the browse button

Agreed with the space between the avatar and the field, but it's basically impossible to style <input type="file">. The "Browse" button is an OS widget most of the time, there's no (standard) CSS access to it. (Webkit doesn't even display an input field, sometimes.)

Comment 3

[Paul Craciunoiu [:paulc]]

(In reply to comment #2)
> Agreed with the space between the avatar and the field, but it's basically
> impossible to style <input type="file">. The "Browse" button is an OS widget
> most of the time, there's no (standard) CSS access to it. (Webkit doesn't even
> display an input field, sometimes.)
One way to do this would be with using a "fake" input + CSS + JavaScript to pop open the dialog. Stuff like this [1], but prettier.

[1] http://www.quirksmode.org/dom/inputfile.html

Comment 4

[Tanay Gavankar [:tgavankar]]

I actually fixed the avatar/browsing field spacing issue in a previous patch, I just hadn't seen this bug.

https://github.com/jsocol/kitsune/commit/f346f7566


Marking as RESO FIXED for that - if we want to still do the "fake" input thing paulc mentioned, let's open a new bug for it.

Comment 5

[Rebecca Billings [:rbillings]]

Verified space between avatar and field has been fixed.