Extension talk:MobileFrontend/2020

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.

MediaWiki:Loginprompt equivalent for mobile

What is the MediaWiki:Loginprompt equivalent for mobile? No I do not have access to any PHP files. Jidanni (talk) 11:49, 2 January 2020 (UTC)

Poor image quality on mobile

My images look fine on a desktop, and they even look fine on desktop mode on mobile, but it looks like MFE is rendering images using the thumbnail version of the file. Is there a way to tweak Mobile.css to alter the image path to not use the thumb and just use the regular image path? Blinkingline (talk) 23:29, 15 January 2020 (UTC)

SkinVector: how to move menu from bottom sidebar to hamburger?

It is better to stay at Vector skin in mobile view. Is there easy way to replace Sidebar menu from bottom of page to hamburger menu as in other skins? B.Shapoval (talk) 18:01, 30 January 2020 (UTC)

Posting replies in threads jumping

I hope this the correct place. I use mobile view quite a bit. I've seen recently that a lot of my replies using the automated talk page replies system jumps them to different topics. One such entry is this:https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AWikiProject_Football&type=revision&diff=940232185&oldid=940231341 which was clearly supposed to reply to the topic below this. This is at least the third time this week this has happened. Any ideas if this has been raised elsewhere? ~ Lee Vilenski (talk) 17:31, 11 February 2020 (UTC)

Weird. I never faced this problem before. CC Jon. Ainz Ooal Gown (talk) 18:43, 11 February 2020 (UTC)

Add code in each section

How I can add some html or javascript code in end of each section? I can't find DOM-structure of page in mobie version. 85.238.103.28 (talk) 18:11, 13 February 2020 (UTC)

Infobox not showing correctly in MF?

See the screenshot here. The infobox was supposed to be of full width but the border is. Any help will be good to me and will be appreciated. Thanks in advance. Hardly4you (talk) 15:01, 14 February 2020 (UTC)

What is the code for the template? I think the problem is more likely from the template. Note that MediaWiki.Common.css is not loaded on MF in case you're relying on anything from there. – Ammarpad (talk) 17:59, 14 February 2020 (UTC)

Hello @Ammarpad, thanks for taking time to help me with my concern.

The code you requested is:{|class="infobox" style="width:300; float:right; clear:right; font-size:12px; background-color:#FFF5EE; border:1px solid #f98686"

|align=center colspan=2 bgcolor=#FAAAAA style=font-size:13px|MobileFrontend/2020

|-

|align=center colspan=2|

|-bgcolor=#FFE4E1 style=vertical-align:top align=left

|Developer(s)

|

|-style=vertical-align:top align=left

|Publisher(s)

|

|-bgcolor=#FFE4E1 style=vertical-align:top align=left

|Platform(s)

|

|-style=vertical-align:top align=left

|Release date

|

|-style=vertical-align:top align=left

|Rating(s)

|

|-bgcolor=#FFE4E1 style=vertical-align:top align=left

|Mode(s)

|

|-style=vertical-align:top align=left

|Media

|

|-bgcolor=#FFE4E1 style=vertical-align:top align=left

|Input

|

|}

And there is no CSS in Common.css.

You can see my wiki [here] for inspection purposes. Hardly4you (talk) 03:55, 15 February 2020 (UTC)

Hello everyone, it is urgent, so can anyone help me as fast as possible?

Any help would be awesome. Hardly4you (talk) 12:42, 17 February 2020 (UTC)

How to setup Main Page for Mobile

Hi all,

How to setup Main Page for Mobile?

Thanks!!! 171.232.66.162 (talk) 18:05, 14 February 2020 (UTC)

The answer depends on what you mean by "setup". Please elaborate.

Maybe the answer is the MobileFrontend extension on your wiki if you do not only refer to the main page only. Maybe the answer is custom CSS on your main page if you are only after responsive design. Maybe the answer is something else.

Please explain in way more than one sentence the exact problem that you want to solve. Malyacko (talk) 08:49, 6 April 2020 (UTC)

hi

Get help from this extension:

Extension:MobileDetect Sokote zaman (talk) 15:59, 22 March 2020 (UTC)

I don't see how that answers the question. :) Malyacko (talk) 08:50, 6 April 2020 (UTC)

Show or Hide Pages

How can the content of one or more pages be hidden from other users so that they are not displayed? Sokote zaman (talk) 16:44, 7 April 2020 (UTC)

Broadly speaking, page deletion. 「ディノ奴千？！」^{☎ Dinoguy1000} 17:03, 7 April 2020 (UTC)

@Sokote zaman, <!-- you mean this MediaWiki markup that causes the text not to be visible in reading mode? --> SGrabarczuk (WMF) (talk) 17:06, 7 April 2020 (UTC)

بعضی از صفحات هستند که محتوای خصوصی دارند

نمیخواهم دیگران ببینند

چیکار کنم دیگران نبینند؟ Sokote zaman (talk) 17:24, 7 April 2020 (UTC)

@Sokote zaman I do not see how this is related to the MobileFrontend. See Manual:Preventing access for general information. See Project:Support_desk for general questions. Thanks! Malyacko (talk) 23:32, 7 April 2020 (UTC)

How do I add a logo to mobile version?

Could someone guide me, how to add a logo for mobile view? It currently has the Wiki name only and I would like to replace it with an image. Thanks Hazara-Birar (talk) 14:01, 10 April 2020 (UTC)

Cannot create a new page in Special:search

In desktop view, when we search for a page which doesn't exist, we can see a message, "You may create the page "OOO", but consider checking the search results below to see whether the topic is already covered."

However, we cannot see this message in mobile view on Korean Wikipedia. How can we enable it in mobile view? 203.128.212.166 (talk) 03:08, 24 April 2020 (UTC)

add this to css moible :

.mw-search-createlink { display: block !important; } 2001:14BA:21FC:700:FC99:F9C5:CE49:D3C1 (talk) 21:55, 16 January 2021 (UTC)

Sections not collapsed or collapsible

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. Tinss (talk) 18:13, 4 June 2020 (UTC)

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. Garuda3 (talk) 22:30, 13 August 2020 (UTC)

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. Knomanii (talk) 23:33, 13 August 2020 (UTC)

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. Garuda3 (talk) 09:21, 14 August 2020 (UTC)

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 (Extension talk:MobileFrontend/2017#h-Collapse_working_with_MW_1.28.0_and_MFE_1.1.0_on_desktop,_not_mobile-2017-04-08T23:08:00.000Z and Extension talk:MobileFrontend/2018#h-mw-collapsible_is_ignored-2018-03-15T05:26:00.000Z) 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. Knomanii (talk) 10:08, 14 August 2020 (UTC)

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. Garuda3 (talk) 10:23, 14 August 2020 (UTC)

Nice, yeah my next thought was setting a different default skin for MobileFrontend, but you're already on it. Knomanii (talk) 07:13, 15 August 2020 (UTC)

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... Tinss (talk) 04:04, 1 February 2022 (UTC)

Dark Mode

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). 80.128.153.197 (talk) 08:26, 30 June 2020 (UTC)

You might be able to implement it through custom JavaScript and CSS that adds the class “dark” to <body> when toggled. 84.147.32.17 (talk) 12:21, 1 July 2020 (UTC)

Dark mode would be a great idea. One way to do this right away is to add custom css to MediaWiki:Mobile.css. Use the css from https://gist.github.com/AdamVig/5b1efdb3c71e3e0a0800a82a092503bc

It works somewhat but has some problems including slow load time where the screen flashes white with the default colors before it implements the extra css.

One could go in and monkey with the Minerva neue skin css directly, or create a second skin called Minerva neue dark, but all of this takes time and still leaves a problem where all users are locked into the dark mode even if they don't want it. I'm not sure why Mobilefrontend seems to lock users into one skin choice. ~ Flounder ceo (talk) 01:06, 19 October 2020 (UTC)

Accident

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

During the last edit, VisualEditor somehow ended up removing content. Now I can not undo it due to filter. Sorry for the accident. 84.147.32.17 (talk) 12:20, 1 July 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Adaptive web design?

Is this extension adaptive web design? I could not find that term on the description page. 46.114.109.231 (talk) 11:47, 2 July 2020 (UTC)

It looks like it has several viewport variants when I simulated different resolutions with Chrome's dev tools. Depending on your wiki, YMMV though. CayceP (talk) 10:51, 11 July 2020 (UTC)

Customize MobileMenu?

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 (talk) 06:20, 20 July 2020 (UTC)

Could editing MediaWiki:Mobile.js to add a few custom <ul> and <li> sections via javascript do the trick? 75.164.85.179 (talk) 06:51, 20 July 2020 (UTC)

How to Customize Mobile Menu Links

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 Knomanii (talk) 20:33, 27 July 2020 (UTC)

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 Lady G2016 (talk) 00:39, 23 August 2020 (UTC)

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 Ianbirtwistle (talk) 17:54, 27 September 2020 (UTC)

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) Lady G2016 (talk) 16:35, 29 September 2020 (UTC)

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) Knomanii (talk) 04:57, 12 October 2020 (UTC)

@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 (talk) 01:26, 13 October 2020 (UTC)

@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. Lady G2016 (talk) 15:11, 14 October 2020 (UTC)

@Knomanii thanks so much

ive been looking for the solution for a while

your code been a big help 171.246.102.136 (talk) 07:32, 17 November 2020 (UTC)

@Lady G2016 Thanks for the suggestion, will do! Knomanii (talk) 06:55, 20 November 2020 (UTC)

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 (talk) 21:27, 29 November 2020 (UTC)

@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. Knomanii (talk) 03:52, 30 November 2020 (UTC)

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 116.90.77.52 (talk) 05:50, 25 December 2022 (UTC)

The MediaWiki:Mobile.js script is still working with MediaWiki 1.39.1 and MobileFrontend 2.4.0. Lady G2016 (talk) 21:21, 26 December 2022 (UTC)

How to make the DropdownLinks auto show/expand the sub links instead of click it ? 58.26.207.18 (talk) 05:01, 26 February 2024 (UTC)

Hello, I tried to implement this on https://www.veikkos-archiv.com/index.php?title=MediaWiki:Mobile.js - but still without any effect. I thought it could also be due to extensions like SemanticMediaWiki or ParserFunctions. But it seems not. Are there any other ideas as to why this javascript is being suppressed? I look forward to help. Kyebert (talk) 10:57, 26 November 2024 (UTC)

Hey, for me the same issue. I cannot understand why such a professional extension does not have the possibility to change the menu entrys?

I would be really happy to find a solution for this problem but im not able to code it by myself.

greetings Darkaragon (talk) 20:20, 9 December 2024 (UTC)

Yes. A little bit sad.

But I found a solution: Extension talk:MobileFrontend/2024#h-Mobile.js_not_loading-20240825115000

Not MediaWiki:Mobile.js , but MediaWiki:Minerva.js Kyebert (talk) 16:30, 19 December 2024 (UTC)

I added the code to MediaWiki:Minerva.js but the menu only showed blue links and the Dropdown links had a weird criss cross over it. They work as links, but they are not styled like the rest of the menu. Any hints?

MediaWiki: 1.41.0

MobileFrontend: 2.4.1 Dumpstar (talk) 14:18, 14 April 2025 (UTC)

Make MobileFrontend optional

Is it possible to have the MobileFrontend off by default? thanks Garuda3 (talk) 22:12, 13 August 2020 (UTC)

Off by default for desktop, mobile, or both? Please clarify what you mean.

If you use the $wgMFAutodetectMobileView as below, MobileFrontEnd will by default be OFF for Desktop and ON for Mobile.

 wfLoadExtension( 'MobileFrontend' );
 $wgMFAutodetectMobileView = true;
 $wgMFDefaultSkinClass = "SkinMinerva";
 wfLoadSkin( 'MinervaNeue' );

Knomanii (talk) 23:39, 13 August 2020 (UTC)

Sorry, I should have been more clear with my message, I am looking for a way to have the MobileFrontend behind a setting in preferences, as I would like to test it but it is missing some functionality (like the collapsible tables).

Thanks Garuda3 (talk) 09:09, 14 August 2020 (UTC)

Some page elements are not displayed after upgrading to MW 1.35

Hello all!

i recently updated my Wiki to 1.35 and installed MobileFrontend extension. I have noticed that navigation bar as templates that I make for articles are not displayed in Mobile version of my wiki.

For example here is a Testpage where you can see Navigation bar at Desktop version of the site: Link 1

The same page of Mobile version and the nav bar is not displayed: Link 2

I checked html code of the mobile page and have not seen the code of the navigation bar.

Can someone help to find out why it happens and how to fix it? Fokebox (talk) 20:50, 2 October 2020 (UTC)

Maybe some elements were hidden on mobile by design to avoid obstruction.

Templates such as template:nutshell look different.

I have also noticed that they have Minerva-like retractable sections on all skins if the screen is narrow enough. 79.241.195.162 (talk) 02:31, 11 October 2020 (UTC)

I noticed that such Navigations bar are not displayed at mobile version of Wikipedia. So I guess this is extension global setting. Can someone let me know what should I turn to "true", so that navigation bar can be shown on the page? Fokebox (talk) 16:20, 4 October 2020 (UTC)

*Edit: I just reread your issue and better understand the issue now.

Sounds like the the collapsible navigation bar at the bottom of your page isn't displaying.

I think your issue is the same as discussed here: Extension talk:MobileFrontend/2020#h-Sections_not_collapsed_or_collapsible-2020-06-04T18:13:00.000Z

My understanding is that MobileFrontend does not display mw-collapsible elements, 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.

Basically, MobileFrontend does not support collapsible navboxes. And does not seem to provide a way to allow it. If it is absolutely necessary for your mobile users, you might try recreating the navbox without using collapsible code. Knomanii (talk) 03:16, 12 October 2020 (UTC)

Alternatively, you might try setting $wgMinervaApplyKnownTemplateHacks to true and see if that helps. The documentation says it could be helpful for Infobox templates so it might be worth a shot. Knomanii (talk) 05:16, 12 October 2020 (UTC)

In my case, this

$wgMinervaApplyKnownTemplateHacks = true;

has not resolved the issue. Fokebox (talk) 09:34, 12 October 2020 (UTC)

Hi Knomanii,

Thank you for your messages. Yes, that's correct understanding now. Well, I do need this navigation templates to be displayed on mobile version (it doesn't matter if they collapsible or not - it is better of course if it works just like in Desktop version. And I would like to note important thing that this navigation menu is displayed on the page of its template of Mobile version (see link): Link

So it is strange that in template page it is displayed and when I insert this navigation panel as template to any other pages it is NOT displayed. I would be actually happy to see this template displayed as in the link provided above. That's why it seems to be like a bug in the code. Fokebox (talk) 09:27, 12 October 2020 (UTC)

Yes, I agree it is strange that the content that displays on the template's page won't also display where it is embedded. I don't know why that is. It appears that the content is being stripped out by Minerva/MobileFrontend prior to display.

This would be time-consuming, but you might try comparing with templates that do work then start stripping down this template to the simplest elements (reduce it down to a single word or something) and make sure that works. Then start adding back in other sections one by one until it breaks. Then when it breaks, you will know what caused it.

Sorry, I don't have any other ideas on what the issue here is. Good luck. Knomanii (talk) 19:46, 12 October 2020 (UTC)

"toggle Desktop/Mobile view" misbehaves on HTTP sites

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Due to commit 8b754f, the stopMobileRedirect cookie wouldn't be sent to servers without HTTPS, which causes redirecting to desktop wouldn't be persistent.Will it be better having a protocol check before the cookie is set to be true? StarHeartHunt (talk) 13:42, 3 October 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

$wgMFDefaultSkinClass ?

The extension page mentions the variable $wgMFDefaultSkinClass five times.

However, the master and 1.35.0 MobileFrontend documentation (README.md & extension.json) do not mention that variable. Instead, that documentation includes the variable $wgDefaultMobileSkin. The stated default value for $wgDefaultMobileSkin is "minerva".

Is the extension page text outdated or is the variable $wgMFDefaultSkinClass still operative? If so, what is its effect and how does it differ from $wgDefaultMobileSkin. Tlgonline (talk) 15:58, 13 October 2020 (UTC)

The extension page is outdated. As a rule of thumb, consider any documentation on this wiki as outdated unless you already knew it's not or it matches the doc in the source or the autogenerated one in https://doc.wikimedia.org/.

Wiki pages here are updated manually and voluntarily; do not expect them to be always up-to-date or even accurate. – Ammarpad (talk) 15:41, 14 October 2020 (UTC)

Navbox/table contents misaligned in MobileFrontend

In mobile view, the cells within tables don't take up the full width of the table, nor do the cells center themselves horizontally within the table, when the contents of the cells don't cause the cells to expand to their full potential width. The cells instead are aligned to the left of the table and leave a gap to the right, unless the text or contents of the cells cause the cells to expand to take up the full width of the mobile screen in which case the cells do take up the full width of the table as I would expect them to.

I am using basic wiki table code to create an "infobox" that is aligned to the right in desktop view and elegantly takes up 100% of the horizontal space in mobile view. Unfortunately, the cells within the table don't avail themselves of 100% of the width available to them, causing an unsightly off-center gappy look.

I'll attempt to post markup below

Details:

MediaWiki 1.31.6

PHP 7.2.30 (cgi-fcgi)

MobileFrontend 2.1.0 EvilPastaSalad (talk) 00:13, 18 October 2020 (UTC)

Example markup resulting in a mobile view table in which the cells don't expand to the full width of the table:

{| width=245px align=right style="background:#EEEEEE"

! Page Title

|- align=center

|

[[File: Page_Title_Illustration.png|300px|thumb|center|]]

Some text below the image

|-

|

'''Blah:''' blah

'''Blah 2:''' blahblah

'''Blah 3:''' blahblahblah

|}> EvilPastaSalad (talk) 00:21, 18 October 2020 (UTC)

Lacking an answer, I came up with a way to fix this myself. Posting this in case this helps anyone in the future.

Firstly, let's not do this infobox thing with tables; it isn't the most appropriate way to do structural elements anyway... and your Minerva and Mobile style sheets will mess up your tables. Let's do this with DIVs. Secondly, this requires defining some DIV classes that will be styled differently in Common.css than from Mobile.css so that you can have a full-width infobox in mobile in which the contents remain centered. Thirdly, it looks like the way MediaWiki does thumbnails doesn't like to play well inside "infobox" divs (or tables) like this when viewed on wider-screened mobile devices, such as tablets and phones in landscape (it'll stop center aligning and instead hang left of center after a certain width), so let's go ahead and wrap that image wikitext with yet another DIV with a class that's styled in mobile to make it actually stay centered irrespective of the containing infobox's width.

Markup for a right-aligned infobox containing a thumbnail image, a centered heading above the thumbnail, and a div below. Keep in mind you can clean up your page by relegating most of this markup to a template and calling that template in your article rather than having an article cluttered with markup:playing home to left-aligned content:

<div class="infoboxright" style="background-color: #EEEEEE; text-align: center;">

'''Heading Text'''

<div class="actuallycentered">[[File: Sample_Illustration.png|225px|thumb|center|Image description.]]</div>

<div class="infoboxbody" style="background-color: #EEEEEE; text-align: left; margin: 0 auto; padding: 2px 2px 2px 4px;">

Content.

</div>

</div>

For inclusion in MediaWiki:Common.css:

div.infoboxright {

   float: right;

   width: 270px;

}

div.actuallycentered {

   max-width: 320px;

   margin: 0 auto;

}

For inclusion in MediaWiki:Mobile.css:

div.infoboxright {

   width: 100%;

   margin: 0 auto;

}

div.actuallycentered {

   max-width: 320px;

   margin: 0 auto;

} EvilPastaSalad (talk) 21:05, 2 November 2020 (UTC)

How do I defer offscreen images on mobile?

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I have $wgMFLazyLoadImages set to true on both 'beta' and 'base', and $wgNativeImageLazyLoading also set to true. It works on desktop but on mobile, Google PageSpeed Insights is still telling me to defer offscreen images. Wikipedia doesn't have this issue, so I'm wondering how to solve it. Vishkujo (talk) 22:03, 20 October 2020 (UTC)

Lazy loading is not working on the mobile version of my site's homepage (https://jojowiki.com/JoJo_Wiki) but it is working on some other pages. When checking the homepage's source, "lazy-image-placeholder" isn't added to any of the images. Vishkujo (talk) 23:18, 7 November 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

MediaWiki stops responding after opening sidebar (hamburger) menu then immediately closing it

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

On this wiki and also on Wikipedia, when browsing on my iPhone XR (iOS 14.1) I can browse around without issue. When I touch the 'hamburger' (sidebar) menu it displays as expected and I can utilize it's functions, i.e. Random page.

However if after the sidebar menu is displayed I immediately touch outside the menu to close it, the wiki stops responding and any links in the article won't work. If I hit refresh on the page, the page load hangs and never loads. The only way to get things working again is to close the browser tab and relaunch the wiki.

I've also reproduced the problem on my iPad Pro (iPadOS 14.1) and selecting the "Mobile view" link.

It doesn't appear to be browser related as I can reproduce the problem with Safari, Chrome and Edge on each device.

Added later: I had the opportunity test try the above using an IPad running iPadOS 13.3 and I cannot reproduce the problem using the native Safari browser. Peculiar Investor (talk) 15:26, 1 November 2020 (UTC)

ResolvedThe problem actually lies with Skin:Minerva Neue and was fixed for iOS 14.0 (T264376). There is a regression in the fix with iOS 14.1. Patch being worked on. Peculiar Investor (talk) 16:58, 4 November 2020 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Remove mobileaction=toggle_view_desktop link

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! Yellowcard (talk) 21:38, 16 November 2020 (UTC)

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. CarolinaReidBangingRocksDev (talk) 23:55, 20 July 2022 (UTC)

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 Yellowcard (talk) 15:05, 23 July 2022 (UTC)

Странно, у вас уже всё заработало? Мне ответили, что починили уже 80.91.23.227 (talk) 07:03, 1 August 2022 (UTC)

Css from MediaWiki:Mobile.css not being applied

I am using MW 1.31 and Timeless skin. I added the css in MediaWiki:Mobile.css, purged cache but I cannot see the css being applied. Is there any other way to apply the css? Spiros71 (talk) 13:41, 9 December 2020 (UTC)

Okay, so I missed this. Way back down it mentions a fix for this (not sure if this actually works):

Add mw.loader.using('mobile.site.styles') to your MediaWiki:Mobile.js

This solution was by User:Jdlrobson. However, I cannot link to it, since I trigger an abuse filter. SchizoidNightmares (talk) 22:59, 12 December 2020 (UTC)

Having this problem too. Mobile.css does not seem to apply, even after several hours and purging the cache. SchizoidNightmares (talk) 22:47, 12 December 2020 (UTC)

The way I used was to add any css directly in

resources\skins.minerva.content.styles\main.less

I can see it applied in other sites, like https://conanexiles-zh.gamepedia.com/MediaWiki:Mobile.js?variant=zh-sg Spiros71 (talk) 08:05, 13 December 2020 (UTC)

Signature

Hello. There are more and more people posting only on mobile, so is there a way to sign their posts without going through a template or copy and paste? Thanks! Ghybu (talk) 23:06, 27 December 2020 (UTC)

If the talk page already exists, Extension:DiscussionTools will add a signature if the user uses a reply link. I don't think it works when creating a new talk page, however. Garuda3 (talk) 21:44, 25 January 2021 (UTC)

Thanks! I just tested it. Indeed, when creating pages or adding a new discussion, no signature is added. On mobile, the answer is only added at the bottom of the page. But it always helps. However, it isn't present in Beta in all wikis. Do I have to make a request on Phabricator? Ghybu (talk) 00:41, 26 January 2021 (UTC)

Ah sorry I don't know about using it on a Wikimedia wiki. I'm currently using the reply tool and MobileFrontend on my own installation. It's definitely an improvement over raw editing of talk pages! Garuda3 (talk) 01:19, 26 January 2021 (UTC)

Your answer helped me :) Thanks Ghybu (talk) 01:26, 26 January 2021 (UTC)

Advanced mode as default

Hello, is it possible to set the advanced mode as default for all anonymous editors and logged in users? thanks Garuda3 (talk) 16:27, 28 December 2020 (UTC)