Page MenuHomePhabricator

Use responsive Vector-2022 instead of Minerva for Wikifunctions Mobile and drop the secondary domain/MobileFrontend part
Open, In Progress, LowPublic

Description

Jon says that if we can we should get off Minerva as the Mobile skin and use only responsive Vector-2022.

One main change should be to remove the restriction on the content-width to 1000px and use the device-width instead, which should make Vector-2022 feel better than it does now right away.

That would also allow to get rid of the m.wikifunctions.org subdomain.

Event Timeline

Making Vector 2022 behave in a responsive manner should be as simple as setting $wgVectorResponsive = true;
If you notice anything in your testing that's not working please file those as bugs.

Users will be able to opt out using the preference here:

Screenshot 2023-10-20 at 2.10.21 PM.png (177×407 px, 24 KB)

Or my using the "Use desktop mode" function on their mobile device.

In the case of Wikifunctions this might be a better technology choice as you'd be able to remove the entirety of MobileFrontend and the subdomain (you can keep Minerva as an available skin - that will work just fine without Mobilefrontend and for consistency with other platforms it likely makes sense to keep it running as an option).

Jdforrester-WMF renamed this task from Use responsive Vector-2022 instead of Minerva for Mobile to Use responsive Vector-2022 instead of Minerva for Wikifunctions Mobile and drop the secondary domain/MobileFrontend part.Oct 23 2023, 8:15 PM

@Jdforrester-WMF let me know if I can help in anyway. Presumably setting $wgVectorResponsive = true; on https://wikifunctions.beta.wmflabs.org/ would be your first logical step.

Flagging this bug in case you run into it: T352485

Change 1010268 had a related patch set uploaded (by Jforrester; author: Jforrester):

[operations/mediawiki-config@master] Be able to disable MobileFrontend and drop the secondary domain

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

Change 1010270 had a related patch set uploaded (by Jforrester; author: Jforrester):

[operations/mediawiki-config@master] [wikifunctionswiki] Disable MobileFrontend in production

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

Please publish this intention on https://www.wikifunctions.org/wiki/Wikifunctions:Status to save people reporting bugs in the mobile interface.

Change #1010268 merged by jenkins-bot:

[operations/mediawiki-config@master] Be able to disable MobileFrontend and drop the secondary domain

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

i've been testing this on betacluster and i'd like to report a couple of minor things for us or the web team to consider.

horizontal page scrolls
the page scrolls horizontally because (it seems that) the header is larger than the viewport. it happens both when logged in or not. i also tried larger phones and the issue is still present.

iphone se 2nd gen

iphone 15 with xcode simulator

image.png (2×1 px, 382 KB)

ui zooms on focus
while trying to log in, when we focus an input field, the interface zooms in, as if the browser doesn't interpret the website as mobile website.

Jdforrester-WMF changed the task status from Open to In Progress.Mar 28 2024, 3:40 PM
Jdforrester-WMF claimed this task.
Jdforrester-WMF triaged this task as Low priority.

the page scrolls horizontally because (it seems that) the header is larger than the viewport. it happens both when logged in or not. i also tried larger phones and the issue is still present.

I flagged to James that right now Vector 2022 has a min width for what the web team is willing to support. This was introduced a while back when we had no need for a responsive Vector 2022 skin, but that has changed now. If you open a ticket asking us to support below that threshold I will happily get us to remove that (at the very least when the wgVectorResponsive flag is enabled).

ui zooms on focus

I believe this happens due to the current Vector font size (iOS will zoom on anything less than 16px - https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/). This will be fixed when the font size is increased to 16px which will be done as part of T345357.

the page scrolls horizontally because (it seems that) the header is larger than the viewport. it happens both when logged in or not. i also tried larger phones and the issue is still present.

I flagged to James that right now Vector 2022 has a min width for what the web team is willing to support. This was introduced a while back when we had no need for a responsive Vector 2022 skin, but that has changed now. If you open a ticket asking us to support below that threshold I will happily get us to remove that (at the very least when the wgVectorResponsive flag is enabled).

thank you! will file a task!

ui zooms on focus

I believe this happens due to the current Vector font size (iOS will zoom on anything less than 16px - https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/). This will be fixed when the font size is increased to 16px which will be done as part of T345357.

oooh, i didn't know that. thanks for sharing!