Page MenuHomePhabricator

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


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:
    read mode.png (478×839 px, 93 KB)
  • Mobile statements edit mode looks like this:
    edit mode.png (648×839 px, 100 KB)

Event Timeline

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

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

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

Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.

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

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?

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

Hey @matthiasmullie -

This mostly works for me with two exceptions:

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

IMG_2747.PNG (2×1 px, 231 KB)

  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:

IMG_2748.PNG (2×1 px, 347 KB)

  • tapped out of the IP notification:

IMG_2749.PNG (2×1 px, 198 KB)

  • after manually zooming back out:

IMG_2750.PNG (2×1 px, 195 KB)

The first (wikidata logo) has a patch already:

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.

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

Verified on production.