Page MenuHomePhabricator

Changes to how templates are styled in mobile
Open, Needs TriagePublic

Description

Interface editors should be on the look out for minor rendering issues on mobile devices to coordinates, Template:Reflist Template:multicol and collapsible elements. Some information on how to address these issues can be found here.

Background

Minerva, the skin used on mobile, has had some CSS in place to make some templates display better at mobile resolutions. Skins shouldn't decide how templates display, as these are maintained by community members so we are changing how this works so community members can easily opt-out of these styles where necessary.

As part of preparation for this work, we have decided to drop several styles (T360387).

What has changed

collapsible

We removed the rule:

.collapsible td {
	width: auto !important;
}

multicol

We removed the rule:

@media all and ( max-width: 720px ) {
  table.multicol > tbody > tr > td,
  table.multicol > tr > td {
	display: block !important;
	width: auto !important;
  }
}

Adding this to Template:Col-begin or MediaWiki:Common.css should address any issues with this.

coordinates, topicon

These were previously hidden. From now on, we recommend using https://www.mediawiki.org/wiki/Help:Page_status_indicators

For coordinates see: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Frequently_asked_questions#How_to_fix_the_coordinates_displaying_incorrectly_near_the_languages_button%3F

Reflist

We removed the following rule in Template:Reflist:

body.skin-minerva .reflist {
  column-gap: 2em;
}