Extension talk:MobileFrontend

If you have a feature request just request it here you'll get a much quicker reply :-) We are also around in #wikimedia-mobile if you want a quicker answer!

Previous page history was archived for backup purposes at Extension talk:MobileFrontend/LQT Archive 1 on 2015-06-10.

If you are trying to replicate behaviour you see on Wikimedia sites, please be sure to read through the configuration options before asking a question here.

Like others have mentioned, the Mobile Menu isn't editable, and the solutions listed elsewhere tend to be somewhat outdated (GetDiscoveryTools() is no longer present in MinervaSkin.php).

So I made a simple Mobile.js script that did the trick for me. I thought I'd share it in case it helps others.

Here's what the custom links look like — there's a dropdown and a regular version that you can customize. To customize the icon, use the icon classes listed below.

Here's the code I added to Mobile.js:

  /* Add to MediaWiki:Mobile.js for custom Mobile Menu links 
  for MW-1.34.2 with MobileFrontend and MinervaNeue 
  Just replace span text and href to add links */
   
  var timer = setInterval(function() {
       if ($('.menu ul:first').length) {
           console.log("mobile menu exists");
           clearInterval(timer);
           $('.menu ul:first').after(
                 '<ul class="level1"> \
                      <li> \
                      <a href="#" \
                            class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                      <span>Dropdown Links</span> \
                      </a> \
                      </li> \
                      <ul class ="level2"> \
                           <li> \
                           <a href="/wiki/Link_1" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 1</span> \
                           </a> \
                           </li> \
                           <li> \
                           <a href="/wiki/Link_2" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 2</span> \
                           </a> \
                           </li> \
                           <li> \
                           <a href="/wiki/Link_3" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 3</span> \
                           </a> \
                           </li> \
                      </ul> \
                 </ul> \
                 <ul> \
                      <li> \
                      <a href="/wiki/Second_Link" \
                            class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                      <span>Second Link</span> \
                      </a> \
                      </li> \
                 </ul>'
            );
            $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
            $(".level1").click(function(event){ 
                 $(this).find(".level2").slideToggle(500);
            }); // if level1 is clicked, dropdown level2
       }
  }, 100); // check every 100ms

Tested on:
MediaWiki 1.34.2 and 1.35.0
MinervaNeue (d0be74a) 06:41, 1 October 2019
MobileFrontend 2.1.0 (383273b) 11:42, 7 January 2020

P.S. Apparently folks are working on an official solution for this using mw.util.addPortletLink (see phab:T65459, phab:T231925 and phab:T240910), but it still has some styling issues and I wasn't able to figure out how to implement it for the Mobile Menu. If you know how implement AddPortletLink for this, please do share!

_________________________________________________________________________

Update 11/19/20:

To customize the MobileMenu Icons, below is a compiled list of Icon classes found by @Lady G2016, @Ianbirtwistle, and myself. If you find more, feel free to share them in this thread.

Here's a list of known icons by version.

To add them, simply add the icon class in place of "mw-ui-icon-minerva-watchlist"

MW-1.34.2 Icon classes

• Dice: mw-ui-icon-minerva-random
• Home: mw-ui-icon-minerva-home
• Settings: mw-ui-icon-minerva-settings
• Speech Bubbles: mw-ui-icon-minerva-userContributions
• Watchlist: mw-ui-icon-minerva-watchlist

MW-1.35 Icon classes

• Bell: mw-ui-icon-wikimedia-bellOutline-base20
• Dice: mw-ui-icon-minerva-die
• Download: mw-ui-icon-minerva-download
• Expand: mw-ui-icon-mf-expand
• Edit: mw-ui-icon-wikimedia-edit-base20
• Edit lock: mw-ui-icon-wikimedia-editLock-base20
• History: mw-ui-icon-wikimedia-history-base20
• Home: mw-ui-icon-minerva-home
• Language: mw-ui-icon-wikimedia-language-base20
• Map pin: mw-ui-icon-minerva-mapPin
• Search: mw-ui-icon-wikimedia-search-base20
• Settings: mw-ui-icon-minerva-settings
• Speech Bubbles: mw-ui-icon-minerva-speechBubbles
• Star: mw-ui-icon-wikimedia-star-base20
• Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive
• Watchlist: mw-ui-icon-minerva-unStar

I was also unable to figure out how to implement mw.util.addPortletLink and I think some styling issues remain. Your code works perfectly. Thank you.

Tested on localhost as:

MediaWiki 1.35.0-rc.2

MinervaNeue (22bf7fa) 11:06, 11 July 2020

MobileFrontend 2.3.0 (d99e8b1) 10:54, 29 July 2020

I've used your script to add some links. Many thanks for this. The only issue I came across was the icons not loading, perhaps the link has changed since you last wrote this? I simply replaced mw-ui-icon-minerva-watchlist for an active icon. mw-ui-icon-minerva-mapPin and mw-ui-icon-wikimedia-star-base20 both work well.

Script tested on live site

MediaWiki 1.35

MinervaNeue – (bb52d27) 16:16, 21 September 2020

MobileFrontend 2.3.0 (8d06152) 13:42, 21 September 2020

Using @Ianbirtwistle's suggestion, I found active icons with my browser's debugging tool (Chrome Inspect). Here is a list of icons I have found (and those found by Ianbirtwistle):

• Bell: mw-ui-icon-wikimedia-bellOutline-base20
• Download: mw-ui-icon-minerva-download
• Expand: mw-ui-icon-mf-expand
• Edit: mw-ui-icon-wikimedia-edit-base20
• Edit lock: mw-ui-icon-wikimedia-editLock-base20
• History: mw-ui-icon-wikimedia-history-base20
• Language: mw-ui-icon-wikimedia-language-base20
• Map pin: mw-ui-icon-minerva-mapPin
• Search: mw-ui-icon-wikimedia-search-base20
• Star: mw-ui-icon-wikimedia-star-base20
• Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive

The icon size can be reduced by adding the small icon class (mw-ui-icon-small) to the class attribute.

It is important to have a UI that is consistent with the skin. The list contains icons which may not be appropriate as a sidebar menu, but use your judgment.

Drop-down links should use a small "Expand" icon. The additional classes needed to flip the icon vertically when the link is clicked didn't work.

Here's an updated example with the drop-down link icon.

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
             '<ul class="level1"> \
                    <li> \
                    <a href="#" \
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-expand mw-ui-icon-small"> \
                    <span>Dropdown Links</span> \
                    </a> \
                    </li> \
                    <ul class="level2"> \
                         <li> \
                         <a href="/wiki/Link_1" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-download"> \
                         <span>Link 1</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_2" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-mapPin"> \
                         <span>Link 2</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_3" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20"> \
                         <span>Link 3</span> \
                         </a> \
                         </li> \
                    </ul> \
               </ul>\
               <ul> \
                    <li> \
                    <a href="/wiki/Second_Link" \
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-star-base20"> \
                    <span>Second Link</span> \
                    </a> \
                    </li> \
               </ul>'
          );
          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){ 
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms

Tested on localhost
MediaWiki: 1.35.0
MobileFrontEnd: (8d06152) 20:42, 21 September 2020 (info from gitinfo.json)
MinervaNeue: (bb52d27) 23:16, 21 September 2020 (info from gitinfo.json)

Thanks @Lady G2016 for compiling the icon list! I'll have to try those out.

@Ianbirtwistle Thanks for sharing that. One thing I've noticed is that icon usability can vary based on MobileFrontend configuration. For example, if I enable MobileFrontend's Beta mode, then some of my icons may stop working while others become available.

I'm not sure if that's why the watchlist icon didn't work for you, but it might be related.

On my wiki, I actually used this info so I could gain access to other icons.

I used $wgMinervaAdvancedMainMenu from the MinevaNeue configuration settings to add the "Recent Changes" section to the mobile menu. Then I was able to use the Recent Changes icon class mw-ui-icon-minerva-recentchanges.

Here are my full MobileFrontend and Minerva settings:

wfLoadExtension( 'MobileFrontend' );
$wgMFAutodetectMobileView = true;
$wgMFDefaultSkinClass = "SkinMinerva";
wfLoadSkin( 'MinervaNeue' );
$wgMinervaAdvancedMainMenu = [
   'beta' => false,
   'base' => true,
   'amc' => true,
 ];
$wgMinervaPersonalMenu = [
   'beta' => false,
   'base' => true,
   'amc' => true,
 ];

Using these $wgMinervaAdvancedMainMenu settings, the following Icons became available:

• mw-ui-icon-minerva-recentchanges
• mw-ui-icon-minerva-specialpages
• mw-ui-icon-minerva-communityportal

Here's a screenshot showing how I customized the icons for my mobile menu.

(Tested on MW-1.34.2)

@Ianbirtwistle I just upgraded to MW-1.35.0 and encountered the same issue! All the icon class names have changed slightly with the latest update.

The class name of the following icons changed between 1.34.2 and 1.35.0.

• Watchlist
  • 1.34.2: mw-ui-icon-minerva-watchlist
  • 1.35.0: mw-ui-icon-minerva-unStar
• Speech Bubbles (with $wgMinervaAdvancedMainMenu settings only)
  • 1.34.2: mw-ui-icon-minerva-communityportal
  • 1.35.0: mw-ui-icon-minerva-speechBubbles
• Dice
  • 1.34.2: mw-ui-icon-minerva-random
  • 1.35.0: mw-ui-icon-minerva-die
• RecentChanges (with $wgMinervaAdvancedMainMenu settings only)
  • 1.34.2: mw-ui-icon-minerva-recentchanges
  • 1.35.0: mw-ui-icon-minerva-recentChanges
• User Contributions
  • 1.34.2: mw-ui-icon-minerva-contributions
  • 1.35.0: mw-ui-icon-minerva-userContributions
• Special Pages: (with $wgMinervaAdvancedMainMenu settings only)
  • 1.34.2: mw-ui-icon-minerva-specialpages
  • 1.35.0: mw-ui-icon-minerva-specialPages

I'll update my original instructions with the new watchlist icon class.

@Knomanii The first three of your icons do not appear in the menu unless $wgMinervaAdvancedMainMenu is configured with your settings.

• mw-ui-icon-minerva-recentChanges (not visible)
• mw-ui-icon-minerva-specialPages (not visible)
• mw-ui-icon-minerva-speechBubble (not visible)
• mw-ui-icon-minerva-userContributions (visible in menu)

When I use your configuration, the icons appear, but the Log in link is no longer visible. I must have a visible Log in link.

I recommend updating the original instructions to indicate which icons require the $wgMinervaAdvancedMainMenu settings.

@Knomanii thanks so much

ive been looking for the solution for a while

your code been a big help

@Lady G2016 Thanks for the suggestion, will do!

Hi, thank you all for this post, I found it very useful.

I would like to know if it was possible to change the color of the mobile menu icons or replace them with custom icons

@Xsteeplol There might be a way to do that with some custom javascript. You can already use any icon that already has an associated icon class (see discussion above), but I'm not sure how you'd adjust the color or use a custom icon instead. You might try inspecting the element where the icon is inserted and see what you can alter with javascript.

Thank you very much. Script still works in Dec 2022, using latest stable mobile:frontend 2.4.1. For newbies such as myself, i accessed mobile.js by replacing Main_Page in address bar with MediaWiki:Mobile.js

The MediaWiki:Mobile.js script is still working with MediaWiki 1.39.1 and MobileFrontend 2.4.0.

Hi all. I've recently updated my MW from 1.35.2 to 1.39.0 with the new MobileFrontend extension. Everything works as intended, but unfortunately the new mobile view is not ideal for my wiki. In the new look an article's infobox is floated to the right (as in Desktop view), and I really need that infobox to be treated as main content, appearing in the same one column as any article section. When the infobox is floated to the right like a second column, both the main content and the infobox become too narrow to be serviceable. Is there a quick fix to bring back the old behavior? Thanks.

Is it possible to change in which Namespaces and on what content models does MF's editor appear instead of the default editor? The default setting seems to match the default setting of $wgVisualEditorAvailableNamespaces and $wgVisualEditorAvailableContentModels from Extension:VisualEditor, however there doesn't seem to be a way to change it in MobileFrontend (at least without installing VE).

Is there any option to remove the "Desktop" link in the mobile version, which leads to the same page using mobileaction=toggle_view_desktop?

This seems to create issues with the Google crawler, hat crawls a mobile version and gets to the Dekstop link, still expecting pages in mobile version. See various comments on this page as well. Thanks!

Hi @Yellowcard did you ever find a solution to this? I am trying to accomplish the same thing (remove the mobileaction=toggle_view_desktop link). Please let me know if you had.

Hello @CarolinaReidBangingRocksDev, unfortunately not. I am afraid we have to wait until the Google crawler understands this issue, as I do not expect any improvement here. Sadly. Cheers, Yellowcard

Странно, у вас уже всё заработало? Мне ответили, что починили уже

Is there anyway to remove the mobileaction "toggle" from the pages' URLs?

We installed Extension:MobileFrontend on our Mediawiki installation but the section headings do not display the down arrow in mobile view.

I am getting feedback from users that they aren't sure what to do with the headings (the obvious thing does seem to be to click on them) but having the down arrow displayed for mobile users would help fix that problem.

There seems to be no documentation as to whether this can be turned on or off.

Website: https://en.believethesign.com/
MediaWiki 1.35.5
PHP 7.4.27 (fpm-fcgi)
MySQL 5.7.36-0ubuntu0.18.04.1-log
Mobile skin: MinervaNeue

Normally this is somewhat controlled by the config parameter $wgMFCollapseSectionsByDefault hower, be it set to true on false, section headings should display correctly on your system.

Are you able to toggle section to be displayed or collapsed?

We ended up discovering that we were missing some files on MobileFrontend. There was an entry in one of the git config files which was preventing the missing files from uploading. we removed that entry, the files suddenly appeared, and after uploading them, the expand/close arrows on headings appeared. Problem resolved.

Do you know which entry was missing ? I'm actually struggling with the same issue.

Sorry, I don't know. The above response was the message I received from my IT consultant.

my wiki have installed Extension:MobileFrontend.

i would like to show the logo in mobile version, i put value to $wgMobileFrontendLogo but nothing happens

Hello, I'm using MF REL1_34 on MW 1.34. For some reason, the ability to expand/collapse sections on pages has completely disappeared. Here is a live example. $wgMFCollapseSectionsByDefault = true; in my configuration.

Looking at the HTML it seems no elements that pertain to the collapsing are being added so this may me be a back-end issue.

I've just installed the extension and it isn't working for me either. Were collapsible sections fully supported beforehand? My infoboxes rely on them.

I had this issue on a couple pages on my wiki version 1.34.2 and determined that I had a div wrapped around multiple sections was messing up the collapsible sections. Not sure if this is your issue or not, but you could check the page and make sure there aren't any html elements like a <div> wrapping around multiple sections.

Edit: Looking at your site, I notice that on your h2 looks like <h2> whereas on a working collapsible h2 it should appear like <h2 class="section-heading collapsible-heading open-block" tabindex="0" aria-haspopup="true" aria-controls="content-collapsible-block-0">.

So MobileFrontEnd must be having trouble interpreting the h2 correctly. I can't view the page's source code, so I'm unable to determine the cause, but I'd guess it's the page's source code. If not that, I'd make sure that nothing in Mobile.css or Mobile.js is messing things up.

Thanks for this, I've made a mistake here. I thought the OP was referring to collapsible tables such as those with class mw-collapsible. Unfortunately it doesn't look like this was supported at all, but I'm not sure.

Ah, thanks for clarifying. Yeah I think OP was referring to <h2>'s which are collapsible in MobileFrontEnd. Whereas mw-collapsible is not, which is evident if you check out the collapsible examples in Manual:Collapsible_elements in Mobile View. None of the examples are collapsible in Mobile View, so it appears to not be supported.

I see a few phabricator tickets about mw-collapsible and MobileFrontend (phab:T71773, phab:T55136), and in general it seems their thought is that 'too many toggleable elements would be a bad design' and that 'Navboxes are hidden on mobile as they are generally cluttered and not mobile friendly.' Although, here is a newer ticket (phab:T111565) where it is being discussed again.

If you're intent on it, the one possible workaround I found was on some HelpDesk Tickets (Topic:Tobruzg16mrbs8f3 and Topic:U9dr0palyjw9fxkd) about this issue, someone mentions: "You'll need to add the jquery.makeCollapsible module which is not added by default on the Minerva skin."

I'm not sure how to do that, so this may not be super helpful, but perhaps it's a starting point if you're intent on getting collapsible infoboxes working. My own approach was just to give them the class "nomobile" so they didn't display on mobile, but I realize that may or may not make sense for your content.

Indeed, thanks for your help.

I have been reading over the documentation for JavaSript modules which aren't loaded in MobileFrontend. This is where my experience ends, I did try a quick fix but it broke the wiki so I'll have to dig a bit deeper!

Anyone reading this looking for mobile support, I'm currently using Skin:Refreshed which has worked well for me over six years, though MobileFrontend has now caught up in terms of available features.

Nice, yeah my next thought was setting a different default skin for MobileFrontend, but you're already on it.

Dumped a couple more hours into this problem and I've tracked it down to src/mobile.init/mobile.init.js (it's minified version to be precise). That file takes care of enabling the collapsing of section and it's simply not being called. I've tried loading it manually but it has too many convoluted dependencies and I can't properly debug their minified code.

I'm going to need to open a phabricator task...

Mobilefrontend does not retrieve items from the filecache, nor does it trigger the generation of a cached version of an article on first viewing. Opening articles on the desktop skin does this. I realise that there is a section on using Varnish, but for those of us that like to keep things simple, is there a way (i.e. a line to add to LocalSettings.php) that would trigger the generation of cached copies of articles for mobile devices? I don't much care if there has to be two cached files, one for desktop and one for mobiles, or one cached file with both data in.

Thanks for any pointers.

Hello! I am also looking for that functionallity, nothing is possible? I can see that load time for desktop version is much quicker than the mobile version, that doesn't make any sense in today's mobile world. CloudFlare doesn't cache the mobile version, either.

hello, I have a problem with Mobile Frontend, There are 2 logos when displayed on a mobile device, one logo is in the header and the other in the footer, it looks awful, I've been looking for a logo for 2 days since unsuccessful, but unsuccessful, I'd rather be there only text as on a wikipedia page. I use MinervaNeuer Skin and version 1.35 mediawiki.

I need remove h2 element and img from this bit of footer code