Page MenuHomePhabricator

Left-justify text in mobile survey view
Closed, ResolvedPublic

Assigned To
Authored By
awight
Jun 25 2020, 2:01 PM
Referenced Files
F34690709: image.png
Oct 16 2021, 1:00 AM
F34690697: image.png
Oct 16 2021, 1:00 AM
F34690681: image.png
Oct 16 2021, 1:00 AM
F34690688: image.png
Oct 16 2021, 1:00 AM
F34690678: image.png
Oct 16 2021, 1:00 AM
F34690671: image.png
Oct 16 2021, 1:00 AM
F34690690: image.png
Oct 16 2021, 1:00 AM
F34690685: image.png
Oct 16 2021, 1:00 AM

Description

Currently, the mobile view centers text:

image.png (559×316 px, 41 KB)

In this case, left-justifying all text like we do for the desktop view would improve readability. Is this true for other cases as well? We'd like to change the style globally.

QA steps

  1. Visit http://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=internal+multiple+answer+example+survey&mobileaction=toggle_view_mobile
  2. The page should be in mobile mode, and the survey text should be left aligned (not center aligned)

Event Timeline

I assume that you if you use it with an RTL language you would have it all right-aligned (including checkboxes), correct?

Change 730213 had a related patch set uploaded (by Mepps; author: Mepps):

[mediawiki/extensions/QuickSurveys@master] Justify checkbox labels in survey-container

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

Change 730213 merged by jenkins-bot:

[mediawiki/extensions/QuickSurveys@master] Set text-align to initial in survey-panel so that text is not centered

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

@mepps A process nit, this should've been moved to code review again when the patch was ready yesterday, I saw it because we chat and I was already subscribed to the patch but other reviewers wouldn't have noticed it was up to re-review.

The patch is also missing QA steps, which I believe we mentioned in the last phab meeting that it would be done by the person who worked on the patch. That way they are also helpful for the reviewers in case they want to check too. I'll add something to the description for the test steps and move it to QA.

Jhernandez added subscribers: Madalina, ARamirez_WMF.

I've added a couple of QA steps, now that we're running into this I'm thinking we haven't defined browsers or environments the test should happen in. Is this something we already have? cc/ @ARamirez_WMF @Madalina @mepps

@Jhernandez,

I have verified the information listed in the ticket Description has been implemented and is working successfully at the following url: http://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=internal+multiple+answer+example+survey&mobileaction=toggle_view_mobile


Compatibility Testing was performed on the following:
Desktop  – Chrome version 94 Windows 10 / Microsoft Edge version 94 Windows 10 / Firefox version 93 Windows 10 / Opera version 80.0.4170.40 Windows 10 / Safari version 14 Mac OS Big Sur.

Mobile Devices – Android version 11 Samsung FE20 phone / Android version 8.1 Galaxy A10 tablet / iOS version 15 iPad Pro 5th generation / iOS version 15 iPhone 13 Pro Max.


Below are screenshots of new code changes on various devices and browsers:
Portrait and Landscape mode screenshots for iOS version 15.0 iPad Pro 5th generation / Portrait Mode (NOTE: please disregard blurriness of screenshots, this is due to device simulation and is not related to the code changes):

image.png (840×634 px, 448 KB)
image.png (657×829 px, 385 KB)


Portrait and Landscape mode screenshots for iOS 15.0 iPhone 13 Pro Max phone:

image.png (871×427 px, 213 KB)
image.png (468×796 px, 235 KB)


Screenshot from Desktop PC with screen resized:

image.png (929×485 px, 141 KB)


Portrait and Landscape mode screenshots for Android version 8.1 Galaxy A10 tablet:

image.png (763×452 px, 304 KB)
image.png (485×715 px, 228 KB)


Portrait and Landscape mode screenshots for Android version 11 Samsung FE20 phone:

image.png (860×438 px, 244 KB)
image.png (819×1 px, 180 KB)


Screenshot from Safari version 14 Mac OS Big Sur:

image.png (897×1 px, 633 KB)


Screenshot from Microsoft Edge version 94 Windows 10:

image.png (896×1 px, 497 KB)


Screenshot from Chrome version 94 Windows 10:

image.png (897×1 px, 641 KB)


Screenshot from Firefox version 93 Windows 10:

image.png (1×1 px, 276 KB)


Screenshot from Opera version 80.0.4170.40 Windows 10:

image.png (1×1 px, 326 KB)

Madalina claimed this task.

Looks good to me