Maniphest T193595

does not center content
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	May 2 2018, 12:21 AM

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

	Subject	Repo	Branch	Lines /-
	Increasing specificity of '.center' class	mediawiki/skins/MinervaNeue	master	12 -11
	Add "center" layout rules based on mediawiki.skinning in core.	mediawiki/skins/MinervaNeue	master	11 -0

Customize query in gerrit

Related Objects

Duplicates Merged Here: T76945: "center" does not center non-thumb image on tablets in Minerva

Event Timeline

Jdlrobson created this task.May 2 2018, 12:21 AM

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 Web-Team-Backlog board.

adding @Londonjackbooks

Jdlrobson moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.May 7 2018, 8:34 PM

.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

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

@alexhollender ^ looks good?

@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?

In T193595#4194019, @Niedzielski wrote:

.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

In T193595#4196689, @alexhollender wrote:

@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.

In T193595#4196736, @alexhollender wrote:

@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

gerritbot added a project: Patch-For-Review.Jun 4 2018, 10:44 AM

Jdrewniak claimed this task.Jun 4 2018, 10:44 AM

Jdrewniak moved this task from To Do to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.

Jdlrobson moved this task from Needs Code Review to Needs More Work on the Readers-Web-Kanbanana-Board-Old board.Jun 5 2018, 9:08 AM

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

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

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-06-12 (1.32.0-wmf.8)).Jun 6 2018, 1:01 PM

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_WMF reassigned this task from • alexhollender_WMF to ABorbaWMF.Jun 6 2018, 8:17 PM

• alexhollender_WMF updated the task description. (Show Details)

• alexhollender_WMF moved this task from Needs Design Review to Needs QA on the Readers-Web-Kanbanana-Board-Old board.Jun 6 2018, 8:20 PM

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

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

Jdlrobson removed a project: Patch-For-Review.Jun 28 2018, 4:11 PM

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

gerritbot added a project: Patch-For-Review.Jun 28 2018, 8:22 PM

Jdlrobson moved this task from Needs More Work to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.Jun 28 2018, 8:51 PM

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

ReleaseTaggerBot edited projects, added MW-1.32-notes (WMF-deploy-2018-07-10 (1.32.0-wmf.12)); removed MW-1.32-notes (WMF-deploy-2018-06-12 (1.32.0-wmf.8)).Jun 30 2018, 7:01 PM

• Vvjjkkii renamed this task from [Bug] <div class="center">> does not center content to otdaaaaaaa.Jul 1 2018, 1:12 AM

• Vvjjkkii removed • alexhollender_WMF 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 edited projects, added 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); removed MW-1.32-notes (WMF-deploy-2018-07-10 (1.32.0-wmf.12)).

• 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_WMF.

CommunityTechBot lowered the priority of this task from High to Medium.

CommunityTechBot added a project: MW-1.32-notes (WMF-deploy-2018-07-10 (1.32.0-wmf.12)).

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 updated the task description. (Show Details)

CommunityTechBot set the point value for this task to 1.

CommunityTechBot added subscribers: gerritbot, Aklapper.

• alexhollender_WMF reassigned this task from • alexhollender_WMF to ABorbaWMF.Jul 2 2018, 4:56 PM

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

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

MBinder_WMF moved this task from 2017-18 Q4 to Current Sprint (and resolved 2018-19 Q1) pre-milestone on the Web-Team-Backlog board.Jul 3 2018, 6:56 PM

thanks all, looks like we're all done here

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

• Phabricator_maintenance edited projects, added Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1); removed Web-Team-Backlog.Sep 13 2018, 6:40 PM

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

TheDJ merged a task: T76945: "center" does not center non-thumb image on tablets in Minerva.May 19 2020, 1:13 PM

TheDJ added subscribers: Edokter, Masumrezarock100, TheDJ and 2 others.

Maintenance_bot removed a project: Patch-For-Review.May 19 2020, 2:11 PM

	F23273487: image.png
	Jul 3 2018, 6:09 PM

	F23273752: image.png
	Jul 3 2018, 6:09 PM

	F23273769: image.png
	Jul 3 2018, 6:09 PM

	F23273505: image.png
	Jul 3 2018, 6:09 PM

[Bug] <div class="center">> does not center contentClosed, ResolvedPublic1 Estimated Story PointsActions