[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Page MenuHomePhabricator
Create Task
Maniphest T255819

Newcomer tasks: UI fixes to the Image thumbnail in the Post-edit dialog
Closed, ResolvedPublic
Actions

Assigned To
Tgr
Authored By
RHo
Jun 18 2020, 7:38 PM
Tags
Referenced Files
F31915508: image.png
Jul 3 2020, 11:07 AM
F31915510: image.png
Jul 3 2020, 11:07 AM
F31914637: Screen Shot 2020-07-02 at 1.30.32 PM.png
Jul 2 2020, 10:01 PM
F31914639: Screen Shot 2020-07-02 at 2.21.45 PM.png
Jul 2 2020, 10:01 PM
F31914670: Screen Shot 2020-07-02 at 2.00.32 PM.png
Jul 2 2020, 10:01 PM
F31914672: Screen Shot 2020-07-02 at 2.05.17 PM.png
Jul 2 2020, 10:01 PM
F31914641: Screen Shot 2020-07-02 at 1.34.04 PM.png
Jul 2 2020, 10:01 PM
F31914688: Screen Shot 2020-07-02 at 2.55.02 PM.png
Jul 2 2020, 10:01 PM
View All 16 Files
Subscribers
Aklapper
Etonkovidova
MMiller_WMF
RHo

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
image.png (449×564 px, 64 KB)
Expected
image.png (788×1 px, 190 KB)
Actual Mobile (no image example)
image.png (224×682 px, 17 KB)
Expected
image.png (330×990 px, 23 KB)

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

Details

SubjectRepoBranchLines +/-
Newcomer tasks: UI fixes to the image thumbnail in the post-edit dialogmediawiki/extensions/GrowthExperimentsmaster+16 -7
Customize query in gerrit

Related Objects
Search...

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
RHo mentioned this in T245790: Newcomer tasks: post-edit dialog.Jun 18 2020, 8:07 PM
Aklapper removed a subscriber: Growth-Team.Jun 19 2020, 12:54 PM
MMiller_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Jun 25 2020, 12:53 AM
Tgr claimed this task.Jun 30 2020, 2:16 PM
Tgr moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.
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
In T255819#6269683, @Tgr wrote:

[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?

image.png (1×908 px, 327 KB)

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.

gerritbot added a comment.Jul 1 2020, 4:55 PM

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

gerritbot added a project: Patch-For-Review.Jul 1 2020, 4:55 PM
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.

Tgr moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Jul 1 2020, 5:21 PM
gerritbot added a comment.Jul 2 2020, 3:03 AM

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

Maintenance_bot removed a project: Patch-For-Review.Jul 2 2020, 3:10 AM
ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.40; 2020-07-07).Jul 2 2020, 4:00 AM
Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Jul 2 2020, 1:38 PM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.EditedJul 2 2020, 10:01 PM
Etonkovidova subscribed.

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
Screen Shot 2020-07-02 at 1.30.32 PM.png (413×521 px, 57 KB)
Screen Shot 2020-07-02 at 2.21.45 PM.png (500×743 px, 124 KB)
Screen Shot 2020-07-02 at 1.34.04 PM.png (421×530 px, 47 KB)
Screen Shot 2020-07-02 at 2.17.50 PM.png (454×603 px, 62 KB)

Mobile

betalabsproduction
Screen Shot 2020-07-02 at 2.00.32 PM.png (425×409 px, 53 KB)
Screen Shot 2020-07-02 at 2.50.31 PM.png (674×388 px, 111 KB)
Screen Shot 2020-07-02 at 2.01.52 PM.png (458×411 px, 40 KB)
Screen Shot 2020-07-02 at 2.05.17 PM.png (676×384 px, 70 KB)

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

Screen Shot 2020-07-02 at 2.55.02 PM.png (667×368 px, 73 KB)

RHo moved this task from Design Review to Needs PM Review on the Growth-Team (Sprint 0 (Growth Team)) board.Jul 3 2020, 11:07 AM

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

image.png (920×1 px, 162 KB)
image.png (1×760 px, 94 KB)
In T255819#6275865, @Etonkovidova wrote:

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
Screen Shot 2020-07-02 at 1.30.32 PM.png (413×521 px, 57 KB)
Screen Shot 2020-07-02 at 2.21.45 PM.png (500×743 px, 124 KB)
Screen Shot 2020-07-02 at 1.34.04 PM.png (421×530 px, 47 KB)
Screen Shot 2020-07-02 at 2.17.50 PM.png (454×603 px, 62 KB)

Mobile

betalabsproduction
Screen Shot 2020-07-02 at 2.00.32 PM.png (425×409 px, 53 KB)
Screen Shot 2020-07-02 at 2.50.31 PM.png (674×388 px, 111 KB)
Screen Shot 2020-07-02 at 2.01.52 PM.png (458×411 px, 40 KB)
Screen Shot 2020-07-02 at 2.05.17 PM.png (676×384 px, 70 KB)

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

Screen Shot 2020-07-02 at 2.55.02 PM.png (667×368 px, 73 KB)

MMiller_WMF closed this task as Resolved.Feb 28 2021, 11:49 PM
MMiller_WMF subscribed.

Thank you!

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and 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 · Credits