Module:NavboxMobile/doc

This module implements the Navbox template for mobile. Please see the template page for usage instructions.

This template differs from the desktop version as follows:
 * The table does not collapse.
 * The list cells, e.g. group1, list1, each display across the width of the screen
 * Images are not displayed, as it increases the complexity of the layout while reducing the area needed for content.

Implementation
This approach works by utilizing an "onlymobile" class in MediaWiki:Common.css. See: Topic on Extension talk:MobileFrontend

In MediaWiki:Common.css, add: /* Only for mobile devices */ .onlymobile { display:none; }

Modify Template:Navbox to call both the desktop and mobile Lua modules as follows:

The result will be to render both the desktop (navbox) and mobile (navboxMobile) versions. When displaying from a desktop view, MediaWiki:Common.css will not display the mobile template. When displaying from a mobile, only the mobile template will be displayed (MobileFrontend does not process the navbox).

MobileFrontend processes MediaWiki:Mobile.css. To provide an independent class that is not affected by the navbox rules, copy all of the navbox CSS properties from MediaWiki:Common.css to MediaWiki:Mobile.css.

In MediaWiki:Mobile.css, replace all "navbox-" with "navboxMobile-". For example, "navbox-title" becomes "navboxMobile-title". This will match the CSS properties in Module:NavboxMobile.

Development
The module was first copied from Module:Navbox.


 * All instances of "navbox-" were replaced with "navboxMobile-" to provide unique CSS identifiers that are independent of navbox.
 * All statements which processed images were commented out. They were left as comments to show what was changed.

In function renderListRow, the cell pair of (groupCell, listCell) which appeared in a single row were broken into separate rows by adding local row = addTableRow(tbl) just before listCell.

Adding this row, along with commenting out the images, are the only functional changes needed to make the template work in mobile view.

Constraints and limitations
This template was developed with MediaWiki 1.27.4 (Long Term Support) and MobileFrontEnd 1.0.0 (29 June 2016). No testing was performed with other versions.

The navbox class is explicitly disabled in /extensions/MobileFrontend/resources/skins.minerva.content.styles/hacks.less. Attempts to override navbox using $wgMFRemovableClasses do not appear to work.

Example
The following example is intended to be visible in desktop view. The layout can be seen, but the colors and text alignment are incorrect because the CSS properties are not defined in desktop view.

The template will appear as intended in mobile view.

This example also shows how to supply template parameters directly to the Lua module.