Page MenuHomePhabricator

[M] Adopt the css gadget for responsive design on UploadWizard into the UW extension itself
Closed, ResolvedPublic

Assigned To
Authored By
Cparle
Jan 17 2024, 5:08 PM
Referenced Files
F45650895: Screen Shot 2024-04-10 at 8.03.59 AM.png
Apr 10 2024, 3:07 PM
F45650877: Screen Shot 2024-04-10 at 8.04.13 AM.png
Apr 10 2024, 3:07 PM
F42602586: Screen Shot 2024-03-13 at 11.35.49 AM.png
Mar 13 2024, 6:49 PM
F42596892: IMG_1508.PNG
Mar 13 2024, 12:58 PM
F42482538: IMG_5164.PNG
Mar 9 2024, 1:03 AM
F42482511: IMG_5166.PNG
Mar 9 2024, 1:03 AM
F42482498: IMG_5165.PNG
Mar 9 2024, 1:03 AM
F42393018: prod.png
Mar 4 2024, 1:40 PM
Tokens
"Love" token, awarded by matmarex.

Description

Working on T354469 I couldn't figure out why the layout was different in my local dev env and production ... turns out there's a gadget on commons created in response to T261589 and that's the difference

We probably ought to move the css from https://commons.wikimedia.org/wiki/MediaWiki:Gadget-uploadWizardMobile.css into UW itself as part of our current work on the extension

Event Timeline

Cparle renamed this task from Adopt the css in T261589 into UploadWizard to Adopt the css gadget for responsive design on UploadWizard into the UW extension itself.Jan 17 2024, 5:09 PM
MarkTraceur renamed this task from Adopt the css gadget for responsive design on UploadWizard into the UW extension itself to [M] Adopt the css gadget for responsive design on UploadWizard into the UW extension itself.Jan 24 2024, 5:36 PM

Change 1006934 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/UploadWizard@master] Make UW more responsive

https://gerrit.wikimedia.org/r/1006934

I'm reviewing https://gerrit.wikimedia.org/r/1006934: If my local dev setup isn't misleading, I'm seeing a difference in how steps are displayed, see dev VS production Commons screenshots below.

Dev

dev.png (2×1 px, 139 KB)

Prod

prod.png (2×1 px, 195 KB)

That was intentional. The current (on-wiki CSS, with most of the markup removed) steps are terrible: they are just a bunch of words.
People who are not familiar with these steps on desktop, would not know what this represents, and would either have no clue what this even is, or likely mistake them for links.

That said, I agree I didn't do enough to make the steps "more responsive" - I'll go tinker with them some more!

Change 1006934 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Make UW more responsive

https://gerrit.wikimedia.org/r/1006934

Checked in commons betalabs - @matthiasmullie please review the screenshots below (real device, iPhone 16).

commons betacommons wmf.21
IMG_5165.PNG (640×295 px, 373 KB)
IMG_5166.PNG (640×295 px, 284 KB)
IMG_5164.PNG (640×295 px, 226 KB)

@Etonkovidova The arrows look off, but that's caused by the on-wiki overrides. I removed those (T358593 to do this in prod), and things look better now:

IMG_1508.PNG (2×1 px, 139 KB)

(I'm not very happy with "use" being a separate 2nd row, but we're looking to cut some steps from the arrows in the near future anyway!)

@Etonkovidova The arrows look off, but that's caused by the on-wiki overrides. I removed those (T358593 to do this in prod), and things look better now:

IMG_1508.PNG (2×1 px, 139 KB)

(I'm not very happy with "use" being a separate 2nd row, but we're looking to cut some steps from the arrows in the near future anyway!)

Thanks, @matthiasmullie. Checked in betalabs - looks great (as per your screenshot). The commons wmf.22 has the steps displayed unstyled:

Screen Shot 2024-03-13 at 11.35.49 AM.png (1×864 px, 163 KB)

Checked on commons wmf.26 - the arrows look as expected:

screen width 430screen width 360
Screen Shot 2024-04-10 at 8.04.13 AM.png (1×872 px, 200 KB)
Screen Shot 2024-04-10 at 8.03.59 AM.png (1×732 px, 182 KB)