Browse Source

Initial skin from skin:Example; just renamed

Change-Id: Ic60e93eff08abe541635e135faf04e60a756f44c
downstream
Isarra 6 years ago
parent
commit
3a1bc368de
  1. 20
      Gruntfile.js
  2. 10
      Timeless.php
  3. 28
      Timeless.skin.php
  4. 248
      TimelessTemplate.php
  5. 7
      i18n/en.json
  6. 7
      i18n/qqq.json
  7. 12
      package.json
  8. 412
      resources/libraries/normalise.css
  9. 0
      resources/main.js
  10. 79
      resources/screen-common.less
  11. 47
      resources/screen-desktop.less
  12. 21
      resources/screen-mobile.less
  13. 10
      resources/variables.less
  14. 51
      skin.json

20
Gruntfile.js

@ -0,0 +1,20 @@
/*jshint node:true */
module.exports = function ( grunt ) {
grunt.loadNpmTasks( 'grunt-banana-checker' );
grunt.loadNpmTasks( 'grunt-jsonlint' );
grunt.initConfig( {
banana: {
all: 'i18n/'
},
jsonlint: {
all: [
'**/*.json',
'!node_modules/**'
]
}
} );
grunt.registerTask( 'test', [ 'jsonlint', 'banana' ] );
grunt.registerTask( 'default', 'test' );
};

10
Timeless.php

@ -0,0 +1,10 @@
<?php
/**
* This PHP entry point is deprecated. Please use wfLoadSkin() and the skin.json file
* instead. See https://www.mediawiki.org/wiki/Manual:Extension_registration for more details.
*/
if ( !function_exists( 'wfLoadSkin' ) ) {
die( 'The Timeless skin requires MediaWiki 1.25 or newer.' );
}
wfLoadSkin( 'Timeless' );

28
Timeless.skin.php

@ -0,0 +1,28 @@
<?php
/**
* SkinTemplate class for the Timeless skin
*
* @ingroup Skins
*/
class SkinTimeless extends SkinTemplate {
public $skinname = 'timeless', $stylename = 'Timeless',
$template = 'TimelessTemplate', $useHeadElement = true;
/**
* Add CSS via ResourceLoader
*
* @param $out OutputPage
*/
function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out );
$out->addMeta( 'viewport', 'width=device-width, initial-scale=1.0' );
$out->addModuleStyles( array(
'mediawiki.skinning.interface',
'mediawiki.skinning.content.externallinks',
'skins.timeless'
) );
$out->addModules( array( 'skins.timeless.js' ) );
}
}

248
TimelessTemplate.php

@ -0,0 +1,248 @@
<?php
/**
* BaseTemplate class for the Timeless skin
*
* @ingroup Skins
*/
class TimelessTemplate extends BaseTemplate {
/**
* Outputs the entire contents of the page
*/
public function execute() {
$this->html( 'headelement' );
?>
<div id="mw-wrapper">
<?php
$this->outputLogo();
?>
<div class="mw-body" role="main">
<?php
if ( $this->data['sitenotice'] ) {
?>
<div id="siteNotice"><?php $this->html( 'sitenotice' ) ?></div>
<?php
}
if ( $this->data['newtalk'] ) {
?>
<div class="usermessage"><?php $this->html( 'newtalk' ) ?></div>
<?php
}
?>
<h1 class="firstHeading">
<?php $this->html( 'title' ) ?>
</h1>
<div id="siteSub"><?php echo $this->getMsg( 'tagline' )->parse() ?></div>
<div class="mw-body-content">
<div id="contentSub">
<?php
if ( $this->data['subtitle'] ) {
?>
<p><?php $this->html( 'subtitle' ) ?></p>
<?php
}
if ( $this->data['undelete'] ) {
?>
<p><?php $this->html( 'undelete' ) ?></p>
<?php
}
?>
</div>
<?php
$this->html( 'bodytext' );
$this->html( 'catlinks' );
$this->html( 'dataAfterContent' );
?>
</div>
</div>
<div id="mw-navigation">
<h2><?php echo $this->getMsg( 'navigation-heading' )->parse() ?></h2>
<?php
$this->outputSearch();
echo '<div id="user-tools">';
$this->outputUserLinks();
echo '</div><div id="page-tools">';
$this->outputPageLinks();
echo '</div><div id="site-navigation">';
$this->outputSiteNavigation();
echo '</div>';
?>
</div>
<div id="mw-footer">
<?php
foreach ( $this->getFooterLinks() as $category => $links ) {
?>
<ul role="contentinfo">
<?php
foreach ( $links as $key ) {
?>
<li><?php $this->html( $key ) ?></li>
<?php
}
?>
</ul>
<?php
}
?>
<ul role="contentinfo">
<?php
foreach ( $this->getFooterIcons( 'icononly' ) as $blockName => $footerIcons ) {
?>
<li>
<?php
foreach ( $footerIcons as $icon ) {
echo $this->getSkin()->makeFooterIcon( $icon );
}
?>
</li>
<?php
}
?>
</ul>
</div>
</div>
<?php $this->printTrail() ?>
</body></html>
<?php
}
/**
* Outputs a single sidebar portlet of any kind.
*/
private function outputPortlet( $box ) {
if ( !$box['content'] ) {
return;
}
?>
<div
role="navigation"
class="mw-portlet"
id="<?php echo Sanitizer::escapeId( $box['id'] ) ?>"
<?php echo Linker::tooltip( $box['id'] ) ?>
>
<h3>
<?php
if ( isset( $box['headerMessage'] ) ) {
echo $this->getMsg( $box['headerMessage'] )->escaped();
} else {
echo htmlspecialchars( $box['header'] );
}
?>
</h3>
<?php
if ( is_array( $box['content'] ) ) {
echo '<ul>';
foreach ( $box['content'] as $key => $item ) {
echo $this->makeListItem( $key, $item );
}
echo '</ul>';
} else {
echo $box['content'];
}?>
</div>
<?php
}
/**
* Outputs the logo and (optionally) site title
*/
private function outputLogo( $id = 'p-logo', $imageonly = false ) {
?>
<div id="<?php echo $id ?>" class="mw-portlet" role="banner">
<a
class="mw-wiki-logo"
href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
?>" <?php
echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
?>></a>
<?php
if ( !$imageonly ) {
?>
<a id="p-banner" class="mw-wiki-title" href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>">
<?php echo $this->getMsg( 'sitetitle' )->escaped() ?>
</a>
<?php
}
?>
</div>
<?php
}
/**
* Outputs the logo and site title
*/
private function outputSearch() {
?>
<form
action="<?php $this->text( 'wgScript' ) ?>"
role="search"
class="mw-portlet"
id="p-search"
>
<input type="hidden" name="title" value="<?php $this->text( 'searchtitle' ) ?>" />
<h3>
<label for="searchInput"><?php echo $this->getMsg( 'search' )->escaped() ?></label>
</h3>
<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
</form>
<?php
}
/**
* Outputs the sidebar
* Set the elements to true to allow them to be part of the sidebar
*/
private function outputSiteNavigation() {
$sidebar = $this->getSidebar();
$sidebar['SEARCH'] = false;
$sidebar['TOOLBOX'] = true;
$sidebar['LANGUAGES'] = true;
foreach ( $sidebar as $boxName => $box ) {
if ( $boxName === false ) {
continue;
}
$this->outputPortlet( $box, true );
}
}
private function outputPageLinks() {
$this->outputPortlet( array(
'id' => 'p-namespaces',
'headerMessage' => 'namespaces',
'content' => $this->data['content_navigation']['namespaces'],
) );
$this->outputPortlet( array(
'id' => 'p-variants',
'headerMessage' => 'variants',
'content' => $this->data['content_navigation']['variants'],
) );
$this->outputPortlet( array(
'id' => 'p-views',
'headerMessage' => 'views',
'content' => $this->data['content_navigation']['views'],
) );
$this->outputPortlet( array(
'id' => 'p-actions',
'headerMessage' => 'actions',
'content' => $this->data['content_navigation']['actions'],
) );
}
private function outputUserLinks() {
$this->outputPortlet( array(
'id' => 'p-personal',
'headerMessage' => 'personaltools',
'content' => $this->getPersonalTools(),
) );
}
}

7
i18n/en.json

@ -0,0 +1,7 @@
{
"@metadata": {
"authors": [ "Isarra" ]
},
"skinname-timeless": "Timeless",
"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris."
}

7
i18n/qqq.json

@ -0,0 +1,7 @@
{
"@metadata": {
"authors": [ "..." ]
},
"skinname-timeless": "{{optional}}",
"timeless-desc": "{{desc|what=skin|name=WoOgLeShades|url=https://www.mediawiki.org/wiki/Skin:Timeless}}"
}

12
package.json

@ -0,0 +1,12 @@
{
"private": true,
"scripts": {
"test": "grunt test"
},
"devDependencies": {
"grunt": "0.4.5",
"grunt-cli": "0.1.13",
"grunt-banana-checker": "0.2.2",
"grunt-jsonlint": "1.0.4"
}
}

412
resources/libraries/normalise.css

@ -0,0 +1,412 @@
/*! normalize.css v3.0.mwfork.2 | MIT License | git.io/normalize */
/**
* Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct 'block' display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct 'inline-block' display not defined in IE 8/9.
* 2. Normalize vertical alignment of 'progress' in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying 'audio' without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address '[hidden]' styling not present in IE 8/9.
* Hide the 'template' element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
@supports (text-decoration: underline dotted) {
abbr[title] {
border-bottom: none;
text-decoration: underline dotted;
}
}
/**
* Address style set to 'bolder' in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable 'h1' font-size and margin within 'section' and 'article'
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent 'sub' and 'sup' affecting 'line-height' in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside 'a' element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address odd 'em'-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of 'select', unless a 'border' property is set.
*/
/**
* 1. Inherit most font properties to avoid cross-browser weirdness
* 2. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
line-height: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Address 'overflow' set to 'hidden' in IE 8/9/10.
*/
button {
overflow: visible;
}
/**
* Address inconsistent 'text-transform' inheritance for 'button' and 'select'.
* All other form control elements do not inherit 'text-transform' values.
* Correct 'button' style inheritance in Firefox, IE 8+, and Opera
* Correct 'select' style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native 'audio'
* and 'video' controls.
* 2. Correct inability to style clickable 'input' types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* 'input' and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting 'line-height' on 'input' using '!important' in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to 'content-box' in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* 'font-size' values of the 'input', it causes the cursor style of the
* decrement button to change from 'default' to 'text'.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address 'appearance' set to 'searchfield' in Safari 5 and Chrome.
* 2. Address 'box-sizing' set to 'border-box' in Safari 5 and Chrome
* (include '-moz' to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and 'textfield' appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct 'color' not being inherited in IE 6/7/8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the 'font-weight' (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

0
resources/main.js

79
resources/screen-common.less

@ -0,0 +1,79 @@
@import "variables.less";
/* Page layout */
html,
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#mw-wrapper {
margin: 0 auto;
position: relative;
}
.mw-body {
padding: 1em;
}
#p-logo {
text-align: center;
width: 10em;
a.mw-wiki-logo {
display: block;
content: '';
width: 10em;
height: 10em;
background-repeat: no-repeat;
background-position: 50% 50%;
}
}
/* Search form and personal menu in top-right corner */
#p-search {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
}
#p-personal {
position: absolute;
top: 3em;
right: 1em;
text-align: right;
ul {
list-style-type: none;
margin: 0;
}
}
/* Footer */
#mw-footer {
clear: both;
border-top: 1px solid @border;
margin-top: 1em;
padding: 1em;
}
#mw-footer ul {
list-style-type: none;
margin: 0;
}
#mw-footer ul li {
display: inline-block;
margin-right: 1em;
}
#mw-navigation h2,
#p-search h3,
#p-personal h3 {
.hidden;
}

47
resources/screen-desktop.less

@ -0,0 +1,47 @@
@import "variables.less";
#mw-wrapper {
width: 60em;
border-left: 1px solid @border;
border-right: 1px solid @border;
}
.mw-body {
width: @width;
border-left: 1px solid @border;
float: right;
padding-top: 6em;
}
#p-logo,
#mw-navigation {
width: 10em;
padding-left: 1em;
clear: left;
float: left;
}
#p-personal ul li {
display: inline-block;
margin-right: 1em;
}
#page-tools {
position: absolute;
top: 5em;
right: 1em;
width: @width;
div,
ul,
li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
li {
padding-right: 1em;
}
h3 {
.hidden;
}
}

21
resources/screen-mobile.less

@ -0,0 +1,21 @@
@import "variables.less";
.mw-body,
.firstHeading {
margin-top: 0;
}
#p-namespaces,
#p-views,
#p-actions {
float: left;
margin-right: 1em;
}
#p-navigation {
clear: both;
}
.mw-body,
#mw-navigation {
padding: 1em;
}

10
resources/variables.less

@ -0,0 +1,10 @@
@import "mediawiki.mixins";
@width: 46em;
@border: #ccc;
/* To hide objects, but keep them accessible for screen-readers */
.hidden() {
position: absolute;
top: -9999px;
}

51
skin.json

@ -0,0 +1,51 @@
{
"name": "Timeless",
"version": "0.1",
"author": "Isarra",
"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
"descriptionmsg": "timeless-desc",
"namemsg": "skinname-timeless",
"license-name": "GPL-2.0+",
"type": "skin",
"ValidSkinNames": {
"timeless": "Timeless"
},
"MessagesDirs": {
"Timeless": [
"i18n"
]
},
"ResourceModules": {
"skins.timeless": {
"class": "ResourceLoaderSkinModule",
"styles": {
"resources/libraries/normalise.css": {
"media": "screen"
},
"resources/screen-common.less": {
"media": "screen"
},
"resources/screen-desktop.less": {
"media": "screen and (min-width: 951px)"
},
"resources/screen-mobile.less": {
"media": "screen and (max-width: 950px)"
}
}
},
"skins.timeless.js": {
"scripts": [
"resources/main.js"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteSkinPath": "Timeless"
},
"AutoloadClasses": {
"SkinTimeless": "Timeless.skin.php",
"TimelessTemplate": "TimelessTemplate.php"
},
"manifest_version": 1
}
Loading…
Cancel
Save