hyperzlib
/
isekai-mediawiki-skins-Timeless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add settings to use a particular layout even at higher resolutions

Browse Source 
(Cap at single column or single-sidebar instead of the default three-
column mode.)

Adds user preference options and a $wgTimelessDefaultLayout config to
change the default wiki-wide. Intended for people who hate change and
prefer the same navigation layout (sort of) as we've had forever, and
for people who are really bad at change and just keep getting confused
when everything keeps moving around across different sized devices, as
well as anyone else who just likes... options, I guess? Whatever the
case, this is seriously up there in the running for 'most requested
feature'.

Uses three separate modules to avoid sending all users the same styles
twice regardless of what they'll even use, as each set is mostly the
same, just with slightly different breakpoints. Not seeing any saner
ways to do this, however, as even with LESS we can only use mixins/
includes/& afters to avoid the duplication in terms of what we work on,
not what is generated.

Bug: T131803
Change-Id: I0538d36c2ed7a5009b2a0f75952671ac9447fd56
isekai
Isarra 5 years ago
parent 41afd6e2b2
commit 49a2ab3417
4 changed files with 122 additions and 11 deletions
Show Stats Download Patch File Download Diff File

6
i18n/en.json
Unescape Escape View File

@ -23,5 +23,9 @@
"timeless-projects": "Other projects",
"timeless-sitetitle": "{{int:Sitetitle}}",
"timeless.css": "/* CSS placed here will affect users of the Timeless skin */",
"timeless.js": "/* Any JavaScript here will be loaded for users using the Timeless skin */"
"timeless.js": "/* Any JavaScript here will be loaded for users using the Timeless skin */",
"timeless-layout-preference": "Full-width desktop layout (Timeless skin):",
"timeless-pref-one-column": "Single column: no sidebars",
"timeless-pref-two-column": "Two-column: Left sidebar navigation only",
"timeless-pref-three-column": "Three-column: Navigation and tools on left and right sides of content"
}

6
i18n/qqq.json
Unescape Escape View File

@ -30,5 +30,9 @@
"timeless-projects": "Label for the other projects dropdown",
"timeless-sitetitle": "{{ignore}}\nSite title for site banner",
"timeless.css": "{{optional}}\nCSS applied to users using Timeless skin.",
"timeless.js": "{{optional}}\nJS for users using Timeless skin."
"timeless.js": "{{optional}}\nJS for users using Timeless skin.",
"timeless-layout-preference": "Preferences label for full-width layout options",
"timeless-pref-one-column": "Label for single-column layout option",
"timeless-pref-two-column": "Label for two-column layout option",
"timeless-pref-three-column": "Label for three-column layout option"
}

67
includes/SkinTimeless.php
Unescape Escape View File

@ -29,6 +29,22 @@ class SkinTimeless extends SkinTemplate {
'mediawiki.skinning.content.externallinks',
'skins.timeless',
] );
$defaultLayout = $this->getConfig()->get( 'TimelessDefaultLayout' );
$layout = $this->getUser()->getOption( 'timeless-layout', $defaultLayout );
if ( $layout == 'one-column' ) {
// version without the max-width set
$out->addModuleStyles( [ 'skins.timeless.onecolumn' ] );
} elseif ( $layout == 'two-column' ) {
$out->addModuleStyles( [ 'skins.timeless.onecolumn.capped' ] );
$out->addModuleStyles( [ 'skins.timeless.twocolumn' ] );
} else {
$out->addModuleStyles( [ 'skins.timeless.onecolumn.capped' ] );
$out->addModuleStyles( [ 'skins.timeless.twocolumn.capped' ] );
$out->addModuleStyles( [ 'skins.timeless.threecolumn' ] );
}
$out->addModules( [
'skins.timeless.js',
'skins.timeless.mobile'
@ -46,4 +62,55 @@ class SkinTimeless extends SkinTemplate {
public function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out );
}
/**
* Add class for maximum column mode to <body> element
*
* @param OutputPage $out
* @param Skin $skin
* @param array &$bodyAttrs Existing attributes of the <body> tag as an array
*/
public static function onOutputPageBodyAttributes( $out, $skin, &$bodyAttrs ) {
if ( $skin->getSkinName() == 'timeless' ) {
$defaultLayout = $out->getContext()->getConfig()->get( 'TimelessDefaultLayout' );
$user = $out->getUser();
$layout = $user->getOption( 'timeless-layout', $defaultLayout );
$bodyAttrs['class'] .= ' timeless-' . $layout;
}
}
/**
* Add preference(s)
*
* @param User $user
* @param array &$preferences
*/
public static function onGetPreferences( User $user, array &$preferences ) {
$context = RequestContext::getMain();
$useskin = $context->getRequest()->getVal( 'useskin', false );
$skin = $useskin ?: $user->getOption( 'skin' );
$defaultLayout = $context->getConfig()->get( 'TimelessDefaultLayout' );
if ( $skin == 'timeless' ) {
$layouts = [
'one-column',
'two-column',
'three-column'
];
$layoutOptions = [];
foreach ( $layouts as $layoutOption ) {
$layoutOptions[$context->msg( "timeless-pref-$layoutOption" )->escaped()] = $layoutOption;
}
$preferences['timeless-layout'] = [
'type' => 'select',
'options' => $layoutOptions,
'default' => $user->getOption( 'timeless-layout', $defaultLayout ),
'label-message' => 'timeless-layout-preference',
'section' => 'rendering/skin'
];
}
}
}

54
skin.json
Unescape Escape View File

@ -20,6 +20,7 @@
},
"config": {
"TimelessBackdropImage": "cat.svg",
"TimelessDefaultLayout": "three-column",
"TimelessLogo": null,
"TimelessWordmark": null
},
@ -40,15 +41,6 @@
"resources/screen-desktop.less": {
"media": "screen and (min-width: 851px)"
},
"resources/screen-desktop-full.less": {
"media": "screen and (min-width: 1340px)"
},
"resources/screen-desktop-mid.less": {
"media": "screen and (min-width: 1100px) and (max-width: 1339px)"
},
"resources/screen-desktop-small.less": {
"media": "screen and (min-width: 851px) and (max-width: 1099px)"
},
"resources/screen-mobile.less": {
"media": "screen and (max-width: 850px)"
},
@ -59,6 +51,46 @@
},
"@NOTE": "Remember to also update variables.less if you change the width cutoffs here. screen-misc.less and mobile.js may also need updating."
},
"skins.timeless.onecolumn.capped": {
"targets": [ "desktop" ],
"styles": {
"resources/screen-desktop-small.less": {
"media": "screen and (min-width: 851px) and (max-width: 1099px)"
}
}
},
"skins.timeless.onecolumn": {
"targets": [ "desktop" ],
"styles": {
"resources/screen-desktop-small.less": {
"media": "screen and (min-width: 851px)"
}
}
},
"skins.timeless.twocolumn.capped": {
"targets": [ "desktop" ],
"styles": {
"resources/screen-desktop-mid.less": {
"media": "screen and (min-width: 1100px) and (max-width: 1339px)"
}
}
},
"skins.timeless.twocolumn": {
"targets": [ "desktop" ],
"styles": {
"resources/screen-desktop-mid.less": {
"media": "screen and (min-width: 1100px)"
}
}
},
"skins.timeless.threecolumn": {
"targets": [ "desktop" ],
"styles": {
"resources/screen-desktop-full.less": {
"media": "screen and (min-width: 1340px)"
}
}
},
"skins.timeless.js": {
"targets": [ "desktop" ],
"scripts": [
@ -96,5 +128,9 @@
"TimelessTemplate": "includes/TimelessTemplate.php",
"TimelessVariablesModule": "includes/TimelessVariablesModule.php"
},
"Hooks": {
"GetPreferences": "SkinTimeless::onGetPreferences",
"OutputPageBodyAttributes": "SkinTimeless::onOutputPageBodyAttributes"
},
"manifest_version": 1
}

Write Preview
Loading…
Cancel
Save