chipmunkmc/mediawiki-skins-Insurgency
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Responsive support, noJS version

Browse source 
* Add screen-mobile.css with basic mobile styles
* Force loading of screen-desktop on IE8- due to lack of
  @media width support
* Add some new divs and a set of spoof cactions for jumping
  around the page (what's js?)
* Replace cactions label with a more descriptive string (was
  previously set to display:none regardless)
* Also add a set of icons for fixed widths for tabs and things
  (icons-source.svg is the source file for the set, and includes
  a few others that ultimately weren't used here)

Cutoff 850px. Desktop styles should remain unchanged, with
mobile remaining stylistically consistent.

Change-Id: I737a7447db1e44e0d6abaa4c07813295a5ac73a6
This commit is contained in:
Isarra 2018-05-01 19:44:43 +00:00
parent 33e2eb5eef
commit 70d426d4fd
30 changed files with 1942 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
i18n/en.json
View file

@ -5,5 +5,9 @@
"skinname-monobook": "MonoBook", "skinname-monobook": "MonoBook",
"monobook-desc": "The classic MediaWiki skin since 2004, named after the black-and-white photo of a book in the page background", "monobook-desc": "The classic MediaWiki skin since 2004, named after the black-and-white photo of a book in the page background",
"monobook.css": "/* CSS placed here will affect users of the MonoBook skin */", "monobook.css": "/* CSS placed here will affect users of the MonoBook skin */",
"monobook.js": "/* Any JavaScript here will be loaded for users using the MonoBook skin */" "monobook.js": "/* Any JavaScript here will be loaded for users using the MonoBook skin */",
"monobook-jumptotop": "back to top",
"monobook-jumptopersonal": "user tools",
"monobook-more-actions": "More",
"monobook-cactions-label": "Page actions"
} }

6
i18n/qqq.json
View file

@ -10,5 +10,9 @@
"skinname-monobook": "{{name}}", "skinname-monobook": "{{name}}",
"monobook-desc": "{{desc|what=skin|name=MonoBook|url=https://www.mediawiki.org/wiki/Skin:MonoBook}}", "monobook-desc": "{{desc|what=skin|name=MonoBook|url=https://www.mediawiki.org/wiki/Skin:MonoBook}}",
"monobook.css": "{{optional}}\nCSS applied to users using MonoBook skin.", "monobook.css": "{{optional}}\nCSS applied to users using MonoBook skin.",
"monobook.js": "{{optional}}\nJS for users using MonoBook skin." "monobook.js": "{{optional}}\nJS for users using MonoBook skin.",
"monobook-jumptotop": "Label for mobile link icon to jump to top of page",
"monobook-jumptopersonal": "Label for mobile link icon to jump to user tools",
"monobook-more-actions": "Label for the less-important or rarer actions that are hidden from the usual tabs on mobile interfaces (like moving the page, or for sysops deleting or protecting the page). {{Identical|More}}",
"monobook-cactions-label": "Header for the content actions menu (tabs on the top of the page)"
} }

90
includes/MonoBookTemplate.php
View file

@ -96,7 +96,7 @@ class MonoBookTemplate extends BaseTemplate {
'dir' => $this->get( 'dir' ) 'dir' => $this->get( 'dir' )
], ],
Html::element( 'h2', [], $this->getMsg( 'navigation-heading' )->text() ) . Html::element( 'h2', [], $this->getMsg( 'navigation-heading' )->text() ) .
$this->getBox( 'cactions', $this->data['content_actions'], 'views' ) . $this->getCactions() .
$this->getBox( 'personal', $this->getPersonalTools(), 'personaltools' ) . $this->getBox( 'personal', $this->getPersonalTools(), 'personaltools' ) .
Html::rawElement( 'div', [ 'class' => 'portlet', 'id' => 'p-logo', 'role' => 'banner' ], Html::rawElement( 'div', [ 'class' => 'portlet', 'id' => 'p-logo', 'role' => 'banner' ],
Html::element( 'a', Html::element( 'a',
@ -107,7 +107,19 @@ class MonoBookTemplate extends BaseTemplate {
+ Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + Linker::tooltipAndAccesskeyAttribs( 'p-logo' )
) )
) . ) .
$this->getRenderedSidebar() Html::rawElement( 'div', [ 'id' => 'sidebar' ], $this->getRenderedSidebar() ) .
$this->getMobileNavigationIcon(
'sidebar',
$this->getMsg( 'jumptonavigation' )->text()
) .
$this->getMobileNavigationIcon(
'p-personal',
$this->getMsg( 'monobook-jumptopersonal' )->text()
) .
$this->getMobileNavigationIcon(
'globalWrapper',
$this->getMsg( 'monobook-jumptotop' )->text()
)
); );
$html .= '<!-- end of the left (by default at least) column -->'; $html .= '<!-- end of the left (by default at least) column -->';
@ -124,6 +136,80 @@ class MonoBookTemplate extends BaseTemplate {
echo $html; echo $html;
} }
/**
* Create a wrapped link to create a mobile toggle/jump icon
* Needs to be an on-page link (as opposed to drawing something on the fly for an
* onclick event) for no-js support.
*
* @param string $target link target
* @param string $title icon title
*
* @return string html empty link block
*/
protected function getMobileNavigationIcon( $target, $title ) {
return Html::element( 'a', [
'href' => "#$target",
'title' => $title,
'class' => 'menu-toggle',
'id' => "$target-toggle"
] );
}
/**
* Generate the cactions (content actions) tabs, as well as a second set of spoof tabs for mobile
*
* @return string html
*/
protected function getCactions() {
$html = '';
$allTabs = $this->data['content_actions'];
$tabCount = count( $allTabs );
// Normal cactions
if ( $tabCount > 2 ) {
$html .= $this->getBox( 'cactions', $allTabs, 'monobook-cactions-label' );
} else {
// Is redundant with spoof, hide normal cactions entirely in mobile
$html .= $this->getBox( 'cactions', $allTabs, 'monobook-cactions-label',
[ 'extra-classes' => 'nomobile' ]
);
}
// Mobile cactions tabs
$tabs = $this->data['content_navigation']['namespaces'];
foreach ( $tabs as $tab => $attribs ) {
$tabs[$tab]['id'] = $attribs['id'] . '-mobile';
$tabs[$tab]['title'] = $attribs['text'];
}
if ( $tabCount !== 1 ) {
// Is not special page or stuff, append a 'more'
$tabs['more'] = [
'text' => $this->getMsg( 'monobook-more-actions' )->text(),
'href' => '#p-cactions',
'id' => 'ca-more'
];
}
$tabs['toolbox'] = [
'text' => $this->getMsg( 'toolbox' )->text(),
'href' => '#p-tb',
'id' => 'ca-tools',
'title' => $this->getMsg( 'toolbox' )->text()
];
if ( $this->data['language_urls'] !== false ) {
$tabs['languages'] = [
'text' => $this->getMsg( 'otherlanguages' )->text(),
'href' => '#p-lang',
'id' => 'ca-languages',
'title' => $this->getMsg( 'otherlanguages' )->text()
];
}
$html .= $this->getBox( 'cactions-mobile', $tabs, 'monobook-cactions-label' );
return $html;
}
/** /**
* Generate the full sidebar * Generate the full sidebar
* *

10
includes/SkinMonoBook.php
View file

@ -40,13 +40,21 @@ class SkinMonoBook extends SkinTemplate {
function setupSkinUserCss( OutputPage $out ) { function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out ); parent::setupSkinUserCss( $out );
$out->addMeta( 'viewport',
'width=device-width, initial-scale=1.0, ' .
'user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0'
);
$out->addModuleStyles( [ $out->addModuleStyles( [
'mediawiki.skinning.interface', 'mediawiki.skinning.interface',
'mediawiki.skinning.content.externallinks', 'mediawiki.skinning.content.externallinks',
'skins.monobook.styles' 'skins.monobook.styles'
] ); ] );
// TODO: Migrate all of these // TODO: Migrate all of these (get RL support for conditional IE)
// Force desktop styles in IE 8-; no support for @media widths
$out->addStyle( $this->stylename . '/resources/screen-desktop.css', 'screen', 'lt IE 9' );
// Miscellanious fixes
$out->addStyle( $this->stylename . '/resources/IE60Fixes.css', 'screen', 'IE 6' ); $out->addStyle( $this->stylename . '/resources/IE60Fixes.css', 'screen', 'IE 6' );
$out->addStyle( $this->stylename . '/resources/IE70Fixes.css', 'screen', 'IE 7' ); $out->addStyle( $this->stylename . '/resources/IE70Fixes.css', 'screen', 'IE 7' );
} }

BIN
resources/images/icon-chat.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 317 B

22
resources/images/icon-chat.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="b">
<stop offset="0" stop-color="#d8eef8" stop-opacity=".996"/>
<stop offset="1" stop-color="#75badf"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#fef2d3"/>
<stop offset="1" stop-color="#fabd23"/>
</linearGradient>
<radialGradient id="d" cx="2.698" cy="1.985" r=".942" fx="2.698" fy="1.985" gradientTransform="matrix(1.23922 .18503 -.09172 .61432 -.452 .228)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<radialGradient id="c" cx="1.852" cy=".952" r=".926" fx="1.852" fy=".952" gradientTransform="matrix(2 0 0 .71429 -1.852 .378)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
</defs>
<path fill="url(#c)" fill-rule="evenodd" d="M.661.926v.794l.133.132.264.53h.265l1.19-.662V.926L2.25.661H.926z"/>
<path fill="url(#d)" fill-rule="evenodd" d="M1.455 1.72v.794l.397.264h1.455l.265-.264V1.72l-.265-.265H1.72z"/>
<path fill="#fff" fill-rule="evenodd" d="M1.455 1.72c.36 1.327 2.086.807 2.117.794l-.265.264-.661.132-.265.265h-.264l-.53-.53z"/>
<path fill="#a3a3a3" d="M1.852 2.646h.265v.265h-.265z"/>
<path fill="#a3a3a3" d="M.794.53v.264H2.38V.529zm0 .264H.529v1.058h.265zm0 1.058V2.91h.264V1.852zm.794-.53v.265H3.44v-.264zm0 .265h-.265v1.059h.265zm.264 1.323v.794h.265V2.91z"/>
<path fill="#a3a3a3" d="M1.588 2.646h.265v.265h-.265z"/>
<path fill="#4e4e4e" d="M2.381.794v.529h.265v-.53zm1.059.793v1.059h.264V1.587zm0 1.059h-.794v.264h.794zm-.794.264H2.38v.265h.265zm-.265.265h-.264v.265h.264zm-1.323-.794v.265h.265V2.38zm.53.265v.264h.529v-.264h-.53z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
resources/images/icon-globe.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 343 B

19
resources/images/icon-globe.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="b">
<stop offset="0" stop-color="#f6f9fe"/>
<stop offset="1" stop-color="#60acf9"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#9bc56a"/>
<stop offset="1" stop-color="#3d801e" stop-opacity=".932"/>
</linearGradient>
<radialGradient id="d" cx="26.167" cy="7.091" r="5" fx="26.167" fy="7.091" gradientTransform="matrix(.37042 0 0 .26458 -8.105 -.024)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<radialGradient id="c" cx="7.144" cy="1.587" r="1.521" fx="7.144" fy="1.587" gradientTransform="matrix(1.2174 0 0 .86957 -6.845 .207)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
</defs>
<path fill="url(#c)" fill-rule="evenodd" d="M.794 1.323l.264-.53.53-.264c.264-.264.793-.264 1.058 0l.529.265.265.529c.264.264.264.794 0 1.058l-.265.53-.53.264c-.264.265-.793.265-1.057 0l-.53-.265-.264-.529c-.265-.264-.265-.794 0-1.058z"/>
<path fill="url(#d)" fill-rule="evenodd" d="M2.117.397l-.53.132-.529.265-.132.264c.046.343.422.658.579.749.157.09.194.223.182.256-.013.033-.67.376-.761.583l.132.264.53.265.264.132.794-.132.264-.132-.264-.133s-.24-.002-.273-.15c-.033-.15.008-.379-.277-.602-.14-.11-.252-.066-.285-.136-.033-.07.07-.116.029-.199-.042-.083-.236-.136-.22-.244.017-.107.203.037.207-.029.004-.066-.004-.24.112-.244.205-.237.183-.594.178-.91zM2.91.66c-.181.096-.506.083-.529.302-.014.141-.019.405.104.624.184.331.514.291.616.253.122-.047.29-.248.47-.253l-.131-.264-.265-.53z"/>
<path fill="#8b8b8b" d="M1.588.265v.264h.793V.265zm0 .264h-.53v.265h.53zm-.53.265H.794v.529h.264zm-.264.529H.529V2.38h.265zm0 1.058v.53h.264v-.53zm.264.53v.264h.53V2.91zm.53.264v.265h.264v-.265z"/>
<path fill="#4e4e4e" d="M2.381.265v.264h.265V.265zm.265.264v.265h.529V.529zm.529.265v.529h.265v-.53zm.265.529V2.38h.264V1.323zm0 1.058h-.265v.53h.265zm-.265.53h-.53v.264h.53zm-.53.264h-.793v.265h.794z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
resources/images/icon-page.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 149 B

17
resources/images/icon-page.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#b8d6f4"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
<linearGradient id="b" x1="1.852" x2="1.852" y1="1.587" y2="3.175" gradientTransform="scale(3.77953)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path fill="#8b8b8b" d="M.794.265v2.91h.264V.529h1.059v.53h.264V.264z"/>
<path fill="url(#b)" d="M5 4v8h5V4H5z" transform="scale(.26458)"/>
<path fill="#fabd23" d="M2.381.794v.264h.265V.794H2.38z"/>
<path fill="#4e4e4e" d="M2.381.53v.264h.265V.529zm.265.264v.268l-.53-.004v.265h.794v1.852H.794v.265h2.381V1.058H2.91V.794z"/>
<path fill="#fabd23" d="M1.323 2.646v.264h1.323v-.264H1.323z"/>
<path fill="#538fc8" d="M1.058.794v.264h1.059V.794H1.058z"/>
<path fill="#fff" d="M1.058.53v2.645h.265V.794h.794V.529zm1.059.793v.264h.529v1.588h.264V1.323z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
resources/images/icon-search.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 328 B

29
resources/images/icon-search.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="c">
<stop offset="0" stop-color="#172bb3"/>
<stop offset=".804" stop-color="#b1d6e5"/>
<stop offset="1" stop-color="#5c8dc7"/>
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#e4c19d"/>
<stop offset="1" stop-color="#975f18" stop-opacity=".977"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#bdd7f3"/>
</linearGradient>
<radialGradient id="f" cx="12.249" cy="1.424" r=".728" fx="12.249" fy="1.424" gradientTransform="matrix(-.82724 -.02009 .02428 -.9997 12.12 3.422)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<radialGradient id="e" cx="2.888" cy="2.578" r=".562" fx="2.888" fy="2.578" gradientTransform="matrix(.47059 -.47059 .94118 .94118 -.875 1.579)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
<radialGradient id="d" cx="1.79" cy="1.499" r="1.224" fx="1.79" fy="1.499" gradientUnits="userSpaceOnUse" xlink:href="#c"/>
</defs>
<path fill="url(#d)" fill-rule="evenodd" d="M.794 1.058c-.265.265-.265.794 0 1.059l.529.529 1.19.132.53-.529-.133-1.19-.529-.53c-.264-.264-.793-.264-1.058 0z"/>
<path fill="url(#e)" fill-rule="evenodd" d="M2.91 2.117l.265.264.265.265c.264.264.264.264 0 .529-.265.265-.265.265-.53 0l-.264-.265-.132-.396.132-.133v-.264z"/>
<path fill="url(#f)" fill-rule="evenodd" d="M2.117 2.117c-.265.264-.265.264-.53 0l-.264-.265c-.265-.265-.265-.265 0-.53l.265-.264c.264-.264.264-.264.529 0l.264.265c.265.264.265.264 0 .53z"/>
<path fill="#4e4e4e" d="M2.381.53v.264h.265V.529zm.265.264v.264h.264V.794zm.264.264v1.323h.265V1.058zm.265 1.323v.265h.265V2.38zm.265.265v.529h.264v-.53zm0 .529h-.265v.265h.265zM1.587.794v.264h.53V.794zm0 .264h-.264v.265h.264zm-.264.265h-.265v.53h.265zm0 .53v.264h.264v-.265zm.264.793v.264h1.059v-.529H2.38v.265z"/>
<path fill="#a3a3a3" d="M1.323.265v.264H2.38V.265zm0 .264h-.265v.265h.265zm-.265.265H.794v.264h.264zm-.264.264H.529v1.059h.265zm0 1.059v.264h.264v-.264zm.264.264v.265h.265V2.38zm.265.265v.264h.264v-.264zm.794-1.588v.265h.264v-.265zm.264.265v.53h.265v-.53zm0 .53h-.264v.264h.264zm-.264.264h-.53v.264h.53zm.529.793v.265h.264V2.91zm.264.265v.265h.265v-.265z"/>
<path fill="#fff" fill-rule="evenodd" d="M1.69 1.267c-.153.038-.197.382-.197.382.148-.268.301-.19.317-.309.007-.052-.048-.091-.12-.073z"/>
<path fill="#a3a3a3" d="M1.587 3.175v.265h.794v-.265z"/>
<path fill="#e6e6e6" d="M1.058 3.175v.265h.53v-.265zm1.323 0v.265h.265v-.265z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
resources/images/icon-tools.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 208 B

22
resources/images/icon-tools.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="b">
<stop offset="0" stop-color="#d8eef8" stop-opacity=".996"/>
<stop offset="1" stop-color="#75badf"/>
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#fef2d3"/>
<stop offset="1" stop-color="#fabd23"/>
</linearGradient>
<radialGradient id="c" cx="2.016" cy="2.35" r=".893" fx="2.016" fy="2.35" gradientTransform="matrix(.2963 .2963 -1.48148 1.48148 5.001 -1.962)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
<radialGradient id="d" cx="2.646" cy="2.646" r=".628" fx="2.646" fy="2.646" gradientTransform="matrix(.42105 -.42105 .7071 .7071 -.34 1.889)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
</defs>
<path fill="#e6e6e6" fill-rule="evenodd" d="M1.72 1.984l-.53-.529.265-.264.53.529z"/>
<path fill="url(#c)" fill-rule="evenodd" d="M1.852 1.852l-.794.794c-.264.264-.264.264 0 .529.265.265.265.265.53 0l1.058-1.058-.53-.53z"/>
<path fill="#e6e6e6" fill-rule="evenodd" d="M2.117 1.587l.529.53.529-.265.397-.397-.397-.397v.265H2.91v-.265h.265L2.778.661l-.397.397zM.661 1.19l.662-.66.53-.265-.266.529-.264.529-.265.264H.794z"/>
<path fill="url(#d)" fill-rule="evenodd" d="M2.117 2.646l.529.529c.264.265.264.265.529 0s.265-.265 0-.53l-.53-.528z"/>
<path fill="#8b8b8b" d="M1.323.265v.264h.794V.265zm0 .264h-.265v.265h.265zm-.265.265H.794v.264h.264zm-.264.264H.529v.53h.265zM2.646.53v.265h.529V.529zm0 .265H2.38v.264h.265zm-.265.264h-.264v.53h.264zm-.264.53h-.265v.264h.265zm-.265.264h-.265v.265h.265zm-.265.265h-.264v.264h.264zm-.264.264h-.265v.265h.265zm-.265.265H.794v.529h.264zm2.117-1.588v.265h.53v-.265zm0 .265H2.91v.264h.265zm-.53.794v.264h.265v-.264zm.265.264v.265h.265V2.38z"/>
<path fill="#fff" d="M1.323.53v.264h.264V.529zm0 .264h-.265v.529h.265zm1.323 0v.264h.264V.794zm0 .264H2.38v.53h.265z"/>
<path fill="#4e4e4e" d="M1.587.53v.264h.265V.529zm0 .264h-.264v.529h.264zm0 .529v.264h.265v-.264zm0 .264h-.264v.265h.264zm-.264 0v-.264h-.265v.264zm-.265 0H.794v.265h.264zM2.91.794v.264h.265V.794zm0 .264h-.264v.265h.264zm.53.265v.264h.264v-.264zm0 .264h-.265v.265h.265zm-.265.265h-.53v-.265h-.528v.265h.264v.53h.265v-.265h.529zm-.794.53h-.264v.264h-.265v.264h.53zm0 .528v.265h.265V2.91zm.265.265v.265h.529v-.265zm.529 0h.265v-.53h-.265zM1.852 2.91h-.265v.265h.265zm-.265.265h-.529v.265h.53z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
resources/images/icon-triangle-down.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 B

14
resources/images/icon-triangle-down.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#8ed3e0"/>
<stop offset="1" stop-color="#3771c8"/>
</linearGradient>
<radialGradient id="b" cx="6.879" cy="6.813" r="1.455" fx="6.879" fy="6.813" gradientTransform="matrix(1 0 0 .72727 -5.292 -3.103)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path fill="url(#b)" fill-rule="evenodd" d="M3.572 1.455L2.382 2.91h-.53L.794 1.852.66 1.455z"/>
<path fill="#4e4e4e" d="M3.44 1.587v.265h.264v-.265zm0 .265h-.265v.265h.265zm-.265.265H2.91v.264h.265zm-.265.264h-.264v.265h.264zm-.264.265H2.38v.264h.265zm-.265.264h-.264v.265h.264z"/>
<path fill="#a3a3a3" d="M.53 1.323v.53h.264v-.266h2.91v-.264zm.264.53v.264h.264v-.265zm.264.264v.264h.265v-.264zm.265.264v.265h.264V2.38zm.264.265v.264h.265v-.264zm.265.264v.265h.265V2.91z"/>
<path fill="#5f5fd3" d="M3.175 1.587v.265h.265v-.265zm0 .265H2.91v.265h.265zm-.265.265h-.264v.264h.264zm-.264.264H2.38v.265h.265zm-.265.265h-.529v.264h.53z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
resources/images/icon-triangle-ltr.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 134 B

14
resources/images/icon-triangle-ltr.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#8ed3e0"/>
<stop offset="1" stop-color="#3771c8"/>
</linearGradient>
<radialGradient id="b" cx="1.587" cy="1.852" r=".728" fx="1.587" fy="1.852" gradientTransform="matrix(1.81818 0 0 2.54545 -1.299 -3.127)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path fill="url(#b)" fill-rule="evenodd" d="M1.19.661l1.456 1.456L1.19 3.572z"/>
<path fill="#4e4e4e" d="M1.323.53v.264h.264V.529zm.264.264v.264h.265V.794zm.265.264v.265h.265v-.265zm.265.265v.264h.264v-.264zm.264.264v.265h.265v-.265zm.265.265v.53h.264v-.53zm0 .53H2.38v.264h.265zm-.265.264h-.264v.264h.264zm-.264.264h-.265v.265h.265zm-.265.265h-.265v.265h.265zm-.265.265h-.529v.264h.53z"/>
<path fill="#a3a3a3" d="M1.058.53v2.91h.265V.53z"/>
<path fill="#5f5fd3" d="M1.323.794v.264h.264V.794zm.264.264v.265h.265v-.265zm.265.265v.264h.265v-.264zm.265.264v.265h.264v-.265zm.264.265v.53h.265v-.53zm0 .53h-.264v.264h.264zm-.264.264h-.265v.264h.265zm-.265.264h-.265v.265h.265zm-.265.265h-.264v.265h.264z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
resources/images/icon-triangle-rtl.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 188 B

14
resources/images/icon-triangle-rtl.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#8ed3e0"/>
<stop offset="1" stop-color="#3771c8"/>
</linearGradient>
<radialGradient id="b" cx="1.879" cy="1.852" r=".728" fx="1.879" fy="1.852" gradientTransform="matrix(-1.45455 0 0 2.9091 4.85 -3.8)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path fill="url(#b)" fill-rule="evenodd" d="M2.778.661l-1.19 1.191-.133.265 1.588 1.455V.662z"/>
<path fill="#4e4e4e" d="M2.91.53v2.91h-.264v.264h.529V.53zm-.264 2.91v-.265H2.38v.265zm-.265-.265V2.91h-.264v.265zm-.264-.265v-.264h-.265v.264zm-.265-.264V2.38h-.265v.265zm-.265-.265v-.264h-.264v.264z"/>
<path fill="#a3a3a3" d="M2.646.53v.264h.264V.529zm0 .264H2.38v.264h.265zm-.265.264h-.264v.265h.264zm-.264.265h-.265v.264h.265zm-.265.264h-.265v.265h.265zm-.265.265h-.264v.265h.264z"/>
<path fill="#5f5fd3" d="M1.587 2.117v.264h.265v-.264zm.265.264v.265h.265V2.38zm.265.265v.264h.264v-.264zm.264.264v.265h.265V2.91zm.265.265v.265h.264v-.265z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
resources/images/icon-triangle-up.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 134 B

15
resources/images/icon-triangle-up.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#8ed3e0"/>
<stop offset="1" stop-color="#3771c8"/>
</linearGradient>
<radialGradient id="b" cx="1.733" cy="1.852" r=".728" fx="1.733" fy="1.852" gradientTransform="matrix(0 -1.81818 2.54545 0 -3.127 5.268)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
</defs>
<path fill="url(#b)" fill-rule="evenodd" d="M.661 2.778v-.264L1.984 1.19l1.588 1.587z"/>
<path fill="#8b8b8b" d="M2.381 1.323v.265h.265v-.265zm.265.265v.264h.264v-.264zm.264.264v.265h.265v-.265zm.265.265v.264h.265v-.264zm.265.264v.265h.264V2.38z"/>
<path fill="#a3a3a3" d="M1.852 1.058v.265h.53v-.265zm0 .265h-.264v.265h.264zm-.264.265h-.265v.264h.265zm-.265.264h-.265v.265h.265zm-.265.265H.794v.264h.264zm-.264.264H.529v.265h.265z"/>
<path fill="#4e4e4e" d="M.53 2.91h3.174v-.264H.53z"/>
<path fill="#5f5fd3" d="M2.117 1.323v.265h.264v-.265zm.264.265v.264h.265v-.264zm.265.264v.265h.264v-.265zm.264.265v.264h.265v-.264zm.265.264v.265h.265V2.38z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

0
resources/images/user.gif → resources/images/icon-user.gif
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 B

After

Width:  |  Height:  |  Size: 325 B

0
resources/images/user.svg → resources/images/icon-user.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

1299
resources/images/icons-sourcefile.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

26
resources/screen-common.less
View file

@ -211,21 +211,8 @@ table.rimage {
/* /*
** the personal toolbar ** the personal toolbar
*/ */
#p-personal li.active {
#p-personal h3 { font-weight: bold;
.hidden();
li {
color: #2f6fab;
a {
color: #005896;
}
&.active {
font-weight: bold;
}
}
} }
/* Don't lowercase username */ /* Don't lowercase username */
@ -238,14 +225,6 @@ li#pt-anonuserpage {
color: @text-grey; color: @text-grey;
} }
/*
** the page-related actions- page/talk, edit etc
*/
#p-cactions h3 {
.hidden()
}
/* Override text-transform on languages where capitalization is significant */ /* Override text-transform on languages where capitalization is significant */
.capitalize-all-nouns .portlet h3, .capitalize-all-nouns .portlet h3,
.capitalize-all-nouns #p-personal ul, .capitalize-all-nouns #p-personal ul,
@ -355,6 +334,7 @@ div.multipageimagenavbox {
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
} }
hr { hr {
margin: 6px; margin: 6px;
} }

73
resources/screen-desktop.css
View file

@ -1,5 +1,9 @@
/* /*
** Desktop-specific styles for MonoBook ** Desktop-specific styles for MonoBook
**
** Must remain simple css (not less) for IE8- support; ResourceLoader does not support
** conditional IE loading, and so we cannot depend on it for anything here as this file
** is also loaded directly, bypassing ResourceLoader, in those browsers.
*/ */
div#column-content { div#column-content {
@ -110,7 +114,6 @@ input.searchButton {
left: 0; left: 0;
top: 0; top: 0;
z-index: 3; z-index: 3;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
padding: 0; padding: 0;
@ -121,6 +124,11 @@ input.searchButton {
line-height: 1.2em; line-height: 1.2em;
} }
#p-personal h3 {
position: absolute;
top: -9999px;
}
#p-personal .portlet, #p-personal .portlet,
#p-personal .pBody { #p-personal .pBody {
z-index: 0; z-index: 0;
@ -154,6 +162,7 @@ input.searchButton {
z-index: 0; z-index: 0;
border: 0; border: 0;
padding: 0; padding: 0;
color: #2f6fab;
display: inline; display: inline;
margin-left: 1em; margin-left: 1em;
line-height: 1.2em; line-height: 1.2em;
@ -161,6 +170,7 @@ input.searchButton {
} }
#p-personal li a { #p-personal li a {
color: #005896;
text-decoration: none; text-decoration: none;
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
@ -177,14 +187,19 @@ input.searchButton {
/* The icon in front of the username / login link */ /* The icon in front of the username / login link */
li#pt-userpage, li#pt-userpage,
li#pt-anonuserpage { li#pt-anonuserpage {
background-image: url( images/user.gif ); background-image: url( images/icon-user.gif );
/* @embed */ /* @embed */
background-image: linear-gradient( transparent, transparent ), url( images/user.svg ); background-image: linear-gradient( transparent, transparent ), url( images/icon-user.svg );
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 20px; padding-left: 20px;
} }
#p-lang {
position: relative;
z-index: 3;
}
/* /*
** the page-related actions- page/talk, edit etc ** the page-related actions- page/talk, edit etc
*/ */
@ -203,6 +218,11 @@ li#pt-anonuserpage {
font-size: 95%; font-size: 95%;
} }
#p-cactions h3 {
position: absolute;
top: -9999px;
}
#p-cactions ul { #p-cactions ul {
list-style-type: none; list-style-type: none;
list-style-image: none; list-style-image: none;
@ -212,8 +232,8 @@ li#pt-anonuserpage {
display: inline; display: inline;
border: 1px solid #aaa; border: 1px solid #aaa;
border-bottom: 0; border-bottom: 0;
margin: 0 0.5em 0 0;
padding: 0 0 1em 0; padding: 0 0 1em 0;
margin: 0 0.3em 0 0;
overflow: visible; overflow: visible;
background: #fff; background: #fff;
} }
@ -223,6 +243,11 @@ li#pt-anonuserpage {
font-weight: bold; font-weight: bold;
} }
#p-cactions li.selected a {
z-index: 3;
background-color: #fff;
}
#p-cactions li a { #p-cactions li a {
background-color: #fbfbfb; background-color: #fbfbfb;
color: #002bb8; color: #002bb8;
@ -235,15 +260,6 @@ li#pt-anonuserpage {
text-transform: lowercase; text-transform: lowercase;
} }
#p-cactions li.selected a {
z-index: 3;
background-color: #fff;
}
#p-cactions .new a {
color: #ba0000;
}
#p-cactions li a:hover { #p-cactions li a:hover {
z-index: 3; z-index: 3;
text-decoration: none; text-decoration: none;
@ -258,11 +274,24 @@ li#pt-anonuserpage {
padding-right: 0.5em; padding-right: 0.5em;
} }
#p-cactions .new a {
color: #c20;
}
#p-cactions #ca-addsection a { #p-cactions #ca-addsection a {
padding-left: 0.4em; padding-left: 0.4em;
padding-right: 0.4em; padding-right: 0.4em;
} }
#p-cactions .pBody {
font-size: 1em;
background-color: transparent;
color: inherit;
border-collapse: inherit;
border: 0;
padding: 0;
}
/* offsets to distinguish the tab groups */ /* offsets to distinguish the tab groups */
li#ca-talk { li#ca-talk {
margin-right: 1.6em; margin-right: 1.6em;
@ -275,18 +304,12 @@ li#ca-print {
margin-left: 1.6em; margin-left: 1.6em;
} }
#p-cactions .pBody { /*
font-size: 1em; ** mobile toggles; not used here
background-color: transparent; */
color: inherit; #p-cactions-mobile,
border-collapse: inherit; .menu-toggle {
border: 0; display: none;
padding: 0;
}
#p-lang {
position: relative;
z-index: 3;
} }
/* /*

304
resources/screen-mobile.less Normal file
View file

@ -0,0 +1,304 @@
/*
** Mobile styles for MonoBook
*/
@import 'variables.less';
div#column-content {
padding-top: 6em;
}
.mw-body {
border-right: 0;
border-left: 0;
}
/*
** Navigation
*/
@top-position: 5px;
@block-size: 35px;
.menu-toggle {
display: block;
width: @block-size;
height: @block-size;
background: @content-background;
border: solid 1px @orange-border;
box-sizing: border-box;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 4;
}
#sidebar-toggle {
.background-image-svg( 'images/icon-triangle-down.svg', 'images/icon-triangle-down.gif' );
position: absolute;
top: @top-position;
left: 1em;
}
#p-personal-toggle {
.background-image-svg( 'images/icon-user.svg', 'images/icon-user.gif' );
position: absolute;
top: @top-position;
right: 1em;
}
#globalWrapper-toggle {
.background-image-svg( 'images/icon-triangle-up.svg', 'images/icon-triangle-up.gif' );
margin: 1em auto;
}
/*
** search
*/
#p-search {
position: absolute;
z-index: 3;
top: @top-position;
left: 0;
width: 100%;
padding: 0 @block-size + 20px;
box-sizing: border-box;
h3 {
.hidden();
}
}
#searchBody {
border: solid 1px @orange-border;
background-color: @content-background;
height: @block-size;
box-sizing: border-box;
}
#searchform {
position: relative;
width: 100%;
padding: 3px 42px 3px 9px;
box-sizing: border-box;
}
#searchInput {
width: 100%;
height: @block-size - 8px;
border: solid 1px @content-border;
padding: 0 0.25em;
box-sizing: border-box;
}
#searchGoButton {
position: absolute;
box-sizing: border-box;
top: 1px;
right: 6px;
height: @block-size - 4px;
width: @block-size;
text-indent: -99999px;
border: 0;
background: none;
.background-image-svg( 'images/icon-search.svg', 'images/icon-search.gif' );
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
#mw-searchButton {
display: none;
}
/*
** site nav
*/
#p-cactions,
#p-personal,
.generated-sidebar,
#p-tb,
#p-lang {
margin: 1em;
overflow: visible;
.pBody {
border: solid 1px @content-border;
background: @content-background;
padding: 0.5em;
}
ul {
margin: 0;
}
li {
display: inline-block;
border-left: solid 1px @content-border;
padding: 0 0.5em;
white-space: nowrap;
&:first-child {
border-left: 0;
padding-left: 0;
}
// wtf echo
&#pt-notifications-alert,
&#pt-notifications-notice {
border-left: 0;
}
&.selected {
font-weight: bold;
a {
color: @text-color;
}
}
}
}
/*
** fake cactions
*/
#p-cactions-mobile {
position: absolute;
top: 3.75em;
left: 0;
padding: 0 1em;
width: 100%;
box-sizing: border-box;
h3 {
display: none;
}
ul {
margin: 0;
list-style: none;
}
li {
display: inline-block;
border: 1px solid @content-border;
border-bottom: 0;
margin-right: 0.5em;
height: 2.5em;
a {
.icon-tab();
display: block;
position: relative;
padding: 0.5em 1em 0.75em;
background-color: #fbfbfb;
.background-image-svg( 'images/icon-page.svg', 'images/icon-page.gif' );
background-position: 50% 50%;
background-repeat: no-repeat;
text-transform: lowercase;
}
&#ca-talk-mobile a {
.background-image-svg( 'images/icon-chat.svg', 'images/icon-chat.gif' );
}
&#ca-more {
border: 0;
a {
background-color: transparent;
.background-image-svg( 'images/icon-triangle-ltr.svg', 'images/icon-triangle-ltr.gif' );
background-position: 100% 40%;
text-indent: 0;
padding-left: 0.5em;
padding-right: 1.35em;
width: auto;
}
}
&#ca-languages a {
.background-image-svg( 'images/icon-globe.svg', 'images/icon-globe.gif' );
}
&#ca-tools a {
.background-image-svg( 'images/icon-tools.svg', 'images/icon-tools.gif' );
}
&.selected {
border-color: @orange-border;
font-weight: bold;
}
&.selected a,
&:hover a {
z-index: 3;
background-color: @content-background;
text-decoration: none;
}
&#ca-languages,
&#ca-tools {
float: right;
margin-right: 0;
margin-left: 0.5em;
}
}
}
/*
** footer
*/
#footer li {
margin-left: 0;
}
#f-poweredbyico,
#f-copyrightico {
display: inline;
margin: 0 0.5em;
}
/*
** images
*/
div.thumb {
float: none;
margin: 1em auto;
}
div.tright {
margin-left: 0;
padding-left: 0;
}
div.tleft {
margin-right: 0;
padding-right: 0;
}
.thumbinner {
width: 100% !important; /* stylelint-disable-line declaration-no-important */
box-sizing: border-box;
}
.mw-body-content {
overflow: auto;
}
/* Keep images from overflowing */
.mw-body-content img {
height: auto !important; /* stylelint-disable-line declaration-no-important */
max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
}
/*
** table of contents
*/
#toc,
.toc,
.mw-warning {
width: 100%;
box-sizing: border-box;
}
.nomobile {
display: none;
}

8
resources/variables.less
View file

@ -20,3 +20,11 @@
top: -9999px; top: -9999px;
left: 0; left: 0;
} }
// The mobile icon cactions tabs
.icon-tab() {
text-indent: -99999px;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 1em;
}

9
skin.json
View file

@ -2,6 +2,7 @@
"name": "MonoBook", "name": "MonoBook",
"author": [ "author": [
"Gabriel Wicke", "Gabriel Wicke",
"Isarra Yos",
"..." "..."
], ],
"url": "https://www.mediawiki.org/wiki/Skin:MonoBook", "url": "https://www.mediawiki.org/wiki/Skin:MonoBook",
@ -10,7 +11,7 @@
"license-name": "GPL-2.0-or-later", "license-name": "GPL-2.0-or-later",
"type": "skin", "type": "skin",
"requires": { "requires": {
"MediaWiki": ">= 1.25.0" "MediaWiki": ">= 1.29.0"
}, },
"ValidSkinNames": { "ValidSkinNames": {
"monobook": "MonoBook" "monobook": "MonoBook"
@ -25,12 +26,16 @@
}, },
"ResourceModules": { "ResourceModules": {
"skins.monobook.styles": { "skins.monobook.styles": {
"targets": [ "desktop", "mobile" ],
"styles": { "styles": {
"resources/screen-common.less": { "resources/screen-common.less": {
"media": "screen" "media": "screen"
}, },
"resources/screen-desktop.css": { "resources/screen-desktop.css": {
"media": "screen" "media": "screen and (min-width: 851px)"
},
"resources/screen-mobile.less": {
"media": "screen and (max-width: 850px)"
} }
} }
} }