Page MenuHomePhabricator
Create Task
Maniphest T221228

Depicts widget has a couple of visual quirks on mobile/small screens
Closed, ResolvedPublic
Actions

Description

Tested on iOS/mobile Safari with a 375x812px viewport

We have this

Depicts widget shows up just fine and mostly works as expected, but there are a couple of visual quirks:

  • title ("Items portrayed in this file") and Q123-link overlap
  • statement input field placeholder ("search to add items (house cat, mountain, Taj Mahal, etc.)") and label ("from Wikidata") overlap
  • too much content on statement line: statement name + Q123-link + "Mark as promiment" is too wide and extends beyond the container

We want this

We want things to look nice & clean on smaller screens.

Acceptance Criteria

  • Mobile statements read mode looks like this:
  • Mobile statements edit mode looks like this:

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/WikibaseMediaInfomaster+15 -0StatementWidget: Adjust styles to handle small displays better
Customize query in gerrit

Related Objects
Search...

Event Timeline

matthiasmullie created this task.Apr 17 2019, 1:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 17 2019, 1:07 PM
matthiasmullie added a subscriber: • PDrouin-WMF.Apr 17 2019, 1:08 PM

@PDrouin-WMF might have ideas on how to fix some of these things.

matthiasmullie mentioned this in T221229: Statements submitted on mobile don't show up until refresh.Apr 17 2019, 1:10 PM
• PDrouin-WMF added a subscriber: • Ramsey-WMF.Apr 17 2019, 2:18 PM

@matthiasmullie took a look on Beta on my iPhone, and wow. Yes. This needs some work. Will talk with @Ramsey-WMF about how best to prioritize this, and I'll look into some possibilities.

• PDrouin-WMF added a project: SDC Design.Apr 17 2019, 2:20 PM
• PDrouin-WMF moved this task from Backlog 📚 to Next up 📓 on the SDC Design board.
• PDrouin-WMF moved this task from Next up 📓 to Doing 📝 on the SDC Design board.Apr 17 2019, 2:31 PM
egardner added a subscriber: egardner.Apr 17 2019, 4:39 PM
• PDrouin-WMF moved this task from Doing 📝 to Next up 📓 on the SDC Design board.Apr 18 2019, 12:50 PM
• Ramsey-WMF added a parent task: T221658: Poor/non-functional experience on mobile [Epic].Apr 23 2019, 4:45 PM
gerritbot added a comment.Apr 23 2019, 11:23 PM

Change 506028 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Adjust StatementWidget css to handle small displays better

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

gerritbot added a project: Patch-For-Review.Apr 23 2019, 11:23 PM
egardner added a project: Structured-Data-Team-Current-Work.Apr 23 2019, 11:24 PM
egardner moved this task from To Do to Doing on the Structured-Data-Team-Current-Work board.
egardner added a subtask: T218951: Make button placement for Captions consistent with Depicts/statements.Apr 23 2019, 11:27 PM
egardner mentioned this in T218951: Make button placement for Captions consistent with Depicts/statements.Apr 23 2019, 11:31 PM
• PDrouin-WMF moved this task from Next up 📓 to Doing 📝 on the SDC Design board.Apr 24 2019, 12:54 PM
• Ramsey-WMF triaged this task as Medium priority.Apr 24 2019, 6:25 PM
• Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.
• PDrouin-WMF moved this task from Doing 📝 to Done/Handed off 📮 on the SDC Design board.Apr 25 2019, 2:19 PM
egardner moved this task from Doing to Code Review on the Structured-Data-Team-Current-Work board.Apr 30 2019, 7:51 PM
gerritbot added a comment.May 1 2019, 12:36 AM

Change 506028 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] StatementWidget: Adjust styles to handle small displays better

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.4; 2019-05-07).May 1 2019, 1:00 AM
matthiasmullie added a comment.May 2 2019, 11:46 AM

Eric's patch fixes the input field.
Does anyone have suggestions on how to make the title & statements a little more appealing on small screens?

• PDrouin-WMF added a comment.May 2 2019, 11:48 AM

@matthiasmullie did you see the quick mockups I did here: T221658?

matthiasmullie added a comment.May 2 2019, 12:12 PM

Nope, I hadn't. Guess we don't need any more suggestions - they answer the remaining questions :)

• Ramsey-WMF moved this task from To Do to Doing on the Structured Data Engineering board.May 6 2019, 4:55 PM
matthiasmullie claimed this task.May 10 2019, 12:33 PM
matthiasmullie updated the task description. (Show Details)May 16 2019, 10:09 AM
matthiasmullie mentioned this in T221658: Poor/non-functional experience on mobile [Epic].May 16 2019, 10:12 AM
matthiasmullie moved this task from Code Review to Needs QA on the Structured-Data-Team-Current-Work board.
matthiasmullie reassigned this task from matthiasmullie to • PDrouin-WMF.May 16 2019, 10:15 AM

Assigning to @PDrouin-WMF to verify this is fixed.

• PDrouin-WMF added a comment.May 16 2019, 2:53 PM

Hey @matthiasmullie -

This mostly works for me with two exceptions:

  1. The depicts values don't include the Wikidata barcode:

  1. There is some kind of bug after adding a value. When I'm in edit mode and I have selected an auto-suggested value, when it adds, my iOS browser is zoomed in. Not sure what's causing that. I'm not logged in. I have to tap on the IP notification and then manually zoom back out to see the whole panel again. Here are some screenshots:
  • once a value is added, it zooms out automatically:

  • tapped out of the IP notification:

  • after manually zooming back out:

matthiasmullie added a comment.May 16 2019, 3:44 PM

The first (wikidata logo) has a patch already: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseMediaInfo/+/510721

The second: zooming into input fields is default iOS behavior, and there's not really any great way to prevent that:

I'm afraid there's not much we can do there.

• PDrouin-WMF added a comment.May 16 2019, 3:51 PM

Thanks for the updates, and especially for explaining that default iOS behavior. Consider this ticket confirmed completely then!

Maintenance_bot removed a project: Patch-For-Review.May 22 2019, 3:29 PM
• Ramsey-WMF closed subtask T218951: Make button placement for Captions consistent with Depicts/statements as Resolved.May 23 2019, 6:46 PM
• Ramsey-WMF moved this task from Needs QA to Verify on Production on the Structured-Data-Team-Current-Work board.May 23 2019, 11:34 PM
• Ramsey-WMF closed this task as Resolved.Jun 7 2019, 10:37 PM

Verified on production.

Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL