Left-justify text in mobile survey view
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	awight
	Jun 25 2020, 2:01 PM

Description

Currently, the mobile view centers text:

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

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

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Set text-align to initial in survey-panel so that text is not centered	mediawiki/extensions/QuickSurveys	master	+5 -1

Customize query in gerrit

Event Timeline

awight created this task.Jun 25 2020, 2:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 25 2020, 2:01 PM

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

Jdlrobson added a project: Web-Team-Backlog-Archived (Tracking).Jun 25 2020, 9:24 PM

Jdlrobson moved this task from Not triaged to Configuration on the QuickSurveys board.Apr 14 2021, 6:34 PM

ovasileva moved this task from Untriaged to Untag on the Web-Team-Backlog-Archived (Tracking) board.Sep 30 2021, 8:45 PM

LGoto removed a project: Web-Team-Backlog-Archived (Tracking).Sep 30 2021, 9:17 PM

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

gerritbot added a project: Patch-For-Review.Oct 12 2021, 2:59 PM

• mepps subscribed.Oct 12 2021, 3:04 PM

This comment was removed by • mepps.

• mepps added a project: Trust and Safety Tools Team Backlog (Kanban).Oct 12 2021, 3:11 PM

• mepps moved this task from 🎬 Ready to 🔍 Review/Feedback on the Trust and Safety Tools Team Backlog (Kanban) board.

• mepps added a subscriber: Trust and Safety Tools Team Backlog.

• mepps removed a subscriber: Trust and Safety Tools Team Backlog.

AAlhazwani-WMF subscribed.Oct 13 2021, 8:24 AM

ECohen_WMDE unsubscribed.Oct 14 2021, 10:34 AM

• Jhernandez triaged this task as Medium priority.Oct 14 2021, 5:59 PM

• Jhernandez moved this task from 🔍 Review/Feedback to 💻 In Progress on the Trust and Safety Tools Team Backlog (Kanban) board.

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

Maintenance_bot removed a project: Patch-For-Review.Oct 15 2021, 3:10 PM

@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.

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):