Page MenuHomePhabricator

on mobile we can't see the button to skip the tutorial
Closed, ResolvedPublicBUG REPORT

Description

on mobile we can't see the button to skip the tutorial and the swipe gesture is not working

image.png (1×463 px, 96 KB)

Event Timeline

Jpita changed the subtype of this task from "Task" to "Bug Report".Sep 11 2020, 12:15 PM
Pginer-WMF triaged this task as Medium priority.Sep 11 2020, 2:50 PM
Pginer-WMF moved this task from Backlog to Mobile editor on the SectionTranslation board.

Change 628871 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXQuickTutorial: Fix non visible skip buttons

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

still being cut on iphone 5/SE

image.png (1×574 px, 71 KB)

putting back into dev, @ngkountas let me know if that's ok

@Pginer-WMF what should happen on smaller phones?
I think shrinking the image is the easiest approach instead of touching the text

@Pginer-WMF what should happen on smaller phones?
I think shrinking the image is the easiest approach instead of touching the text

Yes. The problem seem to occur when the image represents a big part of the screen. We can limit the size of the image in those cases. One possible approach would be to set a max-height limit for it of 25% of the vertical viewport. In CSS:

max-height: 25vh;

In this way the image remains the same in larger mobile devices while adapting to smaller ones. Does this approach make sense, @ngkountas?

Other considerations for future tickets:

As a safeguard for very very small screens we could also follow one of these approaches:

  • Make sure the content becomes scrollable if it does not fit in the viewport.
  • Make the region with the main button to be sticky to the bottom of the viewport. So in the worst case text would be hidden behind it. Which is not good, but better than not being able to move forward.

The text will also get shorter in the future since we gor good suggestions for simplifying it fom a volunteer UX Writter, but that will be part of a separate task.

Change 633361 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SX Quick Tutorial: Fix invisible buttons in small screens

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

@Pginer-WMF I agree on every point you made. Fixed issues according to these points in related patch.

Change 633361 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SX Quick Tutorial: Fix invisible buttons in small screens

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