Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader module as well I propose the configuration is repurposed to disable the min-width on Vector and enable the viewport tag. This will allow us to use test.wikipedia.org to test Vector at lower resolutions in future as well as provide a suitable option for 3rd parties wanting to run a responsive version of Vector that can be opted into using: ``` $wgVectorResponsive = true; $wgVectorDefaultSkinVersion = '2'; ``` As part of this change, the default skin version is set to 2, in preparation for the next MediaWiki release. Note on Wikimedia wikis we explicitly set this version so this will not impact any of our deployed wikis. Bug: T242772 Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
This commit is contained in:
jdlrobson
Jdrewniak
parent
e220bc9e74
commit
68b989efb6
|
|
@ -5,11 +5,7 @@
|
|||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.styles",
|
||||
"maxSize": "9.7 kB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.styles.responsive",
|
||||
"maxSize": "0.6 kB"
|
||||
"maxSize": "9.8 kB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.legacy.js",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
namespace Vector;
|
||||
|
||||
use Config;
|
||||
use ExtensionRegistry;
|
||||
use HTMLForm;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
use OutputPage;
|
||||
|
|
@ -53,35 +52,6 @@ class Hooks {
|
|||
return $config->get( 'VectorWvuiSearchOptions' );
|
||||
}
|
||||
|
||||
/**
|
||||
* BeforePageDisplayMobile hook handler
|
||||
*
|
||||
* Make Legacy Vector responsive when $wgVectorResponsive = true
|
||||
*
|
||||
* @see https://www.mediawiki.org/wiki/Manual:Hooks/BeforePageDisplay
|
||||
* @param OutputPage $out
|
||||
* @param SkinTemplate $sk
|
||||
*/
|
||||
public static function onBeforePageDisplay( OutputPage $out, $sk ) {
|
||||
if ( !$sk instanceof SkinVector ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$mobile = false;
|
||||
if ( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
|
||||
|
||||
$mobFrontContext = MediaWikiServices::getInstance()->getService( 'MobileFrontend.Context' );
|
||||
$mobile = $mobFrontContext->shouldDisplayMobileView();
|
||||
}
|
||||
|
||||
if (
|
||||
self::isSkinVersionLegacy()
|
||||
&& ( $mobile || $sk->getConfig()->get( 'VectorResponsive' ) ) ) {
|
||||
$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
|
||||
$out->addModuleStyles( 'skins.vector.styles.responsive' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SkinPageReadyConfig hook handler
|
||||
*
|
||||
|
|
|
|||
|
|
@ -83,7 +83,20 @@ class SkinVector extends SkinMustache {
|
|||
$options['scripts'] = [ 'skins.vector.legacy.js' ];
|
||||
$options['styles'] = [ 'skins.vector.styles.legacy' ];
|
||||
$options['template'] = 'skin-legacy';
|
||||
} else {
|
||||
// For historic reasons, the viewport is added when Vector is loaded on the mobile
|
||||
// domain. This is only possible for 3rd parties or by useskin parameter as there is
|
||||
// no preference for changing mobile skin.
|
||||
$responsive = $this->getConfig()->get( 'VectorResponsive' );
|
||||
if ( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
|
||||
$mobFrontContext = MediaWikiServices::getInstance()->getService( 'MobileFrontend.Context' );
|
||||
if ( $mobFrontContext->shouldDisplayMobileView() ) {
|
||||
$responsive = true;
|
||||
}
|
||||
}
|
||||
$options['responsive'] = $responsive;
|
||||
}
|
||||
|
||||
$options['templateDirectory'] = __DIR__ . '/templates';
|
||||
parent::__construct( $options );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,125 +0,0 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
@import 'mediawiki.ui/variables.less';
|
||||
|
||||
@media screen and ( max-width: @width-breakpoint-tablet ) {
|
||||
#mw-head {
|
||||
position: static !important; /* stylelint-disable-line declaration-no-important */
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Move the panel to the bottom and display it as in-line lists */
|
||||
#mw-navigation {
|
||||
#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 */
|
||||
#p-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Rearrange various page elements to fill the now-available space */
|
||||
body .mw-footer {
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
|
||||
/* don't need these in the footer either... */
|
||||
#footer-info-lastmod,
|
||||
#footer-info-viewcount {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
display: table;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: inherit;
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
// float: none; Override not needed with `position: absolute` above.
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#left-navigation {
|
||||
// float: none; Override not needed with `position: absolute` above.
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#p-namespaces,
|
||||
#p-views,
|
||||
#p-variants {
|
||||
position: relative;
|
||||
top: 2.5em;
|
||||
}
|
||||
|
||||
#p-namespaces {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#p-cactions {
|
||||
top: 2.5em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#p-search {
|
||||
// float: none; Override not needed with `position: absolute` above.
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#simpleSearch {
|
||||
margin: 0 3em;
|
||||
width: 80vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vector-menu-dropdown .vector-menu-content-list {
|
||||
left: inherit;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.mw-body {
|
||||
/* Hide the 1px blue border on the left side */
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#mw-data-after-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -178,6 +178,10 @@ body {
|
|||
background-color: @background-color-page-container;
|
||||
}
|
||||
|
||||
.skin--responsive .mw-page-container {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
// Used as a container for absolutely positioned elements.
|
||||
.mw-page-container-inner {
|
||||
position: relative;
|
||||
|
|
|
|||
13
skin.json
13
skin.json
|
|
@ -65,7 +65,6 @@
|
|||
"vector": "GlobalVarConfig::newInstance"
|
||||
},
|
||||
"Hooks": {
|
||||
"BeforePageDisplay": "Vector\\Hooks::onBeforePageDisplay",
|
||||
"SkinPageReadyConfig": "Vector\\Hooks::onSkinPageReadyConfig",
|
||||
"GetPreferences": "Vector\\Hooks::onGetPreferences",
|
||||
"PreferencesFormPreSave": "Vector\\Hooks::onPreferencesFormPreSave",
|
||||
|
|
@ -108,13 +107,6 @@
|
|||
],
|
||||
"styles": [ "resources/skins.vector.styles/skin.less" ]
|
||||
},
|
||||
"skins.vector.styles.responsive": {
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"styles": [ "resources/skins.vector.styles.responsive.less" ]
|
||||
},
|
||||
"skins.vector.icons": {
|
||||
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
|
||||
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
|
||||
|
|
@ -215,14 +207,15 @@
|
|||
"description": "options for configuring where where max-width should and should not apply. More details can be found in Hooks::shouldDisableMaxWidth PHP documentation."
|
||||
},
|
||||
"VectorResponsive": {
|
||||
"value": false
|
||||
"value": false,
|
||||
"description": "@var boolean When wgVectorDefaultSkinVersion is set to 2, turn Vector into a responsive skin by applying a view port and disabling the min-width"
|
||||
},
|
||||
"VectorShowSkinPreferences": {
|
||||
"value": true,
|
||||
"description": "@var boolean Show skin-specific user preferences on the Special:Preferences appearance tab when true and hide them otherwise."
|
||||
},
|
||||
"VectorDefaultSkinVersion": {
|
||||
"value": "1",
|
||||
"value": "2",
|
||||
"description": "@var string:['2'|'1'] The version ('2' for latest, '1' for legacy) of the Vector skin to use for anonymous users and as a fallback. The value is _not_ persisted."
|
||||
},
|
||||
"VectorDefaultSkinVersionForExistingAccounts": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue