Maniphest T198663

Page preview margins should be consistent
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Jul 2 2018, 9:25 PM

Project Tags

Referenced Files

	F23856993: Screen Shot 2018-07-17 at 1.19.07 PM.png
	Jul 17 2018, 8:20 PM

	F23856992: Screen Shot 2018-07-17 at 1.18.55 PM.png
	Jul 17 2018, 8:20 PM

	F23689644: Screen Shot 2018-07-12 at 12.39.56 PM.png
	Jul 12 2018, 9:38 PM

	F23623607: Screen Shot 2018-07-11 at 11.42.26 AM.png
	Jul 11 2018, 6:49 PM

	F23623675: Screen Shot 2018-07-11 at 11.44.05 AM.png
	Jul 11 2018, 6:49 PM

	F23241910: above link.jpg
	Jul 2 2018, 9:25 PM

	F23241911: below link.jpg
	Jul 2 2018, 9:25 PM

Subscribers

View All 9 Subscribers

Description

Problem

For vertical page previews the margin between the bottom of the image and the first line of text is inconsistent, based on whether the page preview opens above or below the linked text. Here is a screenshot of me hovering over the same link, once where it's towards the top of the screen and once where it's towards the bottom:

Design notes

The desired amount of padding is 25px

QA

Visit http://reading-web-staging.wmflabs.org/wiki/Glacier?useformat=desktop
Trigger page previews on "ice sheets" for both orientations.

Developer notes

I tried to debug this a little bit but the inspector was acting a little funky with the $($0).trigger('mouseenter'); trick. It kept opening the page preview above the link even if the link was super close to the top of the screen.

This seems like an oversight.
The rule

.mwe-popups.mwe-popups-image-pointer .mwe-popups-extract { padding-top: 32px; }

can easily be changed to padding-top: 25px to give consistency.

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Tweak page previews margin for consistency	Jdlrobson	mediawiki/extensions/Popups	master	+3 -2

Customize query in gerrit

Related Objects

Mentioned Here: T192773: Entire page preview should be clickable
T192928: Popups leave a large margin between thumbnail and description when thumbnail is narrow

Event Timeline

• alexhollender_WMF created this task.Jul 2 2018, 9:25 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 2 2018, 9:25 PM

• alexhollender_WMF updated the task description. (Show Details)Jul 2 2018, 9:29 PM

• Niedzielski added a project: Page-Previews.Jul 3 2018, 1:21 PM

ovasileva triaged this task as Medium priority.Jul 3 2018, 1:58 PM

ovasileva moved this task from Backlog to Needs Analysis on the Page-Previews board.

ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog-Archived board.

Jdlrobson updated the task description. (Show Details)Jul 3 2018, 7:51 PM

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog-Archived board.

pmiazga set the point value for this task to 3.Jul 4 2018, 4:29 PM

We estimated it 3 points because we encounter many small issues related to how Page Previews looks like (margins, clickable areas, wrong positioning of the image). I would encourage to check the Page Previews rendering code and try to fix in the way we do not get more small issues like this one.

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog-Archived board.Jul 9 2018, 5:20 PM

ovasileva added a project: Readers-Web-Kanbanana-Board-Old.

Jdlrobson moved this task from Upcoming to Current Sprint (and resolved 2018-19 Q1) pre-milestone on the Web-Team-Backlog-Archived board.Jul 9 2018, 5:49 PM

Jdlrobson claimed this task.Jul 11 2018, 5:41 PM

Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 445235 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Popups@master] Tweak page previews margin for consistency

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

gerritbot added a project: Patch-For-Review.Jul 11 2018, 6:46 PM

@alexhollender:
After above change this is how they are looking:

Screen Shot 2018-07-11 at 11.44.05 AM.png (409×483 px, 224 KB)

Screen Shot 2018-07-11 at 11.42.26 AM.png (437×467 px, 188 KB)

Jdlrobson moved this task from Doing to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Jul 11 2018, 6:50 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Jul 11 2018, 9:15 PM

Jdlrobson subscribed.

@Jdlrobson is there extra space getting added somewhere? I'm measuring 30px instead of 25px.

Jdlrobson moved this task from Needs Code Review to Doing on the Readers-Web-Kanbanana-Board-Old board.Jul 12 2018, 3:05 PM

Change 445235 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Tweak page previews margin for consistency

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

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-07-17 (1.32.0-wmf.13)).Jul 12 2018, 8:00 PM

Jdlrobson updated the task description. (Show Details)Jul 12 2018, 9:30 PM

In T198663#4419758, @alexhollender wrote:

@Jdlrobson is there extra space getting added somewhere? I'm measuring 30px instead of 25px.

I'm measuring 25px. Want to check out http://reading-web-staging.wmflabs.org/wiki/Glacier?useformat=desktop ?
All popups are coded to have a 16px margin for both landscape and horizontal versions
e.g.

Screen Shot 2018-07-12 at 12.39.56 PM.png (585×355 px, 155 KB)

However there is also a negative margin on the top of the popup of -9px (.mwe-popups .mwe-popups-container)

When the image is on top, this negative margin increases the space between the image and extract by 9px to 25px;
This is not documented anywhere and I'm not sure if this is intentional.
So should it be 25px as it is now, or 16?

Jdlrobson assigned this task to • alexhollender_WMF.Jul 12 2018, 9:39 PM

Jdlrobson moved this task from Doing to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.

Macro wikilove: rock n roll