Quantity qualifier value box is not visible on smartphones
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	• Ramsey-WMF
	May 29 2019, 8:28 PM

Description

User story: N/A

We have this:
On the mobile Commons skin on a smartphone (ex: https://test-commons.m.wikimedia.org/wiki/File:Non-existing.JPG on mobile Safari on iPhone) , the interface for the quantity qualifier doesn't leave room to show the actual current number value (it shows the plus and minus buttons but not the textbox).

Additionally, the UI elements overlap with the X button used to remove that qualifier line

We want this:

All UI elements for quantity qualifiers should be visible and (ideally) not visually interfere with other UI elements.

Screenshots (if possible):

Acceptance Criteria:

Quantity value box is visible and functional on the mobile skin and the '+' increment button doesn't overlap with the X button

QA Results

AC	Status	Details
1	✅	T224624#5263941

Details

Subject	Repo	Branch	Lines +/-
Don't align leading qualifiers line in the middle	mediawiki/extensions/WikibaseMediaInfo	wmf/1.34.0-wmf.8	+1 -1
Wrap qualifier inputs on smaller screens	mediawiki/extensions/WikibaseMediaInfo	wmf/1.34.0-wmf.8	+16 -3
Don't align leading qualifiers line in the middle	mediawiki/extensions/WikibaseMediaInfo	master	+1 -1
Wrap qualifier inputs on smaller screens	mediawiki/extensions/WikibaseMediaInfo	master	+16 -3

Customize query in gerrit

Related Objects

Mentioned Here: T223916: Adding qualifiers results in the wrong button being focused

Event Timeline

• Ramsey-WMF created this task.May 29 2019, 8:28 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 29 2019, 8:28 PM

Want to take a whack at this one, @egardner ? :)

• Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.May 29 2019, 8:40 PM

egardner claimed this task.May 30 2019, 12:29 AM

• Ramsey-WMF raised the priority of this task from Medium to High.Jun 3 2019, 4:10 PM

I'd like to see the qualifier on the first line, and the value input on a second line. That would make both qualifier and value actually readable/editable. Let me know if this makes sense, otherwise I can do a quick sketch to illustrate what I mean, @egardner

Wound up mocking up a quick visual:

Screenshot 2019-06-03 12.47.40.png (774×455 px, 95 KB)

matthiasmullie claimed this task.Jun 4 2019, 11:48 AM

matthiasmullie moved this task from To Do to Doing on the Structured-Data-Team-Current-Work board.

@PDrouin-WMF: Are we also ok with the dropdown having the length of the input field + delete icon?
(because I'd otherwise have to subtract the icon's size from the dropdown's length, but that's defined in OOUI and could change beyond our control)

Screenshot 2019-06-06 10.31.56.png (480×560 px, 27 KB)

(if that's not acceptable, I can do it, no worries)

matthiasmullie moved this task from Doing to Code Review on the Structured-Data-Team-Current-Work board.Jun 6 2019, 9:48 AM

Change 514688 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@master] Wrap qualifier inputs on smaller screens

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

gerritbot added a project: Patch-For-Review.Jun 6 2019, 11:06 AM

Cparle moved this task from Code Review to Needs QA on the Structured-Data-Team-Current-Work board.Jun 10 2019, 2:34 PM

Change 514688 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Wrap qualifier inputs on smaller screens

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.10; 2019-06-18).Jun 10 2019, 3:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jun 10 2019, 3:10 PM

Hey Matthias! I missed your comment from last week. I like your treatment of the dropdown being the length of both the input field and delete icon, so for sure let's keep that.

One thing I would like fixed is:
The horizontal lines in Edit mode are centered between the Property dropdown and the input field. It looks odd, and the more qualifiers that get added, the more visually confusing it becomes. Make the horizontal line so it lines up with the Property dropdown (see the screenshot I mentioned above on June 3rd), it'll help make it more clear what qualifiers go with which properties.

Doesn't need fixing yet, but I want to document this:
It looks like the Make primary button might run into issues with longer labels. I don't think we need to change anything now, but it has me adding yet another reason for using Prominence icons vs buttons with long text labels to our list.

Lastly, this bug seems to have resurfaced (T223916):

Screenshot 2019-06-10 15.24.07.png (934×694 px, 80 KB)

Change 516600 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@master] Don't align leading qualifiers line in the middle

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

gerritbot added a project: Patch-For-Review.Jun 12 2019, 9:38 AM

matthiasmullie reassigned this task from matthiasmullie to Edtadros.Jun 12 2019, 4:10 PM

matthiasmullie subscribed.

Change 516600 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Don't align leading qualifiers line in the middle

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

Maintenance_bot removed a project: Patch-For-Review.Jun 13 2019, 11:10 AM

Test Result

Status: ✅ PASS
OS: iOS
Browser: Safari
Device: iPhone XS Max

Test Artifact(s):

✅ AC1: Quantity value box is visible and functional on the mobile skin and the '+' increment button doesn't overlap with the X button

IMG_A03053B18981-1.jpeg (2×1 px, 793 KB)

@Ramsey-WMF, This did pass on the physical device. However I tried it on the Chrome Devtools emulator, and it failed for an iPhone X and Galaxy note 2 and 3. This test could benefit from some browserstack testing on multiple devices. Let me know your thoughts.

Edtadros updated the task description. (Show Details)Jun 17 2019, 10:12 PM

Do we have browserstack testing set up as part of our QA systems already?

Edit to the edit: I realized my last test was on mobile test Commons, not beta, and the code in question isn't on test yet :) So, in short, I think the code on Beta works and we can move this to verify on production, but should still maybe consider browserstack testing.

• Ramsey-WMF moved this task from Needs QA to Verify on Production on the Structured-Data-Team-Current-Work board.Jun 18 2019, 5:53 AM

• Ramsey-WMF moved this task from To Do to Verify on Production on the Structured Data Engineering board.

Change 517977 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@wmf/1.34.0-wmf.8] Wrap qualifier inputs on smaller screens

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

Change 517978 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@wmf/1.34.0-wmf.8] Don't align leading qualifiers line in the middle

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

Change 517977 merged by Matthias Mullie:
[mediawiki/extensions/WikibaseMediaInfo@wmf/1.34.0-wmf.8] Wrap qualifier inputs on smaller screens

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

Change 517978 merged by Matthias Mullie:
[mediawiki/extensions/WikibaseMediaInfo@wmf/1.34.0-wmf.8] Don't align leading qualifiers line in the middle

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.8; 2019-06-04); removed MW-1.34-notes (1.34.0-wmf.10; 2019-06-18).Jun 20 2019, 11:00 AM

Maintenance_bot removed a project: Patch-For-Review.Jun 20 2019, 11:11 AM

Tested on production and works fine.

• Ramsey-WMF closed this task as Resolved.Jul 1 2019, 9:51 PM

	F29436077: Screenshot 2019-06-10 15.24.07.png
	Jun 10 2019, 7:32 PM

	F29359413: Screenshot 2019-06-06 10.31.56.png
	Jun 6 2019, 8:51 AM

	F29333521: Screenshot 2019-06-03 12.47.40.png
	Jun 3 2019, 4:50 PM

	F29596610: 6S-screenshot.PNG
	Jun 18 2019, 2:17 AM

Quantity qualifier value box is not visible on smartphonesClosed, ResolvedPublicBUG REPORTActions