Page MenuHomePhabricator

Quantity qualifier value box is not visible on smartphones
Closed, ResolvedPublicBug

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

ACStatusDetails
1T224624#5263941

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 29 2019, 8:28 PM
Ramsey-WMF triaged this task as Normal priority.May 29 2019, 8:28 PM
Ramsey-WMF added a subscriber: egardner.

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
Ramsey-WMF raised the priority of this task from Normal to High.Jun 3 2019, 4:10 PM
PDrouin-WMF added a subscriber: PDrouin-WMF.EditedJun 3 2019, 4:12 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:

matthiasmullie moved this task from To Do to Doing on the Multimedia-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)

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

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

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

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

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

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

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

Edtadros reassigned this task from Edtadros to Ramsey-WMF.Jun 17 2019, 10:11 PM
Edtadros added a subscriber: Edtadros.

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

@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
Ramsey-WMF added a comment.EditedJun 18 2019, 2:02 AM

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.

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

Tested on production and works fine.

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