on mobile we can't see the button to skip the tutorial and the swipe gesture is not working
Description
Details
Subject | Repo | Branch | Lines +/- | |
---|---|---|---|---|
SX Quick Tutorial: Fix invisible buttons in small screens | mediawiki/extensions/ContentTranslation | master | +11 -6 |
Related Objects
Event Timeline
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
@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