Page MenuHomePhabricator

The image behind the intro dialog on mobile VE stretches strangely and makes the dialog look broken
Closed, ResolvedPublic

Description

The intro dialog on mobile VE looks very broken.

intro dialog.png (740×1 px, 112 KB)

Event Timeline

This looks fine if you're in a different aspect ratio. The image shrank when I dragged my browser window to be narrower and narrower, which makes me think the image is being stretched too much.

Screen Shot 2018-04-03 at 19.59.33.png (1×866 px, 125 KB)

Deskana renamed this task from The intro dialog on mobile VE looks very broken to The image behind the intro dialog on mobile VE stretches strangely and makes the dialog look broken.Apr 3 2018, 7:02 PM

Change 425918 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Fix layout of welcome dialog on smaller screens

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

Change 425918 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Fix layout of welcome dialog on smaller screens

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

Looks fixed to me on an iPhone 8, e.g. (screenshot from Chrome but tested on a real device):

Screen Shot 2018-04-13 at 09.50.17.png (1×1 px, 248 KB)

Should we shrink the image a bit on mobile to ensure the text shows up? On landscape on an iPhone 5 it's offscreen with no obvious call:

Screen Shot 2018-04-13 at 09.49.19.png (1×1 px, 238 KB)

Should we shrink the image a bit on mobile to ensure the text shows up? On landscape on an iPhone 5 it's offscreen with no obvious call […]

Yeah, I think so.

Change 429529 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] MWWelcomeDialog: Shrink the background image to 40% so the CTAs show

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

On iPhone 5s on landscape the text is still offscreen, also the button "Start Editing" and since there is no way to scroll down at this point, the user gets stuck on this screen.

Patch fixes landscape, but portrait is now overlapping:

image.png (644×341 px, 39 KB)

Change 444035 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] MWWelcomeDialog: Refactor splash image to allow resizing it

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

Change 444035 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] MWWelcomeDialog: Refactor splash image to allow resizing it

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

Change 429529 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] MWWelcomeDialog: Shrink the background image by 1/3 so the CTAs show

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