View source for Module:NavboxMobile/doc

This module implements the {{tl|Navbox}} template for mobile devices when [[mw:Extension:MobileFrontend |Extension:MobileFrontend]] is installed. This mobile version 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.

==Overview==
This approach works by utilizing CSS class rules. See: [https://www.mediawiki.org/wiki/Topic:S1ryaxqcmsswj6gb Hiding content on desktop devices]

An <code>onlymobile</code> class in MediaWiki:Common.css will not display classes intended for mobile devices.

A <code>nomobile</code> class in MediaWiki:Mobile.css will not display classes intended for desktop devices.

Use these classes together inside the same template. The template will be rendered twice, but only display once depending on the view (desktop or mobile).

==Module description==
The module was copied from Module:Navbox and modified as follows:

* All instances of <code>navbox-</code> were replaced with <code>navboxMobile-</code> to provide unique CSS identifiers that are independent of <code>navbox</code>.
* All statements which processed images were removed. The statements remain as comments to show what was changed.

In <code>function renderListRow()</code>, the cell pair of (groupCell, listCell) appearing as a single row is broken into separate rows by adding <code>local row = addTableRow(tbl)</code> just before listCell.

Adding this row and removing the images are the only functional changes made to the existing <code>navbox</code> template. Except for removal of the images, the parameters used in the current <code>navbox</code> are supported.

==Implementation==

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

===MediaWiki:Mobile.css===
In MediaWiki:Mobile.css, add:
<pre>
/* Only for desktop devices */
.nomobile {
display:none;
}</pre>

MobileFrontend processes MediaWiki:Mobile.css. To provide an independent class that is not affected by the navbox rules, copy all of the <code>navbox</code> and <code>hlist</code> CSS styles from MediaWiki:Common.css to MediaWiki:Mobile.css.

Replace all <code>navbox-</code> with <code>navboxMobile-</code>. For example, <code>navbox-title</code> becomes <code>navboxMobile-title</code>. This will match the CSS properties in Module:NavboxMobile.

===Template:Navbox===
Modify Template:Navbox to call both the desktop and mobile Lua modules as follows:
<pre><div class="nomobile">{{#invoke:Navbox|navbox}}</div><div class="onlymobile">{{#invoke:NavboxMobile|navboxMobile}}</div><noinclude>
{{Documentation}}
</noinclude></pre>
This will 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.

==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 <code>$wgMFRemovableClasses</code> do not display as intended when the <code>navbox</code> class is enabled.

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

{{Module talk:NavboxMobile}}