diff --git a/SkinVector.php b/SkinVector.php index f287df6a5..583d6f182 100644 --- a/SkinVector.php +++ b/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. diff --git a/Vector.hooks.php b/Vector.hooks.php new file mode 100644 index 000000000..98b9bed94 --- /dev/null +++ b/Vector.hooks.php @@ -0,0 +1,29 @@ +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 ); + } +} diff --git a/responsive.less b/responsive.less new file mode 100644 index 000000000..fe64581ff --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/skin.json b/skin.json index feaccf629..c8093e820 100644 --- a/skin.json +++ b/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 }