Page MenuHomePhabricator

[Bug] <div class="center">> does not center content
Closed, ResolvedPublic1 Story Points

Description

Raised here: https://www.mediawiki.org/wiki/Topic:Uc8tt66h2ecktucj?markasread=744339
Editors use an element with class "center" to center certain pieces of content. This doesn't seem to work in the Minerva skin.

Steps to Reproduce

Visit https://en.m.wikisource.org/w/index.php?title=The_Works_of_Lord_Byron_(ed._Coleridge,_Prothero)/Poetry/Volume_1

Expected Results

  • Image under LORD BYRON should be centered

Actual Results

  • It's aligned left.

Developer notes

The class .center when present should center any content inside it. Can also be replicated on
https://en.wikipedia.org/wiki/Ulaanbaatar (see photo with caption "Engraving of N.A.Charushin's panorama photo of the old center of Urga from trip (1888)...")

Environments Observed

-All

Testing Environment for QA

Go to http://reading-web-staging.wmflabs.org/wiki/Ulaanbaatar

  • see photo with caption "Engraving of N.A.Charushin's panorama photo of the old center of Urga from trip (1888)..."
  • might have to mess with your browser width a bit get some sidebars and things out of the way
  • you may need to ask a developer to load the fix

Browser Version

OS Version

Device Model

Device Language

Details

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterIncreasing specificity of '.center' class
mediawiki/skins/MinervaNeue : masterAdd "center" layout rules based on mediawiki.skinning in core.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 2 2018, 12:21 AM
Jdlrobson updated the task description. (Show Details)May 2 2018, 12:21 AM
Jdlrobson moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Niedzielski added a subscriber: Niedzielski.

.center comes from the mediawiki.skinning.interface module. This module style is added in Vector but I find no mention in MobileFrontend or MinervaNeue.

ovasileva set the point value for this task to 1.May 9 2018, 4:37 PM

@Jdlrobson what should I be looking at and for here?

Can also be replicated on https://en.wikipedia.org/wiki/Ulaanbaatar (see photo with caption "Engraving of N.A.Charushin's panorama photo of the old center of Urga from trip (1888)...")

just checked that and the photo seems to be centered?

.center comes from the mediawiki.skinning.interface module. This module style is added in Vector but I find no mention in MobileFrontend or MinervaNeue.

What about earlier skins? It centres in earlier desktop skins

@Jdlrobson what should I be looking at and for here?

Can also be replicated on https://en.wikipedia.org/wiki/Ulaanbaatar (see photo with caption "Engraving of N.A.Charushin's panorama photo of the old center of Urga from trip (1888)...")

just checked that and the photo seems to be centered?

https://en.m.wikisource.org/w/index.php?title=The_Works_of_Lord_Byron_(ed._Coleridge,_Prothero)/Poetry/Volume_1

Pardon my non-technical jargon. The photo of Byron is not centered when viewed in mobile mode. Please refer to history at https://www.mediawiki.org/wiki/Topic:Uc8tt66h2ecktucj?markasread=744339.

@Billinghurst right, I see the issue there, just not sure if @Jdlrobson is asking if the ticket looks good, or if there's a patch on staging I'm supposed to be looking at to see if the issue is fixed.

Incidentally, the custom rule further down on the page is also aligned left in mobile mode. @Billinghurst, I will leave further comments to you. Not my area of expertise.

@Billinghurst right, I see the issue there, just not sure if @Jdlrobson is asking if the ticket looks good, or if there's a patch on staging I'm supposed to be looking at to see if the issue is fixed.

Ahhh. Hello face, meet palm.

Change 437214 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Importes the "center" CSS rules from 'mediawiki.skinning/elements.css'

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

Change 437214 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add "center" layout rules based on mediawiki.skinning in core.

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

Jdlrobson added a subscriber: Jdrewniak.

I've updated staging to include the patch. Over to you Alex!

Looks good based on http://reading-web-staging.wmflabs.org/wiki/Ulaanbaatar

  • see photo with caption "Engraving of N.A.Charushin's panorama photo of the old center of Urga from trip (1888)..."
  • might have to mess with your browser width a bit to get it out of some weird state

@Jdlrobson I couldn't figure out how to test https://en.m.wikisource.org/w/index.php?title=The_Works_of_Lord_Byron_(ed._Coleridge,_Prothero)/Poetry/Volume_1 on staging. If possible maybe update the description with instructions?

alexhollender updated the task description. (Show Details)
Jdlrobson moved this task from Backlog to Bugs on the MinervaNeue board.Jun 13 2018, 3:54 PM

Appears to be working on phone-sized devices, but the image is not centered on tablets. @Jdlrobson, do I need to...

ask a developer to load the fix

Putting into 'needs more work' for now

Phone


Phone

Tablets



Jdlrobson removed ABorbaWMF as the assignee of this task.Jun 28 2018, 4:11 PM
Jdlrobson added a subscriber: ABorbaWMF.

Thanks for catching this @ABorbaWMF !
We've fixed the centering in the original bug report (https://en.m.wikisource.org/w/index.php?title=The_Works_of_Lord_Byron_(ed._Coleridge,_Prothero)/Poetry/Volume_1) but it's not working with thumbnail.s

Looks like this rule is overly specific:

.content figure, .content .thumb

and conflicting with

.center > *

We can either make the center rule use ~important; downgrade the specificity of the thumb rules or upgrade to .content .center > .thumb

Change 442975 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Increasing specificity of '.center' class

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

Staging has been updated.

(note patch didn't go through but it is on staging) I'll try and merge it tomorrow.

Change 442975 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Increasing specificity of '.center' class

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

Vvjjkkii renamed this task from [Bug] <div class="center">> does not center content to otdaaaaaaa.Jul 1 2018, 1:12 AM
Vvjjkkii removed alexhollender as the assignee of this task.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii removed the point value for this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from otdaaaaaaa to [Bug] <div class="center">> does not center content.Jul 2 2018, 2:12 PM
CommunityTechBot assigned this task to alexhollender.
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot set the point value for this task to 1.
CommunityTechBot added subscribers: gerritbot, Aklapper.

Looks good across various screen widths. Realized that previously I had tested the desktop site, rather than the mobile.

Looks good on tablet now as well



Looks fine on mobile as well

ovasileva closed this task as Resolved.Jul 4 2018, 10:14 AM
ovasileva added a subscriber: ovasileva.

thanks all, looks like we're all done here

confirming that this is working in the wild, thanks all for their work.

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 13 2018, 6:40 PM