Page MenuHomePhabricator

Infobox does not get moved behind the lead paragraph if it's a DIV element
Closed, ResolvedPublic

Description

ar.wiki uses classes such as infbox_v2 and infobox_v3, so it isn't picked up by MobileFrontend's CSS and breaks the layout:

e.g.
https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)
https://ar.m.wikipedia.org/wiki/%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84 (the infobox's width should be constrained and not full-width)

Screenshot 2019-03-11 at 19.05.48.png (669×376 px, 186 KB)

QA steps

QA Results

ACStatusDetails
1T218056#5893787
2T218056#5860641

Event Timeline

Hello @Jdlrobson and @CKoerner_WMF, is there any update? or thing(s) that we (Arabic Wikipedia) can help in it?

Im pretty sure i explained this to ar.wp before... The proper way to fix this is to generate html with TWO classes, like class=“infobox infobox_v2”. And make sure that any visual changes in v2 override the visual changes of infobox.

What @TheDJ says. Please add the infobox class to the element. The community needs to fix this. We can't help.
Output should look like this:

<div class="infobox infobox_v3" style="max-width:300px"><div
Jdlrobson renamed this task from Infobox not detected on Arabic Wikipedia to Infobox does not get moved behind the lead paragraph as HTML element outputted by Arabic infobox template does not include the infobox class.Jul 1 2019, 5:54 PM

Arwiki_Screenshot_2019-07-05.png (647×505 px, 155 KB)

It's done for most templates, I changed class=“infobox_v2” to class=“infobox infobox_v2”.

Thank you Mr.Ibrahem 🙏 for the other templates e.g. the one used by https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) is there an open request?

In arwiki we are using two kind of templates (1 & 2), so on 4 July I sent to Mr.Ibrahem and he fixed the first kind, and now I sent to user:وهراني to fix the other kind (your example).

TheDJ claimed this task.

I think both were fixed.

Jdlrobson renamed this task from Infobox does not get moved behind the lead paragraph as HTML element outputted by Arabic infobox template does not include the infobox class to Infobox does not get moved behind the lead paragraph if it's a DIV element.EditedJan 27 2020, 12:54 PM
Jdlrobson reopened this task as Open.

Ordering still seems wrong on https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) but I think this is on us now though.

This seems to be because the element with class infobox is a div and I was surprised to see our lead paragraph logic does not work on non-table elements
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/includes/transforms/MoveLeadParagraphTransform.php#L66

Patch submitted (I'm looking at a similar issue as we speak => T242447)

Change 567441 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Allow infoboxes that are not table elements

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

Change 567441 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Allow infoboxes that are not table elements

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

ovasileva triaged this task as Medium priority.Feb 4 2020, 6:09 PM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ❌ FAIL
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, iPad

Test Artifact(s):

❌ AC1: https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)

ar.m.wikipedia.org_wiki_%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85)(iPhone X).png (2×1 px, 1 MB)

Note: The infobox also has no gap between the line separator of the menu.

✅ AC2: https://ar.m.wikipedia.org/wiki/%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84 (the infobox's width should be constrained and not full-width)

ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPad).png (2×1 px, 272 KB)

ar.m.wikipedia.org_wiki_%D8%AC%D9%88%D9%86_%D9%85%D8%A7%D9%83%D9%88%D9%84(iPhone X).png (2×1 px, 216 KB)

I believe the train with the fix got blocked last week so when the train does roll out this bug should be rechecked.

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

✅ AC1: https://ar.m.wikipedia.org/wiki/%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85) (the infobox should appear below the first paragraph)

ar.m.wikipedia.org_wiki_%D9%87%D9%88%D9%84%D9%83_%D8%A7%D9%84%D8%AE%D8%A7%D8%B1%D9%82_(%D9%81%D9%8A%D9%84%D9%85)(iPhone X).png (2×1 px, 1 MB)