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.

Hi, I would like to know how it is possible to insert something (text, image or even script) between the "sections" of the headings tags.

From this image it is easier to understand what I mean.

https://ibb.co/tKH2Kkr

Please, I've been trying for hours but can't find a solution.

MobileFrontend provides a feature that makes sections collapsible. I think it is also useful in the desktop as well as mobile, especially for the very long references section.

But I don't think MobileFrontend is responsible for the desktop. It would be nice if collapsible sections are splited out from MobileFrontend into a standalone extension.

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.

FYI: Installing this extension per the instructions doesn't do anything. The user will not see any difference in their website. One needs to also add `$wgMFAutodetectMobileView = true;` to LocalSettings.php or do some fancy additional configuration. Neither are mentioned here, and almost certainly should be. I would add it but... I have no clue how. I tried but there's some translate format I don't understand.

You can make the additions without worrying about the translation formatting (that's the recommended method for making edits here, as I understand), and someone who knows how to handle the formatting will follow along and add it for you.

I've just noticed that some templatestyles don't work the same on different pages. The example is:

This templatestyle works fine to number figures on a template page but not on other pages (e.g. user sandbox)

I can't work out what is causing it. Is there some difference in image div naming between pages?

Any ideas for a fix?

I'm not seeing any difference between the linked pages; as far as I can tell, they display identically. What differences specifically are you seeing? Have you tried viewing the pages while logged out, in a different browser, or using a different device?

Apologies - I needed to specify! The figure numbering is different. Specifically on this page, the text keeps repeating as "Figure 1"

What should happen is that:

• the text "Figure " counter(figure-n-counter) should display at the start of the caption
• then counter-increment: figure-n-counter; should increment up by one after each image

Aah, you're not the only one who needs to apologize. When I first looked, I de-mobile-ified your links before comparing them; opening and comparing them again without any twiddling, I see the same issue you're reporting here. So whatever's going on, it's a desktop-mobile skin difference. I haven't investigated any further than this, though.

Thanks! Also, feel free to let me know if there's a more logical place than here to ask for ideas!

Hi guys, adding new entries in the mobile menu isn't straightforward. Basing on two previous ideas, I developed a new one, in my opinion the most universal:

1. Menu entry is added via JavaScript code, using MediaWiki libraries.
2. Due to existing bug (https://phabricator.wikimedia.org/T240910), my solution includes a workaround (JS+CSS).
3. You can use any OOUI icon (but they are black, not gray. I didn't realize how fix it).

So, two parts. In MediaWiki:Mobile.js add:

/* Add some links to the menu */
$.when( mw.loader.using(['mediawiki.util', 'oojs-ui.styles.icons-interactions']), $.ready ).then( function() {
   var styleClasses = ["menu-list-item__button", "mw-ui-icon", "mw-ui-icon-before"]

   // Repeat following part for every link you want to add
   var helpUrl = mw.util.getUrl( '<page title>' ); // Here put the page title to get the valid URL
   
   // pt-preference is a section where add the link, more you find on 
   // https://en.wikipedia.org/wiki/Help:Customizing_toolbars
   var helpNode = mw.util.addPortletLink( 'pt-preferences', helpUrl, '<link name>').getElementsByTagName("a")[0];

   // Here you decide which icon to use. You can select any from the page below:
   // https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=mobile
   // In this example, I choose "helpNotice" from section "interactions". 
   // To use it, I needed to load "oojs-ui.styles.icons-interactions"
   // in the first line of the script, and build the class name as below. 
   // As an alternative, use icons referenced in previous solutions (links at the end).
   helpNode.classList.add("mw-ui-icon-helpNotice");
   styleClasses.map(function(x) {helpNode.classList.add(x)});
} );

Then, in MediaWiki:Mobile.css add:

/* Workaround for wrong menu rendering */
#mw-mf-page-left ul li a {
   font-size: 0.875em;
   font-weight: bold;
   vertical-align: middle;
}

#mw-mf-page-left ul li a span {
   font-size: 1em !important;
}

You can see an example how it works on https://wiki.fnin.eu/

Reference for other solutions: Topic:Vqy1kx6q4e0bzvyb and Topic:Tiggc18fvd3stmsf

"[arată]" from ro:Utilizator:NGC 54/PP1/MobilSubiecte it is not displayed on mobile. How can I fix this issue?

How can I hide text only from desktop on a Wikimedia wiki (Romanian Wikipedia)? In other words, that text should be visible only from mobile, but from desktop no. The context is ro:Special:Diff/14156938.

An answer?

You'll have to define a custom CSS class in your wiki's MediaWiki:Common.css file, with display: none;. For my wikis, I've used the class name mobile-show, but given the nomobile class included in the default styles (via Ext:MobileFrontend? I'm not actually sure), a class name such as nodesktop might make more sense/be easier to remember.

@Dinoguy1000: But what is the text that I should add in MediaWiki:Common.css?

.your_class_name {
    display: none;
}

Replace your_class_name with whatever name you decide to use for the class (note that the period before the name is not a mistake; this is what identifies it as a class to your browser).

@Dinoguy1000: ro:Utilizator:NGC 54/Teste and ro:Utilizator:NGC 54/PP1/Mobil/common.css. It does not work. Does it is possible to display Utilizator:NGC 54/PP1 as the Main Page for desktop and ro:Utilizator:NGC 54/PP1/Mobil as the Main Page for mobile without using tags like "nomobile", "mobileonly", "nodesktop", "mobile-show"...?

The CSS page you linked is not being applied to the test page you linked. In order to do that, you need to use Extension:TemplateStyles instead of putting the page name in a class attribute.

@Dinoguy1000: The content is now hidden both from mobile and desktop.

Yes, because your CSS file is being applied both on desktop and mobile. My original advice was based on putting the CSS in your wiki's MediaWiki:Common.css file, since that page is only loaded on desktop. If you instead intend for the CSS to be used via TemplateStyles, you'll have to add extra selectors to prevent it being applied when on mobile; unfortunately, I don't really know how to do this beyond vague ideas.

Is anyone able to update the header code on this site to the current version? Thanks!

(It wont let me link, so here is the code)

First, take your Google Analytics and Adsense code and convert all the single quotes to double quotes.

In SkinMinerva.php, find the getHeaderHtml() function, and replace the following code:

protected function getHeaderHtml() {

$title = $this->getOutput()->getPageTitle(); if ( $title ) { return Html::rawElement( 'h1', array( 'id' => 'section_0' ), $title ); } return '';

}

to the following:

protected function getHeaderHtml() { $title = $this->getOutput()->getPageTitle(); if ( $title ) { $result = 'INSERT AD CODE'; $result .= Html::rawElement( 'h1', array( 'id' => 'section_0' ), $this->getOutput()->getPageTitle() ); return $result; } return ''; }

hey, I also need help in adding AdSense in header. Have you been able to get it solved?

Hi!

Two different widths, both times the title is hidden by the menu which not collapses correctly

I installed a new mediawiki 1.35.1 today and also installed the MobileFrontend as the only extension to the Wiki. In principle it works great but at some widths in Desktop-Browser on Mobile-View and also at the Standard iPhone-Width the right editting menu drops below the diskussion-menu and hides the title which looks bad.

When I deactivate the Extension the right menu collapses to a openable menu if the width gets too small. Is it just a bug or do I have to configure something, so the menu is collapsing correctly?

Best regards

Julian