Extension talk:MobileFrontend

About this board

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!

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.

How to Customize Mobile Menu Links

1
Knomanii (talkcontribs)

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. Only drawback is they all use the same watchlist.svg icon (which isn't so bad imo, they just look look like "bookmarked" menu links).

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
 
/* Todo: Customize link icons, currently they all use watchlist.svg */

Tested on:
MediaWiki 1.34.2
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!

Reply to "How to Customize Mobile Menu Links"

MODIFY THE MAIN MENU

14
Summary by Jdlrobson

This explains how you can circumvent the lack of main menu customisation in MobileFrontend/Minerva skin.

Jackqbox (talkcontribs)
For anyone interested in an personal change of the menu 
edit includes/skins/SkinMinerva.php
  • find
protected function getDiscoveryTools()
  • find the line
// Nearby link (if supported)
  • add above this line
		$menu->insert( 'Upload' )
			->addComponent(
				$this->msg( 'mobile-frontend-upload-button' )->escaped(),
				SpecialPage::getTitleFor( 'Upload',
					MWNamespace::getCanonicalName( $config->get( 'MFContentNamespace' ) ) )->getLocalUrl() .
						'#/test',
				MobileUI::iconClass( 'mf-upload-invert', 'before' ),
				[
					'id' => 'uploadButton',
					'data-event-name' => 'upload',
				]
			);
			
		$menu->insert( 'ListImages' )
			->addComponent(
				$this->msg( 'mobile-frontend-listimages-button' )->escaped(),
				SpecialPage::getTitleFor( 'ListFiles',
					MWNamespace::getCanonicalName( $config->get( 'MFContentNamespace' ) ) )->getLocalUrl() .
						'#/test',
				MobileUI::iconClass( 'mf-listimages-invert', 'before' ),
				[
					'id' => 'listimagesButton',
					'data-event-name' => 'ListImages',
				]
			);


edit i18n/en.json
  • find the line
"mobile-frontend-random-button": "Random",
  • add below
	
"mobile-frontend-upload-button": "Upload",
		
"mobile-frontend-listimages-button": "List Images",
edit extension.json
  • find the line "mobile.mainMenu.icons": {
  • find section

"images": { "anonymous": "resources/mobile.mainMenu.icons/anonymous.svg",

  • add below this line
				
"upload": "resources/mobile.mainMenu.icons/upload.svg",
"listimages": "resources/mobile.mainMenu.icons/listimages.svg",


allocate the folder resources/mobile.mainMenu.icons
  • add in resources/mobile.mainMenu.icons the required 2 new svg files with the desired icon
  • upload.svg
  • listimages.svg

i have tested this modification at twh4u.ddns.net

Sokote zaman (talkcontribs)

hello

in the Address not found:

For anyone interested in an personal change of the menu edit includes/skins/SkinMinerva.php


please check


i am using mediawiki 1.33

minerva:– (1903d1a)

MobileFrontend: 2.1.0


thanks@Jackqbox

31.168.97.178 (talkcontribs)

w/skins/MinervaNeue/includes/skins

Sokote zaman (talkcontribs)

thanks

Nicolas NALLET (talkcontribs)

Hi, With which versions of MediaWiki and MobileFrontend have you tested ?

Thanks

Jackqbox (talkcontribs)

MediaWiki 1.28.0 PHP 5.5.38 (fpm-fcgi) MariaDB 5.5.51-MariaDB

also in older versions ,but i don't have any reference of them anymore. i am focussing right now on 1.28.x There are more easy and fancy menu changes possible like selectable menu items etc , but until now i don't need them. You can see the concept idea of them in an pubic dutch news side NOS . com

-- press pagina's wijzigen --

Aloist (talkcontribs)

Does this work also on Mediawiki 1.31?

Silkwood (talkcontribs)

With MobileFrontend 2.1.0 and MW 1.32 insert:

$menu->insert( 'Upload' )

                        ->addComponent(

                                $this->msg( 'mobile-frontend-upload-button' )->escaped(),

                                SpecialPage::getTitleFor( 'Upload')->getLocalUrl() .'#/upload',

                                MobileUI::iconClass( 'mf-upload-invert', 'before' ),

                                [

                                        'id' => 'uploadButton',

                                        'data-event-name' => 'upload',

                                ]

                        );     

instead.

58.105.133.37 (talkcontribs)

Hi! Thanks for this guide! Just finding trouble with the last part - When you say 'edit extension.json' where are you finding that file? I look in the MobileFront end extension.json but i cannot file mobile.mainMenu.icons in the code, not the folder in the resources folder

Silkwood (talkcontribs)

MobileFrontend extension has changed since 1.32 and mobile.mainMenu.icons disappeared in 1.33

I don't know how to solve the problem so now I have a functioning Upload link without the upload Icon...

We need some help or wait for MinervaNeue to become indipendent from MobileFrontend.

Ciao.


Bazantik (talkcontribs)

Hi, I don't have the line "protected function getDiscoveryTools()" in my SkinMinerva.php. Is it due to some changes between versions of Minerva Neue? Is there any way how to customize/modify the side menu (main menu) for mobile frontend as is it possible in desktop version of MediaWiki (e.g. add AllPages to main menu)?

Thank you!

Exosvs (talkcontribs)

I have the same issue. That line isnt present in SkinMinerva.php

75.164.85.179 (talkcontribs)

Same issue. Those lines aren't present in the latest version of SkinMinerva.php that I just installed for MediaWiki 1.34.2.

Does anyone have an updated method to add a few extra links to the MobileMenu?

Thanks in advance.

Knomanii (talkcontribs)

As others have mentioned, this tutorial is somewhat outdated (GetDiscoveryTools() is no longer present in MinervaSkin.php).

So I made a simple script in Mobile.js that adds custom Mobile Menu items, with options for a nested dropdown menu as well.

I thought I'd share it in case it helps anyone else: Topic:Vqy1kx6q4e0bzvyb

Reply to "MODIFY THE MAIN MENU"
Xsteeplol (talkcontribs)

I cant see the captcha box (from the recaptcha in the extension "ConfirmEdit) when I would to save a page from a smartphone

CayceP (talkcontribs)
Reply to "Captcha"
75.164.85.179 (talkcontribs)

Hello! I'd like to make the MobileMenu to have the same page links as my MediaWiki:Sidebar page. I'm using the Minerva skin for Mobile.


Has anyone solved this problem? Any tips?


The "MODIFY THE MAIN MENU" tutorial below is outdated. The SkinMinerva.php file I just installed didn't have any of the code it said to look for — neither of the "getDiscoveryTools()" or "//Nearby Link" lines were anywhere to be found, so I'm pretty skeptical that any of that will work anymore.


Thanks much. Background info:

Running Mediawiki 1.34.2

Latest version of MobileFrontend (for 1.34.2)

Latest version of MinervaNeue (for 1.34.2)

75.164.85.179 (talkcontribs)

Could editing MediaWiki:Mobile.js to add a few custom <ul> and <li> sections via javascript do the trick?

Reply to "Customize MobileMenu?"
46.114.109.231 (talkcontribs)
CayceP (talkcontribs)

It looks like it has several viewport variants when I simulated different resolutions with Chrome's dev tools. Depending on your wiki, YMMV though.

Reply to "Adaptive web design?"
80.128.153.197 (talkcontribs)

Is there a way to add a js-button which toggles an alternate skin style? Or an alternate Minerva Style? Do to general readability I didn't changed the default Minerva Skin but some of the users keep asking for a dark mode (and personally I'm also interested if this is possible).

84.147.32.17 (talkcontribs)

You might be able to implement it through custom JavaScript and CSS that adds the class “dark” to <body> when toggled.

Reply to "Dark Mode"
Summary by Clump

Edit reverted.

84.147.32.17 (talkcontribs)

During the last edit, VisualEditor somehow ended up removing content. Now I can not undo it due to filter. Sorry for the accident.

Sections not collapsed or collapsible

1
Tinss (talkcontribs)

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.

Reply to "Sections not collapsed or collapsible"

How can I hide certain parts of the page only from mobile view of Mediawiki?

10
Happily8 (talkcontribs)

I am using MobileFrontEnd to generate the mobile view.

How can I hide certain elements from mobile view of Mediawiki?

Things like

<noinclude>content</noinclude>

will completely hide the content both from mobile view and desktop view,

but is there any code that will hide the content only from mobile view?

Nemo bis (talkcontribs)

You can use nomobile class, e.g. <span class="nomobile">hide this</span>. We also used to use noprint, but it was removed.

Happily8 (talkcontribs)

Thank you! Your answer helps me a lot. However it seems that there are two things. <span class="nomobile"> and <span class='nomobile'> Is there any difference between the two? Thank you again!

Nemo bis (talkcontribs)

Two things? I only see one, nomobile.

Happily8 (talkcontribs)

Oh I am sorry, I forgot to put nowiki tag when I put codes in the question. I fixed the question. Thank you!

Nemo bis (talkcontribs)

It's the same thing.

Happily8 (talkcontribs)

Thank you! I could check that the tag can hide texts from mobile view. However, it couldn't hide the whole table. I tried

<span class="nomobile"> {| class="wikitable mw-collapsible mw-collapsed" style="width: 50%;" |- ! title |- |dfsdf |- |}</span>

but it didn't hide the table from mobile. So instead I tried this

{| class="wikitable mw-collapsible mw-collapsed" |- !<span class="nomobile">blahblah</span> |- |<span class="nomobile">kk</span> |}

It worked. But isn't there any way to hide the whole table more simply?

Actually I decided to hide it because the table wasn't collapsed in the mobile. So if the question at https://www.mediawiki.org/wiki/Extension_talk:MobileFrontend#mw-collapsible_not_compatible_with_Mobilefrontend.3F_32385 is resolved, then I might not need <span class="nomobile"> in the first place :)

Edokter (talkcontribs)

You can't put a table inside a span; use <div class="nomobile">...</div> instead.

Blinkingline (talkcontribs)

Weird question, but is there a way to make parts of the main page only show up to Mobile view with a similar div class statement?

94.221.183.87 (talkcontribs)

class="mobileonly"

Reply to "How can I hide certain parts of the page only from mobile view of Mediawiki?"

How to disable discussions page?

6
Summary last edited by Farvardyn 06:48, 9 May 2020 3 months ago

Thanks!

2601:482:4401:6165:1DB4:FD8C:ABED:5889 (talkcontribs)

I currently have the discussion tab hidden by default for all on my website. However, on mobilefrontend, there is a discussions tab/link at the end of articles. How can I hide or disable it on mobilefrontend?

Jdlrobson (talkcontribs)

Add this to LocalSettings: $wgMFPageActions = array( 'edit', 'watch' ); to override the default $wgMFPageActions = array( 'edit', 'talk', 'upload', 'watch' );

Verdy p (talkcontribs)

I think it is a bad idea to disable discussions completely (unless there's a hopefully temporary technical reason for editing talk pages or adding talk threads on mobile, a bug that should be resolved). Discussing is a very important feature on any collaborative wiki and more and more people only use mobiles to view/edit wikis.

Now, disabling the discussions should NEVER depend on whever we are using the mobile version or the desktop version of the wiki. The functionality should be there, even if discussion pages have a different layout and editing mode on the mobile version, we should still be able to view them!

However the icon that is displayed on top of pages for going to discussions should probably be hidden and instead the option to talk could fit in the left-side pane with an explicit title "Talk about this page". There are also other polluting icons (those icons are using precious space at top of the article, moving down the content on a small smartphone screen), such as:

  • the "star" icon to follow that page. This should also go to the left-pane as a "Follow this page".
  • the "pencil" icon to edit that page. This should also go to the left-pane as a "Edit this page".
  • the "bubble" icon to discuss that page. This should also go to the left-pane as a "Talk about this page".
  • the history of the current page should also be located in that pane, just like the content of the left "Tools" side-bar displayed on the desktop version (linked pages, watch link pages, import file, special pages, adress of this version, page information, cite this page...), or the left side-bar just above it (Home, Help, Donate, Recent modifications...)
  • The user "Preferences" on that wiki should also be extended (we should not need to visit the desktop version for important settings such as the prefered language, mail options, ...) All they currently allow is to setup only one display option (images) specific to the Mobile version.
Jdlrobson (talkcontribs)

People use wikis for personal use.

Although we'd never disable them for Wikimedia projects this is a legitimate use case for a 3rd party project.

Farvardyn (talkcontribs)
Jdlrobson (talkcontribs)
Return to "MobileFrontend" page.