Page MenuHomePhabricator

"center" does not center non-thumb image on tablets in Minerva
Closed, DuplicatePublic

Description

When an (non-thumb) image has the center keyword, it is *not* centered due to no CSS being associated with the .center class.

This problem does not occur on thumbs, where .thumbinner takes care of the centering.

Demonstration: https://en.m.wikipedia.org/wiki/User:Edokter/sandbox#Image_positioning

Event Timeline

Edokter created this task.Dec 6 2014, 5:48 PM
Edokter raised the priority of this task from to Medium.
Edokter updated the task description. (Show Details)
Edokter added a project: MobileFrontend-beta.
Edokter changed Security from none to None.
Edokter updated the task description. (Show Details)
Edokter added a subscriber: Edokter.
Edokter renamed this task from "center" does not center non-thumb image in mobile to "center" does not center non-thumb image (stable) / "thumb|left" results in centered thumb (beta).Dec 6 2014, 5:57 PM
Edokter updated the task description. (Show Details)

I had a brief look but was unable to grok the existing behaviour and how it should work.

thumb|left, thumb|center and thumb|right make little sense on mobile since the screen is typically 320px which is about the same size as a thumbnail, hence they default to centered regardless of the parameters. On tablet they should look the same as on desktop.

Having a quick look through the HTML markup the .center class is unsemantic and not very meaningful. Same for floatright, floatnone, floatleft. It would be good to rethink these class names and again apply the same logic as above - floatright, floatleft should be centered on mobile screen and with a media query float left or right.

Edokter does the above sound right to you or have i completely misunderstood? Could you suggest some actionable steps to fix this?

Jdlrobson assigned this task to Edokter.Dec 10 2014, 5:40 PM

I updated the testcases and tested again. To break down what's broken:

Non-thumbnail:
"center" is broken because the CSS for .center is missing/stripped. Aplies to both stable and beta, both mobile (<320) and tablet (>320)

With thumbs, everything displays as it should. The "thumb|left" in beta issue I reported earlier seems to be resolved.

I'm not convinced about the "unsemantic"ness of "center": it does what it says on the tin. I consider if functionally semantic. Change the classnames if you must, but I'd like to resolve this bug first. Unfortunately, I don't have the repo and can't submit a patch.

Edokter renamed this task from "center" does not center non-thumb image (stable) / "thumb|left" results in centered thumb (beta) to "center" does not center non-thumb image on tablets.Dec 10 2014, 6:25 PM
Edokter updated the task description. (Show Details)

I'm not sure where the css rules for .center come from and thus which project this issue needs to be fixed in but it's not actually in the mobile repo.

I've setup T78176 for the class name issue

I thought it was defined in core and filtered in mobile, but perhaps, it is just not defined in mobile (Minerva).

@Jdlrobson Is there still an unresolved question here or can we go ahead and fix this?

Nemo_bis added a subscriber: Nemo_bis.
Jdlrobson moved this task from Backlog to Discussing on the MobileFrontend board.Mar 16 2016, 10:37 PM
Jdlrobson renamed this task from "center" does not center non-thumb image on tablets to "center" does not center non-thumb image on tablets in Minerva.May 25 2016, 9:39 PM
Jdlrobson lowered the priority of this task from Medium to Lowest.
TheDJ added a subscriber: TheDJ.May 4 2017, 2:40 PM
TheDJ added a comment.May 4 2017, 2:45 PM

grep -rIi \\.center
/src/mediawiki.legacy/commonPrint.css:.center {
/src/mediawiki.legacy/oldshared.css:.center {
/src/mediawiki.legacy/oldshared.css:*.center * {
/src/mediawiki.skinning/elements.css:.center {
/src/mediawiki.skinning/elements.css:*.center * {

So for modern skins, this class is usually provided by mediawiki.skinning.elements module, which also explains why it is not working in Minerva.
The reason this is in elements btw, is because long ago, this used to be a <center> that was output by core. But <center> is deprecated, so it was replace with this.

Nirzar do we want to respect editorial choices with regards to tablet layout (thumbs are always centered in mobile mode.

Aklapper removed Edokter as the assignee of this task.May 17 2020, 12:37 PM

@Edokter: I am resetting the assignee of this task because there has not been progress lately (please correct me if I am wrong!). Resetting the assignee avoids the impression that somebody is already working on this task. It also allows others to potentially work towards fixing this task. Please claim this task again when you plan to work on it (via Add Action...Assign / Claim in the dropdown menu) - it would be welcome. Thanks for your understanding!

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptMay 17 2020, 12:37 PM