Skin talk:Metrolook

If mw.hook('wikipage.content') fires more than once by Javascript, it will be broken.

Steps to reproduce:

1. Open the debugger in your wiki by pressing Shift+Ctrl+I.
2. In the console, type mw.hook('wikipage.content').fire() and hit enter.
3. Click a header of the sidebar.
   -> The sidebar will be collapsed immediately after it is expanded.

From the Google Fonts pages, I believe this statement would allow Metrolook to use the Ubuntu and Kreon fonts:

@import url(GOOGLE URL FOR KREON AND UBUNTU&display=swap');

I would then like to make Ubuntu the primary sans-serif font, and Kreon the primary serif font.

My problem is, I can't tell which of the many files within the skin is the right place to do this. I think I need to add the font names themselves in variables.less, within these statements:

@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;

@font-family-sans-serif: sans-serif;

But when I added the import statement above into variables.less it seemed to break the skin, it was just pure text with no formatting.

Any help would be appreciated.

NOTE: I was getting linkspam warning for the import statement above, but the Google Fonts seems clear as to how the URL should be formatted.

The cause seems to be this javascipt error.

Uncaught TypeError: $(...).lastTabIndex is not a function

    at HTMLDocument.<anonymous> (<anonymous>:8:560)

    at mightThrow (load.php?lang=ja&modules=jquery&skin=metrolook&version=tqh7e:49)

    at process (load.php?lang=ja&modules=jquery&skin=metrolook&version=tqh7e:49)

When I looked into this problem, I found that the anchors work fine for English strings, but they seem to stop working for Unicode strings such as Japanese.

This is a great skin and I wanted to use it, but I'm a little disappointed.

Does anyone know how to solve this problem?

Thank you.

I added this code to MediaWiki:Metrolook.js and it worked.

$(function(){
	function hasDoubleByte(str) {
	    for (var i = 0, n = str.length; i < n; i++) {
	        if (str.charCodeAt( i ) > 255) { return true; }
	    }
	    return false;
	}
	/**********************************************************************************************
	 * Fix a bug where clicking on an title in the content did not scroll the screen to that section
	 */
	$(".tocnumber,.toctext").off("click").on("click",function(){
		if (hasDoubleByte(this.textContent)){
			var href = $(this).parent().attr("href");
			window.location.replace(href);
			setTimeout(function() {
				$('html, body').animate({
					scrollTop: '-=50'
				}, 200);
			},100);
		}
	});
	/**********************************************************************
	 * Fix the title being hidden in the menu when jumping to the anchor
	 */
	if(location.hash && window.scrollY < document.documentElement.scrollHeight - document.body.clientHeight){
		$('html, body').animate({
			scrollTop: '-=50'
		}, 200);
	}
});

resolved by switching to Skin:Chameleon and actually getting help on the issue (Topic:Wgkokxz80orubz59)

When scrolling down to edit a long page the visual editor toolbar vanishes under the top banner with Metrolook branch REL1_35. Anyone else experiencing this?

Product	Version
Metrolook	7.0 alpha 2 (bbdfc9a) 13:37, 23 July 2021
MediaWiki	1.35.3 (aeda3d3)
PHP	7.4.21 (apache2handler)
MariaDB	5.5.68-MariaDB
ICU	50.2
LuaSandbox	4.0.2
Lua	5.1.4
Elasticsearch	6.8.18

I solved this issue - the problem was that I forgot to reduce the layout in Corel

I want to change the vector icons that are used in the navigation of the header (ex.user icon). I open .svg in the program Corel Draw, change it, save, upload, but there is an empty space instead of the icon . Please tell me maybe there is some guide on this issue or a guide to settings when saving or anything else that could solve the problem?

change:

skin.json: "MediaWiki": ">= 1.36.0"

to

skin.json: "MediaWiki": ">= 1.34.0"

and then

replace every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php

as well as the last line from:

return $this->getSkin()->makeListItem( $key, $item, $options );

to

return parent::makeListItem( $key, $item, $options );

I'm running:

• MW 1.34.1 (b1f6480) 18:15, 30 April 2020
• git clone -b REL1_34 https://github.com/wikimedia/mediawiki-skins-Metrolook.git

but i'm having some minor issues and was wondering if the developers would recommend using -b master

Please advise. What is the best version for most up-to-date version compatible with MW 1.34.x. Thansk!

I've found that the REL1_35 release of Metrolook is incompatible with MW 1.34.x, due to use of Skin::makeListItem() which doesn't exist. (Metrolook commit b8f4807ccc6f3f9b)

So.. I installed version:REL1_35 in my MW 1.34.4 wiki and then replaced every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php and it seems to be working great!

Note - this effectively just "undoes" metrolook commmit b8f4807ccc6f3f9b114ada830d664703e02aee68

change:

skin.json: "MediaWiki": ">= 1.36.0"

to

skin.json: "MediaWiki": ">= 1.34.0"

and then

replace every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php

turns out the way to do this is to change 768px to 7680px in the following 2 locations:

components/mobile/mobile.less:@media (max-width: 768px) {
components/mobile/mobile-custom.less:@media (max-width: 768px) {

This will make metrolook keep the left side-bar menu collapsed for all screens less that 7,680 pixels. w00t!

Hi. I really love this skin. Thank you so much!

Can someone give me a pointer about how to make the Mediawiki:Sidebar (#mw-panel) collapsed by default regardless of screen-size? I see that metrolook uses JS to auto-collapse the sidebar when the main content div gets too crowded.. I'd really like to configure it to have the side bar menu collapsed by default regardless of crowding. Is this easy?

I found the line, "media": "screen and (min-width: 982px)" in the file skin.json, that seems to be related to what triggers the mw-panel JS, but I'm out of my area of understanding with json and so am leary about tinkering with it there.

@Paladox, is there a CSS statement I can place in Mediawiki:Metrolook.css that would make the side collapsed by default? (such that the user always sees the hamburger icon regardless of the screen size) Thanks!

Hi, I applied this skin in my wiki and I noticed the text in the top bar (Main Page, Discussion, View etc.) is not centered as it should be and as it is on https://www.pidgi.net/wiki/Main_Page.

But then I was looking at some links here and I see that it is not only my problem, it is the same for other wikis, for instance https://encyclopediaofastrobiology.org/wiki/Main_Page. I thought maybe it is my browser, but it is the same in all browsres and as I said it works correctly on PidgyWiki.

So, how do I center the text?

Don't know if you have found a solution but, said that I have the same problem, I realized that at PidgyWiki they use this:

Installed skins

Skin	Version	License	Description	Authors
Vector	–	GPL-2.0-or-later	Modern version of MonoBook with fresh look and many usability improvements	Trevor Parscal, Roan Kattouw and others

Hmmm ....

Hello, i like that the skin "Metrolook" must be installed and used in all Wikimedia Wikis, thanks

• MW 1.34.1 (b1f6480)
• Metrolook 7.0 alpha 2 (48c1b49)
• Page Forms 4.9.4 (c4fb7d3)

I'm experiencing a weird JS focus issue with the "popup" option of the #formlink parser function. I would like to know if anyone else is experiencing it. Basically, the scrollbar *jumps* to the top of the page every time I scroll down and then click on something. Thanks!