Merge "Make Vector more responsive"
This commit is contained in:
commit
c2fda6d944
@ -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.
|
||||
|
29
Vector.hooks.php
Normal file
29
Vector.hooks.php
Normal file
@ -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 );
|
||||
}
|
||||
}
|
78
responsive.less
Normal file
78
responsive.less
Normal file
@ -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;
|
||||
}
|
23
skin.json
23
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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user