Merge "Simplify responsive Vector implementation"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
b4a8287589
|
|
@ -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