Page MenuHomePhabricator

Remove spacing between list items
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
ovasileva
Jun 27 2017, 12:21 PM
Referenced Files
F8642047: Screen Shot 2017-07-07 at 10.38.06.png
Jul 7 2017, 9:40 AM
F8642052: Screen Shot 2017-07-07 at 10.38.23.png
Jul 7 2017, 9:40 AM
F8626205: image.png
Jul 5 2017, 9:16 PM
F8626218: image.png
Jul 5 2017, 9:16 PM
F8626216: image.png
Jul 5 2017, 9:16 PM
F8626207: image.png
Jul 5 2017, 9:16 PM
F8626221: image.png
Jul 5 2017, 9:16 PM
F8626212: image.png
Jul 5 2017, 9:16 PM

Description

Ordered lists and definition lists will not include spacing between the lead and the first item of the list, or between individual list items. (spacing will be removed as in T168332#3369896)

Examples:
Go to https://en.wikipedia.beta.wmflabs.org/wiki/Earth, and hover over "planet". For the "planet" preview, the spacing between "...stellar remnant that" and "is massive enough..." will be removed

Screen Shot 2017-06-22 at 4.41.32 PM.png (278×361 px, 60 KB)

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Category:Page_previews_debug and hover over "definition list"
For the definition list below, remove spacing (padding/margins) between first paragraph and between each list item

Screen Shot 2017-06-27 at 2.29.31 PM.png (305×407 px, 41 KB)

Acceptance criteria

  • No margins/paddings on lists in previews
  • margins/paddings of lists are preserved outside previews.

Testing criteria

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Category:Page_previews_debug and hover over the following items:

  • Definition list
  • Intro of planet articles
  • Ordered list
  • List 1

Ensure preview displays list and does not cut off the bottom items of the list

Event Timeline

I set up a category to play around with ordered and unordered lists and noticed the following:

preview for List1:

Screen Shot 2017-06-27 at 2.27.08 PM.png (169×377 px, 25 KB)

preview for planet:

Screen Shot 2017-06-27 at 2.26.20 PM.png (251×342 px, 47 KB)

I don't see anything in the wikitext that would make these different

Not seeing in description list:

Screen Shot 2017-06-27 at 2.29.31 PM.png (305×407 px, 41 KB)

ovasileva raised the priority of this task from Medium to High.Jun 27 2017, 2:27 PM
ovasileva moved this task from Incoming to Upcoming on the Web-Team-Backlog board.

As I mentioned in an earlier task comment this seems tricky with how we currently cut off previews.

Does anybody have an idea of how we'd actually do this without introducing a monospace font? :)

Jdlrobson updated the task description. (Show Details)
phuedx set the point value for this task to 1.

As I mentioned in an earlier task comment this seems tricky with how we currently cut off previews.

Does anybody have an idea of how we'd actually do this without introducing a monospace font? :)

We answered this question during grooming/estimation: @Nirzar has approved removing the vertical margins from list items in previews. They should occupy a line, meaning that our truncation mechanism will still work.

Change 362454 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/Popups@master] Enforce no top&bottom margins on lists on page previews

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

Change 362454 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Enforce no top&bottom margins on lists on page previews

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

👍

With my local PP client pointed at the Beta Cluster's RESTBase instance, I see the following:

Screen Shot 2017-07-03 at 14.43.57.png (245×357 px, 30 KB)

Screen Shot 2017-07-03 at 14.47.08.png (246×390 px, 27 KB)

You'll note that the text truncation mechanism is working correctly and that there's no over-/underflow of the last list element.

@phuedx, @pmiazga added test plan. A question though, in https://en.wikipedia.beta.wmflabs.org/wiki/Category:Page_previews_debug, the definition list is the only one that displays the correct preview.

Also, the preview looks great for https://en.wikipedia.beta.wmflabs.org/wiki/Planet, but not for https://en.wikipedia.beta.wmflabs.org/wiki/Intro_of_planet_articles, not sure what's going on.

... A question though, in https://en.wikipedia.beta.wmflabs.org/wiki/Category:Page_previews_debug, the definition list is the only one that displays the correct preview.

It looks like the changes aren't propagating to RESTBase on the Beta Cluster /cc @mobrovac @Pchelolo @GWicke

@phuedx I have just deployed RESTBase in BetaCluster, so it matches the latest code deploy.

^ @ABorbaWMF: Is that a thumbs up or a thumbs down?

@phuedx I have just deployed RESTBase in BetaCluster, so it matches the latest code deploy.

It seems this still isn't functioning correctly? Note the middle four screenshots. That said, if the issues is just restbase acting up on the beta cluster, with all the other examples being okay, I suppose we're done?

I updated the "Intro of planet artices" page at 9:33 AM, 6th July 2017 (UTC) and the RESTBase response hasn't updated after 16 minutes [0].

[0]
{
  "title": "Intro of planet articles",
  "displaytitle": "Intro of planet articles",
  "pageid": 186832,
  "extract": "A planet is an astronomical body orbiting a star or stellar remnant that",
  "extract_html": "<p>A <b>planet</b> is an astronomical body orbiting a star or stellar remnant that</p>",
  "lang": "en",
  "dir": "ltr",
  "timestamp": "2017-07-03T18:37:12Z"
}

/cc @mobrovac

@ABorbaWMF unrelated question: what browser is that? the outline for popover is missing. we use double shadow to create the outline.. if that's a very old browser then it's fine but if it's latest safari then I'm worried about the border :(

@Nirzar I was using crossbrowsertesting and Safari 10

@ABorbaWMF unrelated question: what browser is that? the outline for popover is missing. we use double shadow to create the outline.. if that's a very old browser then it's fine but if it's latest safari then I'm worried about the border :(

Confirmed. That's Safari 10+ – I see it in Safari 10.1.1 on macOS Sierra (10.12.5).

@Jdlrobson created T169912 to track not working beta cluster as it seems unrelated to this. Will have a look today.

Sorry for the hold-up folks, RB in Beta works as expected now.

❤️

Null-editing the pages in the Page Previews debug category seems to have resolve the issue with the middle two articles:

Screen Shot 2017-07-07 at 10.38.06.png (236×440 px, 35 KB)

and

Screen Shot 2017-07-07 at 10.38.23.png (245×337 px, 25 KB)

@ovasileva: Over to you!

Whoo! All done! Lists look wonderful.