Make Vector more responsive

This functionality is off by default, behind a configuration variable
($wgVectorResponsive) by popular developer demand.

CSS/LESS code by James Hare, with tweaks and testing by Jack Phoenix.

Bug: T46387
Change-Id: Ib611357bbce739b1d193abaf89c228ba52613d6a

SkinVector.php

@@ -46,6 +46,10 @@ class SkinVector extends SkinTemplate {
 	public function initPage( OutputPage $out ) {
 		parent::initPage( $out );
 
+		if ( $this->getConfig()->get( 'VectorResponsive' ) ) {
+			$out->addMeta( 'viewport', 'width=device-width; initial-scale=1;' );
+		}
+
 		// Append CSS which includes IE only behavior fixes for hover support -
 		// this is better than including this in a CSS file since it doesn't
 		// wait for the CSS file to load before fetching the HTC file.

Vector.hooks.php

@@ -0,0 +1,29 @@
+<?php
+
+class VectorHooks {
+	/**
+	 * Register the 'skins.vector.styles' hook. This is temporary until responsive
+	 * mode becomes the default.
+	 */
+	public static function onResourceLoaderRegisterModules( ResourceLoader $rl ) {
+		$config = ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
+		$definition = array(
+			'position' => 'top',
+			'styles' => array(
+				'screen.less' => array(
+					'media' => 'screen',
+				),
+				'screen-hd.less' => array(
+					'media' => 'screen and (min-width: 982px)',
+				),
+			),
+			'localBasePath' => __DIR__,
+			'remoteSkinPath' => 'Vector'
+		);
+		if ( $config->get( 'VectorResponsive' ) ) {
+			$definition['styles']['responsive.less'] = array( 'media' => 'screen and (max-width: 768px)' );
+		}
+
+		$rl->register( 'skins.vector.styles', $definition );
+	}
+}

responsive.less

@@ -0,0 +1,78 @@
+/*
+	The styles below essentially place the navigation menu below the content,
+	instead of to the side of it. They also hide the logo, as there's no space
+	left for it.
+*/
+
+div#mw-head {
+	position: static !important;
+	margin-top: 0.5em;
+}
+
+/* Move the panel to the bottom and display it as in-line lists */
+div#mw-navigation {
+	div#mw-panel {
+		display: table;
+		position: static;
+		table-layout: fixed;
+		width: 100%;
+		overflow: hidden;
+		font-size: 150%;
+
+		.portal {
+			display: block;
+			width: 100%;
+		}
+
+		ul li {
+			list-style: none;
+		}
+	}
+}
+
+/* Hide the logo and tabs */
+div#p-logo,
+div#left-navigation,
+div#p-cactions,
+div#p-views {
+	display: none;
+}
+
+/* Rearrange various page elements to fill the now-available space */
+body div#footer {
+	margin-left: 0;
+	padding-top: 0;
+
+	/* don't need these in the footer either... */
+	li#footer-info-lastmod,
+	li#footer-info-viewcount {
+		display: none;
+	}
+}
+div#p-personal {
+	display: table;
+	position: relative;
+	width: 100%;
+	top: inherit;
+	left: inherit;
+	right: inherit;
+
+	ul {
+		padding-left: 0;
+	}
+}
+div#right-navigation {
+	max-width: 500px;
+	position: absolute;
+	top: inherit;
+	margin-top: -1px;
+	float: none;
+}
+div#p-search {
+	margin-left: 73px;
+}
+div#content {
+	/* Hide the 1px blue border on the left side */
+	border-left: 0;
+	margin-left: 0;
+}

skin.json

@@ -23,20 +23,16 @@
 	},
 	"AutoloadClasses": {
 		"SkinVector": "SkinVector.php",
-		"VectorTemplate": "VectorTemplate.php"
+		"VectorTemplate": "VectorTemplate.php",
+		"VectorHooks": "Vector.hooks.php"
 	},
+	"Hooks": {
+		"ResourceLoaderRegisterModules": [
+			"VectorHooks::onResourceLoaderRegisterModules"
+		]
+	},
+	"@note": "skins.vector.styles module registered via a hook",
 	"ResourceModules": {
-		"skins.vector.styles": {
-			"position": "top",
-			"styles": {
-				"screen.less": {
-					"media": "screen"
-				},
-				"screen-hd.less": {
-					"media": "screen and (min-width: 982px)"
-				}
-			}
-		},
 		"skins.vector.js": {
 			"scripts": [
 				"collapsibleTabs.js",
@@ -81,7 +77,8 @@
 	},
 	"config": {
 		"VectorUseSimpleSearch": true,
-		"VectorUseIconWatch": true
+		"VectorUseIconWatch": true,
+		"VectorResponsive": false
 	},
 	"manifest_version": 1
 }