Maniphest T193418

[subtask] Moving infobox causes re-render
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Jdlrobson
	Apr 30 2018, 5:45 PM

Description

Seen on the Taiwan page on reading web staging:

Note how the second infobox moves into the Etymology section causing text to reflow.

Note: There is an unrelated re-render triggered by the page issues link appearing at the top of the page. Please ignore this as this will be solved by redesigning the page issues treatment.

Developer notes

This appears to be related to the loading of the CSS rule:

.client-js .collapsible-block {
    overflow: hidden;
}

I'm pretty sure this rule is redundant given the new changes introduced in T189688

Details

Subject	Repo	Branch	Lines +/-
Freely floating tables and images	mediawiki/skins/MinervaNeue	master	+16 -11
Prevent floated element from breaking out of content sections	mediawiki/skins/MinervaNeue	master	+10 -0
Improve use of whitespace on tablets	mediawiki/skins/MinervaNeue	master	+0 -6

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		ABorbaWMF	T189688 On long infoboxes, section 1 is pushed down page despite space available
		Resolved		ovasileva	T193418 [subtask] Moving infobox causes re-render

Event Timeline

Jdlrobson created this task.Apr 30 2018, 5:45 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 30 2018, 5:45 PM

Jdlrobson moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Apr 30 2018, 5:46 PM

Change 429982 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Improve use of whitespace on tablets

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

gerritbot added a project: Patch-For-Review.Apr 30 2018, 8:45 PM

Jdlrobson renamed this task from Moving infobox causes re-render to [subtask] Moving infobox causes re-render.Apr 30 2018, 8:45 PM

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

Jdlrobson added a parent task: T189688: On long infoboxes, section 1 is pushed down page despite space available.

^ @alexhollender I've put this on staging. I think it solves the issue with Taiwan and USA. Can you check it out and see if it causes any other problems elsewhere?

Jdlrobson moved this task from Needs Design Review to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Apr 30 2018, 8:49 PM

Jdlrobson moved this task from Triaged but Future to 2017-18 Q4 on the Web-Team-Backlog board.Apr 30 2018, 9:28 PM

Change 429982 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Improve use of whitespace on tablets

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

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-05-01 (1.32.0-wmf.2)).May 1 2018, 3:00 PM

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.May 1 2018, 5:09 PM

Change 430098 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Freely floating tables and images

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

Change 430098 abandoned by Jdlrobson:
Freely floating tables and images

Reason:
Too risky

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

@Jdlrobson yes this seems to do the trick. I don't think it needs additional QA. Going to move to Sign off.

• alexhollender_WMF assigned this task to ovasileva.May 1 2018, 8:33 PM

• alexhollender_WMF moved this task from Needs Design Review to Ready for Signoff on the Readers-Web-Kanbanana-Board-Old board.

.client-js .collapsible-block {
    overflow: hidden;
}

That rule is not redundant, what it actually does is magic! (which I now realize, should really be documented)

What that rule does is it creates a new "block formatting context" a concept briefly described in T189688#4162235 which essentially creates a bounding box that prevents floated thumbnails from "escaping" the section, while letting the section take up the available space beside the infobox.

Screen Shot 2018-05-02 at 11.39.46.png (1×1 px, 416 KB)

Without this rule, the floated thumbnails get pushed next to the last floated element, which is probably the infobox.

With this rule, the floated thumbnails get contained within the "block formatting context"

Screen Shot 2018-05-02 at 11.40.05.png (1×1 px, 463 KB)

Which is probably better. This rule does mean that the sections don't wrap around the infobox, but it's still preferable than having the thumbnails in weird places.

Regarding the reflow, this is caused because the rule was attached to the .client-js class, which gets appended after page-load. If it was attached just to

.collapsible-block {
    overflow: hidden;
}

then that wouldn't trigger the reflow.

~~Alternatively, we could also use display: table which also creates the new bounding box, and it's a bit more obvious then the benign looking overflow: hidden.~~ scratch that, that might interfere with the jQuery .show() .hide() that uses display: block/none to show hide elements a lot.

looks good to me. @Jdrewniak - any suggestions on where to document this?

Change 430378 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Prevent floated element from breaking out of content sections

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

Change 430378 abandoned by Jdrewniak:
Prevent floated element from breaking out of content sections

Reason:
not required

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

Change 430098 restored by Jdlrobson:
Freely floating tables and images

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

Resolving this and will keep further issues under the parent task

• Vvjjkkii renamed this task from [subtask] Moving infobox causes re-render to lydaaaaaaa.Jul 1 2018, 1:13 AM

• Vvjjkkii reopened this task as Open.

• Vvjjkkii removed ovasileva as the assignee of this task.

• Vvjjkkii triaged this task as High priority.

• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).

• Vvjjkkii updated the task description. (Show Details)

• Vvjjkkii edited subscribers, added: ovasileva; removed: gerritbot, Aklapper.

CommunityTechBot renamed this task from lydaaaaaaa to [subtask] Moving infobox causes re-render.Jul 1 2018, 2:18 PM

CommunityTechBot closed this task as Resolved.

CommunityTechBot assigned this task to ovasileva.

CommunityTechBot updated the task description. (Show Details)

CommunityTechBot removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.

CommunityTechBot edited subscribers, added: gerritbot, Aklapper; removed: ovasileva.

CommunityTechBot raised the priority of this task from High to Needs Triage.Jul 3 2018, 1:49 AM

Change 430098 abandoned by Jdlrobson:
Freely floating tables and images

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

	F17566800: Screen Shot 2018-05-02 at 11.40.05.png
	May 2 2018, 9:54 AM

	F17566795: Screen Shot 2018-05-02 at 11.39.46.png
	May 2 2018, 9:46 AM

[subtask] Moving infobox causes re-renderClosed, ResolvedPublicActions

Description

Developer notes

Details

Related ObjectsSearch...

Event Timeline

[subtask] Moving infobox causes re-render
Closed, ResolvedPublic
Actions

Related Objects
Search...