Page MenuHomePhabricator

Newcomer tasks: UI fixes to the Image thumbnail in the Post-edit dialog
Open, Needs TriagePublic

Description

This task tracks design fixes on the image thumbnail element of the post-edit dialog, which was found on both Desktop and Mobile versions.

Actual Desktop
Expected
Actual Mobile (no image example)
Expected

Issues to fix:

  • Image container should have border-radius:2px

[ii] Image container size on Desktop should always be 88x88px, and on Mobile 72x72px. even when there is no image.
[iii] When there is no image, the image placeholder icon should appear sized 40x40px centered in the image container with background-color: #EAECF0

Event Timeline

RHo created this task.Jun 18 2020, 7:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 18 2020, 7:38 PM
Tgr claimed this task.Jun 30 2020, 2:16 PM
Tgr added a comment.Jun 30 2020, 9:48 PM

[ii] Image container size on Desktop should always be 88x88px, and on Mobile 72x72px. even when there is no image.

For the placeholder that's easy enough to fix (I forgot that flex can override the constant width). What should happen when there is an image, and it is not square? Should we make it fill the box (ie. smaller dimension of the image equals box size) and center it? Fit the box? Something else?

RHo added a comment.Jul 1 2020, 10:33 AM

[ii] Image container size on Desktop should always be 88x88px, and on Mobile 72x72px. even when there is no image.

For the placeholder that's easy enough to fix (I forgot that flex can override the constant width). What should happen when there is an image, and it is not square? Should we make it fill the box (ie. smaller dimension of the image equals box size) and center it? Fit the box? Something else?

Could we re-use the same code (or else the same logic) that is used to show the square thumbnails on mobile search results list?


It looks like they apply scale image to fit-height or fit-width depending on whether the image is landscape or portrait by applying .list-thumb.list-thumb-y { background-size: auto 100%; } or .list-thumb.list-thumb-x { background-size: 100% auto; } respectively.

Change 608912 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the image thumbnail in the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608912

Tgr added a comment.Jul 1 2020, 4:58 PM

Yeah, they fill the box and then center the image. Probably when that was written background-size: cover wasn't available in iOS yet; today it's supported well enough for our purposes, I think.

Change 608912 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the image thumbnail in the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608912

Etonkovidova moved this task from QA to Design Review on the Growth-Team (Current Sprint) board.EditedJul 2 2020, 10:01 PM
Etonkovidova added a subscriber: Etonkovidova.

Checked in betalabs - below is the comparison with production (testwiki wmf.39) - the specs are in place - no issues found.
Notes:

  • the gap between "You've published an edit!" and the post-edit SE card seems bigger than in the mockups
  • there is un-related issue with displaying an image (it is the only available image for the testwiki set of SE article). I did not observe it in betalabs, but will check additionally.

Desktop

betalabsproduction

Mobile

betalabsproduction

For mobile the size and background color are according to the specs:

Thanks, image thumbs look much better now, esp. the placeholder image centering.

Checked in betalabs - below is the comparison with production (testwiki wmf.39) - the specs are in place - no issues found.
Notes:

  • the gap between "You've published an edit!" and the post-edit SE card seems bigger than in the mockups

Yes, this was filed as T255820 but seems not to have made the cut for current sprint...

  • there is un-related issue with displaying an image (it is the only available image for the testwiki set of SE article). I did not observe it in betalabs, but will check additionally.

Desktop

betalabsproduction

Mobile

betalabsproduction

For mobile the size and background color are according to the specs: