Page MenuHomePhabricator

[M] Text input for depicts on mobile web: Dropdown shows label; Placeholder text in search field is too long
Closed, ResolvedPublic

Description

On mobile the input to add a depict statement has the dropdown with a label instead of the three dots. The placeholder text is also too long for mobile. Is it possible to switch the dropdown to the 3 dots and change the placeholder text to "Search to add items" and delete the examples in parentheses?

During development, please test the following:

  • Test this feature while logged in AND logged out
  • Test this feature on at least one mobile browser
  • Test that this feature works on the file page AND the Add Data step on UploadWizard (if applicable, some features only exist on one or the other)

QA Results - Beta

ACStatusDetails
1T254194#6208391
2T254194#6208391
3T254194#6208391

Event Timeline

mwilliams created this task.Jun 1 2020, 8:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 1 2020, 8:42 PM
Aklapper renamed this task from Bug with the text input for depicts on mobile web to Text input for depicts on mobile web: Dropdown shows label; Placeholder text in search field is too long.Jun 1 2020, 8:52 PM

This is a good one for estimation in this week's session.

CBogen renamed this task from Text input for depicts on mobile web: Dropdown shows label; Placeholder text in search field is too long to [M] Text input for depicts on mobile web: Dropdown shows label; Placeholder text in search field is too long.Jun 3 2020, 4:28 PM
egardner added a comment.EditedJun 3 2020, 4:58 PM

@mwilliams shortening the message text to remove the examples is easily done. However, on small screens there will still be overlap with the "from Wikidata" text that is right-aligned. On phone-sized screens I don't think we can have two strings of text sharing a single-line input box this way.

What do you think about simply hiding the "from Wikidata" text on small screens? This would help ensure that "search to add items" is always clearly legible, no matter the screen size. Here's an example of what I'm proposing, at roughly iPhone 6 screen size:

Also, I've added a text-truncation rule in CSS to use an ellipsis when the label text cannot fit in the drop-down to the right. Unfortunately, I don't think I can just make it look the same as what you see on desktop (where the only contents of the dropdown are "..." when not active). The underlying OOUI widgets are deliberately designed to behave differently on the mobile skin and I don't think it's a good idea to completely break that here. Let me know if you think this is an ok workaround.

@egardner Hiding "from Wikidata" works for me. With the drop down, probably forgetting something obvious, but do you know why the dropdown behaves differently on mobile? Breaking OOUI is not the move lets not do that but still concerned how much space the dropdown takes up when our original hope with the "..." was for it to be less noticeable and out of the way.

egardner added a comment.EditedJun 3 2020, 5:45 PM

There's actually a completely different set of markup that is used in OOUI's dropdown widget based on whether or not the mobile skin is present. I assume that the reason for this is to use custom div and span elements on the desktop (which look nicer than the built-in select and option styles you get from most browsers), but to still use native elements on mobile (allowing browsers like iOS Safari to handle option selection in the native way – in that case, the slot-machine style UI you get).

Attempting to force "desktop" behavior on this element at mobile sizes gives you a broken layout of dropdown options:

We can customize OOUI widgets in a lot of ways but getting around this issue would involve re-writing a lot of the dropdown widget from scratch, and potentially losing a lot of optimizations, etc. that have gone into it.

I definitely think we should try to solve this problem differently in the new UI framework we're preparing to start, but for the time being I think changing this is not worth the effort.

I'm going to see if there's any other configuration I can use to ensure the "..." icon is always used, but if not we may need to live with a different solution.

@egardner Thanks for the context! Makes sense to at least fix it to be usable for the time being and we can revisit with the new UI framework.

Change 602134 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Fix crowded item input on small screens

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

Change 602134 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Fix crowded item input on small screens

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

Ramsey-WMF added a subscriber: egardner.

This should be testable on Beta.

Test Result - Beta

Status: ❓Please Review
Environment: beta
OS: macOS Catalina
Browser: Chrome, Safari
Device: MBP, iPhone 11 Max Pro
Emulated Device: Galaxy S5, iPhone 6/7/8

Test Artifact(s):

QA steps

Verify that the placeholder text reads "Search to add items" and delete the examples in parentheses.
Note: Based on T254194#6189994 I'm assuming that the ellipsis on the pulldown menu was not implemented.

✅ AC1: Test this feature while logged in AND logged out
See screenshots below.
❓ AC2: Test this feature on at least one mobile browser
See screenshots below. NOTE, the missing magnifying glass on the File Page
✅ AC3: Test that this feature works on the file page AND the Add Data step on UploadWizard (if applicable, some features only exist on one or the other)
See screenshots below.

Logged OutEmulated - Galaxy S5Emulated - iPhone 6/7/8Physical - iPhone 11 Max Pro
BrowserChromeChromeSafari
File Page
❓The magnifying glass icon is missing
Logged InEmulated - Galaxy S5Emulated - iPhone 6/7/8Physical - iPhone 11 Max Pro
BrowserChromeChromeSafari
File Page
UploadWizard
Edtadros updated the task description. (Show Details)Jun 10 2020, 12:55 AM

Thanks @Edtadros - moving to "Verify in production".

I did more testing on a real device - iPhone 6s - and below are my notes.

Notes: - If the issues below will be triaged as bugs, let me know to file separate phab tasks.

(1)

  • there is noticeable difference between testing in a browser mobile emulator (e.g. Chrome) and on a real device. I tested on iPhone 6s (screen resolution 1334 x 750; I double checked that all settings for increased fonts or smth similar are default ) - there were several issues that are not present in the browser emulator:
    • the labels are placed more tightly
    • the placeholder text is not fully displayed
    • "Custom" label is not aligned with the check mark; also the added statements are not quite aligned

(2) After adding "Some value" and "No value" - the placeholder text gets truncated further to "Sea..." and "Custom" becomes "Cust".

Ramsey-WMF closed this task as Resolved.Jun 11 2020, 10:18 PM

I've noted the iPhone 6s issues that Elena mentioned above, and tested on my own iPhone SE (which is probably the minimally supported iOS device now). Things look good enough on the SE (the default text is truncated to "Search to add it..."). We're probably not going to get it perfect across every resolution, so this is good enough.