Page MenuHomePhabricator

UploadWizard big "upload a file" button half-clickable in some browsers
Closed, ResolvedPublic

Description

Author: neilk

Description:
Following some recent CSS changes the big button for uploadwizard is suddenly only clickable over half its area. This works fine locally, on test.wikipedia.org, but not on live Commons.

(The feature is implemented by placing an invisible file upload field over a button. the function that does this is called moveFileInputToCover)


Version: unspecified
Severity: major

Details

Reference
bz30807

Event Timeline

bzimport raised the priority of this task from to Unbreak Now!.Nov 21 2014, 11:49 PM
bzimport added a project: UploadWizard.
bzimport set Reference to bz30807.

neilk wrote:

Assigning to Kaldari since this seems to follow CSS changes he did a few weeks ago

Just a quick note for myself:

We need to change the height of input.mwe-upwiz-file-input to match the height of the containing div.mwe-upwiz-file-ctrl-container. If I remember correctly, this is supposed to be done dynamically somewhere in the code. Probably need to make sure that it is matching all of the relevant box elements: height, padding, and margin, rather than just one or two.

neilk wrote:

(In reply to comment #2)

Just a quick note for myself:

We need to change the height of input.mwe-upwiz-file-input to match the height
of the containing div.mwe-upwiz-file-ctrl-container. If I remember correctly,
this is supposed to be done dynamically somewhere in the code. Probably need to
make sure that it is matching all of the relevant box elements: height,
padding, and margin, rather than just one or two.

Is it possible that this is related to central notice shifting the page downwards?

No, the problem occurs regardless of CentralNotice.

Relevant code is in moveFileInputToCover() function in mw.UploadWizardUploadInterface.js. I'll try to take a look at it this weekend.

Well, as long as I was in there, I noticed that changing line 422 from:
$div.find( '.mwe-upwiz-visible-file-filename-text' )

to:
$div.find( '.mwe-upwiz-file-ctrl-container' )

seems to solve the problem. Needs testing in IE, Opera, etc.

neilk wrote:

I'm pretty sure that this is how it was originally, then some other CSS change occurred, so I changed it to that.

Actually I think the fix above probably won't work if files are deleted. I
think the safest fix is just removing line 64 from uploadWizard.css. This
removes the padding override for "mwe-upwiz-add-files-0 #mwe-upwiz-add-file". I
thought I had removed all the explicit button padding from uploadWizard.css
after I made my jQuery UI skin changes (since padding is now handled more
elegantly by the skin), but I missed this one (since the CSS selector wasn't
obviously a button).

I've implemented this fix in r96638. A side effect is that the button is no
longer so huge.

neilk wrote:

*** Bug 26186 has been marked as a duplicate of this bug. ***