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.
Hi all, I'm not sure this is the right place to ask it, but I'll go ahead anyway.
I'm trying to find a way to exclude a header (introduced between double curly brackets as a template) in the mobile version. This specific header creates an undesired design failure in the mobile version, but not on the desktop, so I wouldn't like to supress it altogether.
The span class="nomobile" doesn't help, since it first complies the header, and afterwards it just doesn't parse it on mobiles (it's a css solution after all, so the error is still there, and it affects the data outside the span tags).
I need a way for the code to actually not access the header page at all in the mobile version (not to even reach the compliation phase).
I though about using an #if, but I can't find a magic word which informs of the used platform.
Is there such a magic word o something of the sort? Is there any way to exclude access to code on mobile devices (not only prevent it from showing)?
Hi, I am trying to get ConfirmEdit to work for the action "edit" as in WMF Wiki, I have MobileFrontend and MinervaNeue installed and ConfirmEdit uses hCaptcha. Now, when I edit a page on mobile and try to save it, I just get a placeholder text box that says "確認コードを入力" ("Enter confirm code", I am using a Japanese client, so it is in Japanese), The hCaptcha module does not appear. This is not a problem when creating an account on mobile or editing on PC. hCaptcha module appears without any problem. MobileFrontend 2.4.1 (8e9aead), ConfirmEdit 1.6.0. How can I resolve this?
After updating my wiki site to 1.41.0, MobileFrontend no longer load Mobile.css, instead it loads Minerva.css. Using Chrome's inspection tool, the loaded CSS has this URL:
I have a question regarding "mobileformat" param for parse API, we've seen that it is expected to be deprecated in favor of PCS here.
but, no notice at all under parse API docs here: https://www.mediawiki.org/wiki/API:Parsing_wikitext#API_documentation
I guess what I am asking is if the endpoint https://en.wikipedia.org/w/api.php?action=parse&page={title}&mobileformat is stable or will be deprecated anytime soon?
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!
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"
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.
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:
@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
Any progress of behavior of Gallery display on MobileFrontend? On my site, it does not showing captions and instead read "License information" along w/ the "Details" button.
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!
Hey there! I am optimizing my wiki. I used Google Speed Insights to measure the impact of the optimizations I made. However, MobileFront seems to slow down the wiki dramatically:
Mobile
First Contentful Paint 4,5 s
Largest Contentful Paint 4,6 s
Total Blocking Time 220 ms
Speed Index 5,4 s
Desktop
First Contentful Paint 0,3 s
Largest Contentful Paint 0,4 s
Total Blocking Time 0 ms
Speed Index 0,6 s
Is there any way to speed up the mobile experience?
Would it be possible to make this extension add a custom response header, like X-MobileFrontend? This would make it easier for caching reverse proxies like Varnish, or the Nginx FastCGI module's caching feature, to tell apart a mobile response from a desktop response, when using the extension's own auto-detection based on User-Agent.
On the mobile version of my wiki the sections are missing the usual arrows at the left hand side of the headings - and while the sections can be expanded, they can’t be closed/collapsed again afterwards. Does anyone know how to fix / try to fix this? Thanks
I updated mediawiki to 1.40, updated the Minerva Neue skin and Mobile Frontend extension and it still didn't work. I then Removed the "CollapsibleSections" Extension I'd downloaded and now it works.