Page MenuHomePhabricator

Prevent thumbnails from stacking below infobox
Closed, DeclinedPublic

Assigned To
None
Authored By
Jdrewniak
May 4 2018, 1:41 PM
Referenced Files
F18657203: Artboard.jpg
Jun 1 2018, 9:56 PM
F18054628: taiwan-original.jpg
May 7 2018, 4:58 PM
F18047293: Screen Shot 2018-05-07 at 15.43.19.png
May 7 2018, 1:47 PM
F18047297: Screen Shot 2018-05-07 at 15.43.24.png
May 7 2018, 1:47 PM
F18047283: Screen Shot 2018-05-07 at 15.43.07.png
May 7 2018, 1:47 PM
F17662399: Screen Shot 2018-05-04 at 16.36.48.png
May 4 2018, 2:38 PM
F17658072: Screen Shot 2018-05-04 at 16.13.15.png
May 4 2018, 2:16 PM
F17658012: Screen Shot 2018-05-04 at 16.13.33.png
May 4 2018, 2:16 PM
Tokens
"Love" token, awarded by Volker_E.

Description

With the merger of T189688 article content now flows next to the infobox on the Minvera skin instead of below it. However, thumbnails that appeared beside a peice of content now appear below the infobox.

taiwan-original.jpg (3×604 px, 720 KB)
Screen Shot 2018-05-04 at 14.57.08.png (663×175 px, 147 KB)
Screen Shot 2018-05-04 at 14.57.21.png (503×350 px, 240 KB)
Minerva (before change)Minvera (current)Vector

It's debatable whether this is an issue, because the Vector skin clears thumbnails in the same way.

The thumbnails get pushed below the infobox because both elements have float: right; CSS rules and the thumbnails have the clear: right; rule, which means they don't allow any floated elements to appear on their right side (i.e. the clear:right makes sure the thumbnail is always at the right edge of the container).

My hypothesis is that it's better to remove the clear rule from the thumbnails so that they appear closer to the content they're associated with, which is probably the editors intent.

Screen Shot 2018-05-04 at 15.44.31.png (974×173 px, 208 KB)
Screen Shot 2018-05-04 at 15.44.41.png (974×169 px, 199 KB)
Current MinveraProposed change

This change would only be visible on tablet devices, since the Minerva skin clears the floats at a narrow width anyway.

A patch with these changes (and a few more) was created by @Jdlrobson to illustrate the difference.

https://gerrit.wikimedia.org/r/#/c/430098/

A throw-away account on Wikipedia has also been set-up to show what these changes would look like.
username: noclearthumbnails
password: noclearthumbnails123
(this account will be deleted when this task is resolved)

The following file has been edited to explore these changes
https://en.m.wikipedia.org/wiki/User:Noclearthumbnails/minerva.css

side-effects may include...

  1. When two thumbnails are placed beside each other, they won't stack vertically like they do now. Instead (space permitting) they would be placed beside each other.
Screen Shot 2018-05-04 at 16.13.33.png (518×1 px, 358 KB)
Screen Shot 2018-05-04 at 16.13.15.png (529×1 px, 346 KB)
CurrentProposed change
Screen Shot 2018-05-04 at 16.05.40.png (909×1 px, 597 KB)
Screen Shot 2018-05-04 at 16.05.11.png (633×1 px, 373 KB)
CurrentProposed change
  1. thumbnails might "bump" into each other instead of aligning beside or below.
Screen Shot 2018-05-04 at 16.05.51.png (585×544 px, 227 KB)
Screen Shot 2018-05-04 at 16.05.01.png (457×617 px, 207 KB)
CurrentProposed change
  1. Word-breaks will have to be addressed by preventing characters from flowing into the spaces between the thumbnails

Screen Shot 2018-05-04 at 16.36.48.png (375×490 px, 212 KB)

Event Timeline

Jdrewniak updated the task description. (Show Details)

We could also limit the clear:none;'s only to thumbnails in the first few sections of an article, since those sections are the most likely to be effected by the infobox.

@alexhollender how do we want to proceed here?

Another option that was discussed was to limit the "uncleared" thumbnails to the first 2 consecutive thumbnails, so that they don't form too much of a horizontal line, like is this scenario.

Screen Shot 2018-05-07 at 15.43.07.png (1×1 px, 775 KB)
Screen Shot 2018-05-07 at 15.43.19.png (1×1 px, 782 KB)
Screen Shot 2018-05-07 at 15.43.24.png (1×1 px, 830 KB)
current, all clearedinitial proposallimiting to 2 "uncleared" thumbnails

@Jdlrobson @Jdrewniak — ahh this one is so tricky. Would it be possible to remove the clear and the float from the respective images, so they basically act like they do on mobile? I'm still trying to think about how we might target them...something like the first X amount of images that are located at the top of a section? Will keep thinking

The result would be something like this...

Artboard.jpg (15×2 px, 3 MB)

I don't think it's that straightforward without getting into a maintenance nightmare of all sorts of nth child selectors. The only reason things are good on Vector are editors are manually tweaking the positioning of images on that skin.

There are tricks to define a minimum width for the text that floats to the left and right of images (using pseudo element) that might help, but I remain unconvinced :/

Edit: Also if we move all the images to the left we're ignoring/overruling editor's decisions on floating, which is not advisable.

ahh this one is so tricky.
It's debatable whether this is an issue, because the Vector skin clears thumbnails in the same way.

With this in mind do we want to decline this?

Declined based on comments above

Vvjjkkii renamed this task from Prevent thumbnails from stacking below infobox to uldaaaaaaa.Jul 1 2018, 1:11 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from uldaaaaaaa to Prevent thumbnails from stacking below infobox.Jul 2 2018, 2:02 PM
CommunityTechBot closed this task as Declined.
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.