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
Extension talk:MobileFrontend
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.
I've recently upgraded from 1.35 to 1.40. Unfortunately, the result is that now my main page does not perform the mobile formatting. That is, I'm getting a two-column display. Needless to say, my boxes are defined as "mf-XXX", and everything worked fine up until the upgrade to 1.40. Any idea what might have gone wrong?
PHP 7.4.3
So for anyone encountering a similar problem (as evident from previous topics), I resolved this by following the main page layout of helminthictherapywiki. I really appreciate the hard work put into this crucial extension, but some clear documentation on how to actually use it, and how it changes from version to version, would make it a lot more useful and usable.
This feature has been removed. While I found no changelog highlighting this change, Mobile Gateway/Mobile homepage formatting has been updated to describe how to do mobile main page formatting in 1.36+.
I suggest to set up a new (second) user skin setting page for "skin when viewing on mobile", which skin is then selected when on mobile.
Typewriter text ("<tt></tt>") is broken for the Mobile Frontend. This should be fixed in the skin's source code, without needing to set
#mw-content-text tt { font-family: monospace; font-size: large; }
in "MediaWiki:mobile.css".
Typewriter text is not displayed as monospace when Mobile Frontend is active.
Nicole Sharp (talk) 22:51, 4 September 2023 (UTC)
Additional suggested CSS for the Mobile Frontend:
Nicole Sharp (talk) 08:05, 5 September 2023 (UTC)
Skin:Minerva only supports HTML5 and does not have supported for deprecated tags such as the TT element. I'd recommend using the code element instead if you can.
If it doesn’t support <tt>, why doesn’t it just ignore its existence, but rather removes the default, appropriate styling browsers provide?
Because it uses the upstream reset file: http://meyerweb.com/eric/tools/css/reset/
There's a ticket to stop using that at https://phabricator.wikimedia.org/T205341 and a patch is welcome if anyone wants to provide it.
Editors should use the KBD element (not the CODE element) for "keyboarded text" which would be the closest HTML5 equivalent of "typewriter text". Technically, TT still has a semantic meaning (not just for styling) if it is used to format actual text output from a typewriter but this can still be expressed using KBD (typewriter input) or SAMP (typewriter output) instead. Either way though, a public wiki will likely have many contributors using deprecated tags, so not supporting deprecated tags like "big" will break the wiki. HTML5 is designed to be backwards-compatible with HTML 4 so all deprecated tags should remain supported. Nicole Sharp (talk) 12:30, 8 September 2023 (UTC)
This topic is moved from Topic:Xnptvuef38x7jel1 at Project:Support desk.
- MediaWiki version: 1.40.0
- PHP version: 8.1.21
- MariaDB version: 11.0.2
- MobileFronted version: 2.4.1
- Minerva version: 2023-06-29
- URL: https://wiki.mcbe-dev.net/
Hello, I am editing wiki on my phone. When I use desktop view, the page for comparing revisions is Special:Diff, which works correctly. But when I switch to mobile view, comparing revisions uses Special:MobileDiff, whose style is broken: The old and new revision are supposed to take up 50% of the screen width, but actually they both take up 100% of the screen width. (Example: Diff, MobileDiff)
I tried to compare revisions in Wikipedia. In Wikipedia, the view of Special:MobileDiff is completely different: There is no 2-column look, instead, the changes are highlighted. Example
Why are the views totally different? Are there any special configurations for Wikipedia, or is this mcbe-dev wiki missing something?
Update: Wikipedia is using the inline diff. It has enabled $wgShowDiffToggleSwitch, which is because it had updated to 1.41. --The second question is now answered.
I also located the piece of CSS that caused the style error in Special:MobileDiff:
.diff.diff tbody, .diff tr, .diff td {
display: block;
}
Finally, the code is located. Module: mobile.special.mobilediff.styles. Source code (GitHub).
Inline diff has nothing to do with $wgShowDiffToggleSwitch. To enable inline diff, you need to install wikidiff2 and then add $wgDiffEngine = 'wikidiff2'; to your LocalSettings.php.
I have created T345730 MobileDiff style error when diff engine is php for the style problem.
Skin:Vector#wgVectorResponsive
Does the same thing but with no extension, doesn't it?
$wgVectorResponsive was removed in MediaWiki 1.35; I don't know if it was replaced with anything else.
There are a lot of problems with MobileFrontend, especially with managing CSS for consistent display styling since it uses an entirely different skin and ignores "MediaWiki:common.css". Unfortunately "$wgVectorResponsive" doesn't seem to be working correctly for MediaWiki 1.39.4 LTS.
Nicole Sharp (talk) 22:58, 4 September 2023 (UTC)
@Nicole Sharp: $wgVectorResponsive was removed in MW 1.35, as I said in my previous comment.
It doesn't seem to have been removed completely but maybe it is just deprecated/unsupported. Enabling "$wgVectorResponsive" on MediaWiki 1.39.4 LTS does solve some problems like displaying unsorted lists using bullets instead of periods, but otherwise mismanages image placements so the pages are unreadable. If it was removed completely, then enabling it in "LocalSettings.php" shouldn't have any effect. I haven't tried using the new Vector 2022 skin yet though so this is just with the Vector Legacy.
Nicole Sharp (talk) 03:48, 5 September 2023 (UTC)
I upgraded my MediaWiki from 1.31 to 1.35 and updated MobileFrontend together with the Minerva skin but Special:MobileDiff doesn't show any color. When I compare it to another wiki on 1.31, the whole HTML structure is different. I'm missing all "mw-diff-inline-added" classes for example and so the diffs don't get styled. Does anyone have any idea?
I have the same issue and hopefully this can bump it up. Please, if someone knows the solution, mention me here as well.--Mario-WL (talk) 21:06, 24 August 2023 (UTC)
my wiki have installed Extension:MobileFrontend.
i would like to show the logo in mobile version, i put value to $wgMobileFrontendLogo but nothing happens
I have two different skins enabled on my wiki. My default one I'd like to show most users, and another one I'd like to show to mobile users.
I like MobileFrontend's $wgMFAutodetectMobileView and the Mobile/Desktop link at the bottom of the page to easily switch between the two, but I don't want any other modifications that the extension does.
I see things can be adjusted, like turning off $wgMFCollapseSectionsByDefault, but that still modifies the code to the allow users to collapse sections.That's just one of many other changes MobileFrontend makes.
Is there a way to disable all the changes the extension does and just use $wgMFAutodetectMobileView? Or is there another extension that might be better for what I'm looking for.
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.