Page MenuHomePhabricator

Make Action API documentation pages better readable on smaller screens
Closed, ResolvedPublic

Description

There is no reason to do this:

  • restricted code example width:

Снимок_Экрана_20230117_002.png (1×1 px, 125 KB)

Снимок_Экрана_20230117_001.png (1×1 px, 301 KB)

Event Timeline

Aklapper created this task.

First item now fixed by editing 110 pages on mediawiki.org...

Izno added a subscriber: Izno.

For the second item, there are two reasons the overflow algorithm may be kicking in.

  1. The link Special:ApiHelp/query+extracts is placed in the output. It has no obvious break points, and because it's in a table, the algorithm just gives up and uses overflow: auto behavior instead (that info is scrollable in your picture). I've tried a change to Template:Api help which should help with that according to trying it in console, we'll just need to wait for translations.
  2. The special page transclusion ({{Special:ApiHelp}}) that is generated by Template:Api help is not mobile friendly and is causing the overflow. Scroll down a bit. I've added the Action API project accordingly because this requires a core software change.

It shouldn't be a table, but with that hack that's a mostly separate issue, and one that's on the list of things to fix for en.wp whence {{ombox}} comes from so you might get the fix for free Some Day. (And I'm pretty sure this would be a problem regardless of whether it's a div or a table because of the link in the text, the symptom would just be slightly different.)

The first item looks fixable onwiki and just requires removal of the fixed widths, as at this page. It looks like most of these blocks are set to 100% by inline styles, so that example looks like a one off. Probably none of those should have widths set in inline styles.

One thing that you should also consider is to pull the updated styles from en.wp that are a bit more mobile friendly (tangentially relevant to this task), e.g. it should be a trivial swap in of:

https://en.wikipedia.org/wiki/Module:Message_box/ombox.css -> https://www.mediawiki.org/wiki/Module:Message_box/ombox.css

And on down for the list of TemplateStyles pages in https://www.mediawiki.org/wiki/Module:Message_box

The special page transclusion ({{Special:ApiHelp}}) that is generated by Template:Api help is not mobile friendly and is causing the overflow. Scroll down a bit. I've added the Action API project accordingly because this requires a core software change.

The changes should only need to be made to https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.apipretty/apihelp.css :

.apihelp-flags {
	...
	width: 20em;
}

...

.apihelp-parameters dl,
.apihelp-examples dl,
.apihelp-permissions dl {
	margin-left: 2em;
}

.apihelp-parameters dt {
	...
	min-width: 10em;
	...
}

...

.apihelp-parameters dd {
	margin: 0 0 0.5em 10em;
	...
}

...

.apihelp-parameters dd.info {
	margin-left: 12em;
	text-indent: -2em;
}

Tucking these widths in their entirety behind a media query and relying on the defaults otherwise also helps based on console. There's still an issue with the often lengthy links for the parameter names. Those could have a different wrapping behavior? I am not sure that's a good idea given the context.

Change 881031 had a related patch set uploaded (by Steven Rawson; author: Steven Rawson):

[mediawiki/core@master] Special:ApiHelp: Move widths and floats in CSS to media query

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

Whou. Thanks a lot for all that analysis and the patch, @Izno!

BeforeAfter
Screenshot 2023-01-18 at 17-04-34 MediaWiki API help - Trunk Test.png (888×450 px, 102 KB)
Screenshot 2023-01-18 at 17-04-27 MediaWiki API help - Patch demo (881031 3).png (888×450 px, 98 KB)

(Please ignore the orange title highlight, I have custom CSS on my local test wiki)

Change 881031 merged by jenkins-bot:

[mediawiki/core@master] Special:ApiHelp: Move widths and floats in CSS to media query

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

Aklapper assigned this task to Izno.

Thanks so much everyone, and congrats!