Paladox has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/327936 )
Change subject: Re organise Metrolook skin
......................................................................
Re organise Metrolook skin
This reduces some deplucations.
This update also loads the files that are needed. For example if you
want to support mobile (tablet included) and desktop then the mobile
less file is included which adds more proccessing to the browser.
Whereas if you disable mobile display then you do less processing.
Also remove two not needed any more js files. One of the files was from
mw core with customisations i made. It's no longer needed.
Change-Id: I5a1b89811af3aa158ea2531f9e242b631328e75c
---
M MetrolookTemplate.php
M README.md
M SkinMetrolook.php
M SkinMetrolookHooks.php
D components/collapsibleNav.custom.less
C components/custom/common.less
C components/custom/externalLinks.less
C components/custom/footer.less
R components/custom/navigation.less
C components/custom/personalMenu.less
A components/custom/search.less
C components/custom/tabs.less
R components/custom/theme.less
C components/custom/watchstar.less
R components/main/collapsibleNav.less
R components/main/common.less
R components/main/externalLinks.less
R components/main/footer.less
C components/main/navigation.less
R components/main/personalMenu.less
A components/main/search.less
R components/main/tabs.less
R components/main/watchstar.less
D components/mobile.less
A components/mobile/mobile-custom.less
A components/mobile/mobile.less
D components/search.less
D components/tablet.less
A components/tablet/tablet-custom.less
A components/tablet/tablet.less
M i18n/qqq.json
D js/collapsibleNav.custom.js
M js/collapsibleNav.js
D js/mediawiki.searchSuggest.custom.js
M js/metrolook.js
M js/metrolook.search.js
M js/vector.js
A screen-custom.less
M screen-hd.less
M screen.less
D screen.mobile.less
M skin.json
42 files changed, 1,237 insertions(+), 2,301 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Metrolook
refs/changes/36/327936/1
diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php
index da1a3ba..6a34036 100644
--- a/MetrolookTemplate.php
+++ b/MetrolookTemplate.php
@@ -185,10 +185,10 @@
// User name (or "Guest") to be displayed at the top right (on
LTR
// interfaces) portion of the skin
$user = $skin->getUser();
- if ( !$user->isLoggedIn() ) {
- $userNameTop = $skin->msg( 'metrolook-guest' )->text();
- } else {
+ if ( $user->isLoggedIn() ) {
$userNameTop = htmlspecialchars( $user->getName(),
ENT_QUOTES );
+ } else {
+ $userNameTop = $skin->msg( 'metrolook-guest' )->text();
}
// Output HTML Page
@@ -250,17 +250,7 @@
<a href="#mw-head"><?php
$this->msg( 'jumptonavigation' )
?></a><?php $this->msg(
'comma-separator' ) ?>
- <?php
- if ( $this->config->get(
'MetrolookSearchBar' ) ) {
- ?>
- <a href="#p-search"><?php
$this->msg( 'jumptosearch' ) ?></a>
- <?php
- } else {
- ?>
- <a href="#p-searchSearch"><?php
$this->msg( 'jumptosearch' ) ?></a>
- <?php
- }
- ?>
+ <a href="#p-search"><?php $this->msg(
'jumptosearch' ) ?></a>
</div>
<?php
$this->html( 'bodycontent' );
@@ -359,9 +349,9 @@
<?php
} else {
if ( $this->config->get( 'MetrolookSiteNameText' ) ) {
-
echo $GLOBALS['wgSitename'];
-
} else {
echo $GLOBALS['wgMetrolookSiteText'];
+
} else {
+
echo $GLOBALS['wgSitename'];
}
}
?>
@@ -508,48 +498,22 @@
</div>
</div>
- <?php
- if ( $this->config->get( 'MetrolookSearchBar' ) ) {
- ?>
- <div id="mw-panel">
- <?php
- if ( !$this->config->get(
'MetrolookSiteNameLogo' ) ) {
- if ( $this->config->get(
'MetrolookLogo' ) ) {
- ?>
- <div id="p-logo"
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></div>
- <?php
- }
- }
+ <div id="mw-panel">
+ <?php
+ if ( !$this->config->get(
'MetrolookSiteNameLogo' ) &&
+ $this->config->get( 'MetrolookLogo' )
+ ) {
?>
- <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
- </div>
- <?php
- } else {
+ <div id="p-logo" 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></div>
+ <?php
+ }
?>
- <div id="mw-panel-custom">
- <?php
- if ( !$this->config->get(
'MetrolookSiteNameLogo' ) ) {
- if ( $this->config->get(
'MetrolookLogo' ) ) {
- ?>
- <div id="p-logo-custom"
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-custom' ) )
- ?>></a></div>
- <?php
- }
- }
- ?>
- <?php $this->renderNavigation( [
'SEARCH' ] ); ?>
- <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
- </div>
- <?php
- }
- ?>
+ <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
+ </div>
<?php
if ( $this->config->get( 'MetrolookDownArrow' ) ) {
@@ -647,42 +611,15 @@
$msgObj = wfMessage( $msg );
$labelId = Sanitizer::escapeId( "p-$name-label" );
?>
- <?php
- if ( $this->config->get( 'MetrolookSearchBar' ) ) {
- ?>
- <div class="portal" role="navigation" id='<?php
- echo Sanitizer::escapeId( "p-$name" )
- ?>'<?php
- echo Linker::tooltip( 'p-' . $name )
- ?> aria-labelledby='<?php echo $labelId ?>'>
- <h5<?php $this->html( 'userlangattributes' ) ?>
id='<?php echo $labelId ?>'><?php
- echo htmlspecialchars(
$msgObj->exists() ? $msgObj->text() : $msg );
- ?></h5>
- <?php
- } else {
- ?>
- <div class="portal-custom" role="navigation" id='<?php
- echo Sanitizer::escapeId( "p-$name" )
- ?>'<?php
- echo Linker::tooltip( 'p-' . $name )
- ?> aria-labelledby='<?php echo $labelId ?>'>
- <h5<?php $this->html( 'userlangattributes' ) ?>
id='<?php echo $labelId ?>'><?php
- echo htmlspecialchars(
$msgObj->exists() ? $msgObj->text() : $msg );
- ?></h5>
- <?php
- }
- ?>
- <?php
- if ( $this->config->get( 'MetrolookSearchBar' ) ) {
- ?>
- <div class="body">
- <?php
- } else {
- ?>
- <div class="body-custom">
- <?php
- }
- ?>
+ <div class="portal" role="navigation" id='<?php
+ echo Sanitizer::escapeId( "p-$name" )
+ ?>'<?php
+ echo Linker::tooltip( 'p-' . $name )
+ ?> aria-labelledby='<?php echo $labelId ?>'>
+ <h5<?php $this->html( 'userlangattributes' ) ?>
id='<?php echo $labelId ?>'><?php
+ echo htmlspecialchars( $msgObj->exists() ?
$msgObj->text() : $msg );
+ ?></h5>
+ <div class="body">
<?php
if ( is_array( $content ) ) {
?>
@@ -883,86 +820,43 @@
break;
case 'SEARCH':
?>
- <?php
- if ( $this->config->get(
'MetrolookSearchBar' ) ) {
- ?>
- <div id="p-search"
role="search">
- <h5<?php $this->html(
'userlangattributes' ) ?>>
- <label
for="searchInput"><?php $this->msg( 'search' ) ?></label>
- </h5>
+ <div id="p-search" role="search">
+ <h5<?php $this->html(
'userlangattributes' ) ?>>
+ <label
for="searchInput"><?php $this->msg( 'search' ) ?></label>
+ </h5>
- <form action="<?php
$this->text( 'wgScript' ) ?>" id="searchform">
- <div
- <?php
echo $this->config->get( 'MetrolookUseSimpleSearch' ) ? ' id="simpleSearch"' :
'' ?>
- >
- <?php
- echo
$this->makeSearchInput( [ 'id' => 'searchInput' ] );
- echo
Html::hidden( 'title', $this->get( 'searchtitle' ) );
- // We construct
two buttons (for 'go' and 'fulltext' search modes),
- // but only one
will be visible and actionable at a time (they are
- // overlaid on
top of each other in CSS).
- // * Browsers
will use the 'fulltext' one by default (as it's the
- // first in
tree-order), which is desirable when they are unable
- // to show
search suggestions (either due to being broken or
- // having
JavaScript turned off).
- // * The
mediawiki.searchSuggest module, after doing tests for the
- // broken
browsers, removes the 'fulltext' button and handles
- // 'fulltext'
search itself; this will reveal the 'go' button and
- // cause it
to be used.
- echo
$this->makeSearchButton(
-
'fulltext',
- [ 'id'
=> 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' ]
- );
- echo
$this->makeSearchButton(
- 'go',
- [ 'id'
=> 'searchButton', 'class' => 'searchButton' ]
- );
- ?>
- </div>
- </form>
- </div>
- <?php
- } else {
- ?>
- <div id="p-searchSearch"
role="search">
- <h5<?php $this->html(
'userlangattributes' ) ?>>
- <label
for="searchInput"><?php $this->msg( 'search' ) ?></label>
- </h5>
+ <form action="<?php
$this->text( 'wgScript' ) ?>" id="searchform">
+ <div
+ <?php echo
$this->config->get( 'MetrolookUseSimpleSearch' ) ? ' id="simpleSearch"' : '' ?>
+ >
+ <?php
+ echo
$this->makeSearchInput( [ 'id' => 'searchInput' ] );
+ echo Html::hidden(
'title', $this->get( 'searchtitle' ) );
+ // We construct two
buttons (for 'go' and 'fulltext' search modes),
+ // but only one will be
visible and actionable at a time (they are
+ // overlaid on top of
each other in CSS).
+ // * Browsers will use
the 'fulltext' one by default (as it's the
+ // first in
tree-order), which is desirable when they are unable
+ // to show search
suggestions (either due to being broken or
+ // having JavaScript
turned off).
+ // * The
mediawiki.searchSuggest module, after doing tests for the
+ // broken browsers,
removes the 'fulltext' button and handles
+ // 'fulltext' search
itself; this will reveal the 'go' button and
+ // cause it to be
used.
+ echo
$this->makeSearchButton(
+ 'fulltext',
+ [ 'id' =>
'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' ]
+ );
+ echo
$this->makeSearchButton(
+ 'go',
+ [ 'id' =>
'searchButton', 'class' => 'searchButton' ]
+ );
+ ?>
+ </div>
+ </form>
+ </div>
- <form action="<?php
$this->text( 'wgScript' ) ?>" id="searchform">
- <div<?php
- echo
$this->config->get( 'MetrolookUseSimpleSearch' ) ? ' id="simpleSearchSearch"' :
'' ?>>
- <?php
- echo
$this->makeSearchInput( [ 'id' => 'searchInput' ] );
- echo
Html::hidden( 'title', $this->get( 'searchtitle' ) );
- // We construct
two buttons (for 'go' and 'fulltext' search modes),
- // but only one
will be visible and actionable at a time (they are
- // overlaid on
top of each other in CSS).
- // * Browsers
will use the 'fulltext' one by default (as it's the
- // first in
tree-order), which is desirable when they are unable
- // to show
search suggestions (either due to being broken or
- // having
JavaScript turned off).
- // * The
mediawiki.searchSuggest module, after doing tests for the
- // broken
browsers, removes the 'fulltext' button and handles
- // 'fulltext'
search itself; this will reveal the 'go' button and
- // cause it
to be used.
- echo
$this->makeSearchButton(
-
'fulltext',
- [ 'id'
=> 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' ]
- );
- echo
$this->makeSearchButton(
- 'go',
- [ 'id'
=> 'searchButton', 'class' => 'searchButton' ]
- );
- ?>
- </div>
- </form>
- </div>
<?php
- }
- ?>
- <?php
-
break;
}
}
diff --git a/README.md b/README.md
index 0dc6a5e..9eba402 100644
--- a/README.md
+++ b/README.md
@@ -3,39 +3,41 @@
A skin for MediaWiki
-The author of the skin is http://www.pidgi.net/wiki/Main_Page
+The original author of the skin was http://www.pidgi.net/wiki/Main_Page
-Compatible with MediaWiki 1.26+.
+Compatible with MediaWiki 1.29+.
If you would like compatibility with older releases of MediaWiki, download the
appropriate version for your MediaWiki from one of the URLs below:
+1.28
+
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_28/
+
+1.27
+
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_27/
+
1.26
-https://github.com/paladox/Metrolook/tree/REL1_26
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_26/
1.25
-https://github.com/paladox/Metrolook/tree/REL1_25
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_25/
1.24
-https://github.com/paladox/Metrolook/tree/REL1_24
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_24/
1.23
-https://github.com/paladox/Metrolook/tree/REL1_23
-
-1.22
-
-https://github.com/paladox/Metrolook/tree/REL1_22
-
-1.21
-
-https://github.com/paladox/Metrolook/tree/REL1_21
+https://phabricator.wikimedia.org/diffusion/SMTL/browse/REL1_23/
### Live demo
+
+This is an old demo.
A working demo of the skin is available at
http://www.pidgi.net/metrolooktest/index.php/Main_Page .
This is currently using MediaWiki 1.25wmf18 and a snapshot of the test branch
of the skin.
@@ -58,7 +60,7 @@
Phabricator is located at:
-https://phabricator.wikimedia.org/tag/mediawiki-skins-metrolook/
+https://phabricator.wikimedia.org/tag/metrolook/
If, for some reason, you are unable to unwilling to use Phabricator, you can
submit your bug on GitHub, but it is likely to receive less attention there
@@ -75,11 +77,18 @@
## Known Issues
-See https://phabricator.wikimedia.org/tag/mediawiki-skins-metrolook/ for a list
-of currently open bugs.
+See https://phabricator.wikimedia.org/tag/metrolook/ for a list of currently
open bugs.
+
+### MediaWiki versions we no longer support
+
+* MediaWiki 1.22 or lower is now unsupported.
## Version
+7.x.x requires MediaWiki 1.29.
+
+6.x.x requires MediaWiki 1.28.
+
5.x.x requires MediaWiki 1.27.
4.x.x requires MediaWiki 1.26.
diff --git a/SkinMetrolook.php b/SkinMetrolook.php
index 18fcdcd..db79603 100644
--- a/SkinMetrolook.php
+++ b/SkinMetrolook.php
@@ -59,11 +59,38 @@
*/
public function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out );
-
- if ( $this->metrolookConfig->get( 'MetrolookMobile' ) ) {
- $styles = [ 'mediawiki.skinning.interface',
'skins.metrolook.styles.responsive' ];
+ if ( $this->metrolookConfig->get( 'MetrolookMobile' ) &&
+ !$this->metrolookConfig->get( 'MetrolookSearchBar' )
+ ) {
+ $styles = [
+ 'mediawiki.skinning.interface',
+ 'skins.metrolook.styles.custom',
+ 'skins.metrolook.styles.mobile.custom',
+ 'skins.metrolook.styles.theme.custom',
+ ];
+ } elseif ( $this->metrolookConfig->get( 'MetrolookMobile' ) &&
+ $this->metrolookConfig->get( 'MetrolookSearchBar' )
+ ) {
+ $styles = [
+ 'mediawiki.skinning.interface',
+ 'skins.metrolook.styles',
+ 'skins.metrolook.styles.mobile',
+ 'skins.metrolook.styles.theme.custom',
+ ];
+ } elseif ( !$this->metrolookConfig->get( 'MetrolookMobile' ) &&
+ !$this->metrolookConfig->get( 'MetrolookSearchBar' )
+ ) {
+ $styles = [
+ 'mediawiki.skinning.interface',
+ 'skins.metrolook.styles.custom',
+ 'skins.metrolook.styles.theme.custom',
+ ];
} else {
- $styles = [ 'mediawiki.skinning.interface',
'skins.metrolook.styles' ];
+ $styles = [
+ 'mediawiki.skinning.interface',
+ 'skins.metrolook.styles',
+ 'skins.metrolook.styles.theme.custom',
+ ];
}
Hooks::run( 'SkinMetrolookStyleModules', [ $this, &$styles ] );
$out->addModuleStyles( $styles );
diff --git a/SkinMetrolookHooks.php b/SkinMetrolookHooks.php
index a438a73..0f8a57d 100644
--- a/SkinMetrolookHooks.php
+++ b/SkinMetrolookHooks.php
@@ -1,4 +1,5 @@
<?php
+
/**
* Hooks for Metrolook skin
*
@@ -26,22 +27,6 @@
]
];
- protected static $featurescustom = [
- 'collapsiblenav-custom' => [
- 'preferences' => [
- 'skinmetrolook-collapsiblenav-custom' => [
- 'type' => 'toggle',
- 'label-message' =>
'skinmetrolook-collapsiblenav-preference',
- 'section' =>
'rendering/advancedrendering',
- ],
- ],
- 'requirements' => [
- 'skinmetrolook-collapsiblenav-custom' => true,
- ],
- 'modules' => [ 'skins.metrolook.collapsibleNav-custom'
],
- ]
- ];
-
/* Static Methods */
/**
@@ -54,7 +39,7 @@
* @return bool
*/
public static function isEnabled( $name ) {
- global $wgMetrolookFeatures, $wgUser, $wgMetrolookSearchBar;
+ global $wgMetrolookFeatures, $wgUser;
// Features with global set to true are always enabled
if ( !isset( $wgMetrolookFeatures[$name] ) ||
$wgMetrolookFeatures[$name]['global'] ) {
@@ -62,30 +47,16 @@
}
// Features with user preference control can have any number of
preferences
// to be specific values to be enabled
- if ( $wgMetrolookSearchBar ) {
- if ( $wgMetrolookFeatures[$name]['user'] ) {
- if ( isset(
self::$features[$name]['requirements'] ) ) {
- foreach (
self::$features[$name]['requirements'] as $requirement => $value ) {
- // Important! We really do want
fuzzy evaluation here
- if ( $wgUser->getOption(
$requirement ) != $value ) {
- return false;
- }
+ if ( $wgMetrolookFeatures[$name]['user'] ) {
+ if ( isset( self::$features[$name]['requirements'] ) ) {
+ foreach (
self::$features[$name]['requirements'] as $requirement => $value ) {
+ // Important! We really do want fuzzy
evaluation here
+ if ( $wgUser->getOption( $requirement )
!= $value ) {
+ return false;
}
}
- return true;
}
- } else {
- if ( $wgMetrolookFeatures[$name]['user'] ) {
- if ( isset(
self::$featurescustom[$name]['requirements'] ) ) {
- foreach (
self::$featurescustom[$name]['requirements'] as $requirement => $value ) {
- // Important! We really do want
fuzzy evaluation here
- if ( $wgUser->getOption(
$requirement ) != $value ) {
- return false;
- }
- }
- }
- return true;
- }
+ return true;
}
// Features controlled by $wgMetrolookFeatures with both global
and user
// set to false are awlways disabled
@@ -103,21 +74,11 @@
* @param $skin Skin current skin
*/
public static function beforePageDisplay( $out, $skin ) {
- global $wgMetrolookSearchBar;
if ( $skin instanceof SkinMetrolook ) {
- if ( $wgMetrolookSearchBar ) {
- // Add modules for enabled features
- foreach ( self::$features as $name => $feature
) {
- if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
- $out->addModules(
$feature['modules'] );
- }
- }
- } else {
- // Add modules for enabled features
- foreach ( self::$featurescustom as $name =>
$feature ) {
- if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
- $out->addModules(
$feature['modules'] );
- }
+ // Add modules for enabled features
+ foreach ( self::$features as $name => $feature ) {
+ if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
+ $out->addModules( $feature['modules'] );
}
}
}
@@ -133,28 +94,15 @@
* @param $defaultPreferences array list of default user preference
controls
*/
public static function getPreferences( $user, &$defaultPreferences ) {
- global $wgMetrolookFeatures, $wgMetrolookSearchBar;
+ global $wgMetrolookFeatures;
- if ( $wgMetrolookSearchBar ) {
- foreach ( self::$features as $name => $feature ) {
- if (
- isset( $feature['preferences'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] )
|| $wgMetrolookFeatures[$name]['user'] )
- ) {
- foreach ( $feature['preferences'] as
$key => $options ) {
- $defaultPreferences[$key] =
$options;
- }
- }
- }
- } else {
- foreach ( self::$featurescustom as $name => $feature ) {
- if (
- isset( $feature['preferences'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] )
|| $wgMetrolookFeatures[$name]['user'] )
- ) {
- foreach ( $feature['preferences'] as
$key => $options ) {
- $defaultPreferences[$key] =
$options;
- }
+ foreach ( self::$features as $name => $feature ) {
+ if (
+ isset( $feature['preferences'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] ) ||
$wgMetrolookFeatures[$name]['user'] )
+ ) {
+ foreach ( $feature['preferences'] as $key =>
$options ) {
+ $defaultPreferences[$key] = $options;
}
}
}
@@ -170,31 +118,20 @@
global $wgMetrolookFeatures, $wgMetrolookSearchBar;
$configurations = [];
- if ( $wgMetrolookSearchBar ) {
- foreach ( self::$features as $name => $feature ) {
- if (
- isset( $feature['configurations'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] )
|| self::isEnabled( $name ) )
- ) {
- foreach ( $feature['configurations'] as
$configuration ) {
- global $$wgConfiguration;
- $configurations[$configuration]
= $$wgConfiguration;
- }
- }
- }
- } else {
- foreach ( self::$featurescustom as $name => $feature ) {
- if (
- isset( $feature['configurations'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] )
|| self::isEnabled( $name ) )
- ) {
- foreach ( $feature['configurations'] as
$configuration ) {
- global $$wgConfiguration;
- $configurations[$configuration]
= $$wgConfiguration;
- }
+ foreach ( self::$features as $name => $feature ) {
+ if (
+ isset( $feature['configurations'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] ) ||
self::isEnabled( $name ) )
+ ) {
+ foreach ( $feature['configurations'] as
$configuration ) {
+ global $$wgConfiguration;
+ $configurations[$configuration] =
$$wgConfiguration;
}
}
}
+
+ $vars['wgMetrolookSearch'] = $wgMetrolookSearchBar;
+
if ( count( $configurations ) ) {
$vars = array_merge( $vars, $configurations );
}
@@ -207,17 +144,10 @@
* @return bool
*/
public static function makeGlobalVariablesScript( &$vars ) {
- global $wgMetrolookSearchBar;
// Build and export old-style wgMetrolookEnabledModules object
for back compat
$enabledModules = [];
- if ( $wgMetrolookSearchBar ) {
- foreach ( self::$features as $name => $feature ) {
- $enabledModules[$name] = self::isEnabled( $name
);
- }
- } else {
- foreach ( self::$featurescustom as $name => $feature ) {
- $enabledModules[$name] = self::isEnabled( $name
);
- }
+ foreach ( self::$features as $name => $feature ) {
+ $enabledModules[$name] = self::isEnabled( $name );
}
$vars['wgMetrolookEnabledModules'] = $enabledModules;
diff --git a/components/collapsibleNav.custom.less
b/components/collapsibleNav.custom.less
deleted file mode 100644
index aae9b2b..0000000
--- a/components/collapsibleNav.custom.less
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * LESS Stylesheet for collapsible nav
- */
-@import "../variables.less";
-@import "mediawiki.mixins.less";
-
-#mw-panel-custom.collapsible-nav {
- .portal-custom {
-
- h5 {
- background-position: left center;
- background-repeat: no-repeat;
- .background-image-svg('../images/open.svg',
'../images/open.png');
- padding: @collapsible-nav-heading-padding;
- margin-left: -0.5em;
-
- &:hover {
- cursor: pointer;
- text-decoration: none;
- }
-
- a {
- color: @collapsible-nav-heading-color;
- text-decoration: none;
- }
- }
-
- .body-custom {
- margin: @collapsible-nav-body-margin;
- background-image: none !important;
- padding-top: 0;
- display: none;
-
- ul {
- li {
- padding: 0.25em 0;
- }
- }
- }
-
-
- /* First */
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- }
-
- /* Persistent */
- &.persistent {
- .body-custom {
- display: block;
- margin-left: 0.5em;
- }
-
- h5 {
- background-image: none !important;
- padding-left: 0.7em;
- cursor: default;
- }
- }
-
- /* Collapsed */
- &.collapsed {
- h5 {
- color: @collapsible-nav-heading-collapsed-color;
- background-position: left center;
- background-repeat: no-repeat;
-
.background-image-svg('../images/closed-ltr.svg', '../images/closed-ltr.png');
-
- &:hover {
- text-decoration: underline;
- }
-
- a {
- color:
@collapsible-nav-heading-collapsed-color;
- }
- }
- }
- }
-}
diff --git a/components/common.less b/components/custom/common.less
similarity index 100%
copy from components/common.less
copy to components/custom/common.less
diff --git a/components/externalLinks.less
b/components/custom/externalLinks.less
similarity index 100%
copy from components/externalLinks.less
copy to components/custom/externalLinks.less
diff --git a/components/footer.less b/components/custom/footer.less
similarity index 100%
copy from components/footer.less
copy to components/custom/footer.less
diff --git a/components/navigation.less b/components/custom/navigation.less
similarity index 62%
rename from components/navigation.less
rename to components/custom/navigation.less
index 8a4c700..f898e73 100644
--- a/components/navigation.less
+++ b/components/custom/navigation.less
@@ -75,23 +75,6 @@
width: 10em;
height: 160px;
margin-bottom: 1em;
-
- a {
- display: block;
- width: 10em;
- height: 160px;
- background-repeat: no-repeat;
- background-position: center center;
- text-decoration: none;
- }
-}
-
-/* Logo */
-#p-logo-custom {
- left: 0;
- width: 10em;
- height: 160px;
- margin-bottom: 1em;
margin-left: 0.5em;
a {
@@ -109,82 +92,6 @@
font-size: @menu-main-font-size;
position: fixed;
top: 40px;
- bottom: 0px;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-top: 1em;
- width: 11em;
- left: 0;
- z-index: 1;
-
- div.portal {
- margin: 0 0.6em 0 0.7em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- margin: 0;
- padding: @menu-main-heading-padding;
- cursor: default;
- border: none;
- }
-
- div.body {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo + div.portal {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body {
- margin-left: 0.5em;
- }
- }
-}
-
-/* custom */
-/* Panel */
-div#mw-panel-custom {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
bottom: 0;
height: auto;
overflow-y: auto;
@@ -196,7 +103,7 @@
left: 0;
z-index: 1;
- div.portal-custom {
+ div.portal {
margin: 0 0.6em 0 1.2em;
padding: 0.25em 0;
direction: ltr;
@@ -218,7 +125,7 @@
border: none;
}
- div.body-custom {
+ div.body {
margin: @menu-main-body-margin;
padding-top: 0;
@@ -247,13 +154,13 @@
}
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo-custom + #p-searchSearch + div.portal-custom {
+ #p-logo + #p-search + div.portal {
background-image: none;
margin-top: 0;
h5 {
display: none;
}
- div.body-custom {
+ div.body {
margin-left: 0.5em;
}
}
diff --git a/components/personalMenu.less b/components/custom/personalMenu.less
similarity index 100%
copy from components/personalMenu.less
copy to components/custom/personalMenu.less
diff --git a/components/custom/search.less b/components/custom/search.less
new file mode 100644
index 0000000..29af1e6
--- /dev/null
+++ b/components/custom/search.less
@@ -0,0 +1,130 @@
+/* Search */
+
+@import "mediawiki.mixins";
+
+.suggestions {
+ position: fixed !important;
+}
+
+/* Search */
+#p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 10px;
+ margin-left: 10px;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: -4px;
+ }
+}
+
+div#simpleSearch {
+ display: block;
+ width: 156px;
+ height: 1.75em;
+ margin-top: 0.65em;
+ position: relative;
+ min-height: 1px; /* Gotta trigger hasLayout for IE7 */
+ border: solid 1px #aaa;
+ color: black;
+ background-color: white;
+ .background-image('images/search-fade.png');
+ background-position: top left;
+ background-repeat: repeat-x;
+ margin-bottom: 10px;
+
+ // Styles for both the search input and the button
+ input {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ color: black;
+ }
+
+ // The search input
+ #searchInput {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 124px;
+ margin: 0;
+ padding: 0;
+ padding-left: 0.5em;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ outline: none;
+ border: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ // These rules MAY NOT be merged because of how CSS requires
browsers
+ // to parse unrecognized selectors!
+ // Note these rules ensure that placeholder text can be
distinguished from
+ // standard text. In browsers which make this distinction clear
these rules
+ // are not necessary.
+ // For inputs that use jquery.placeholder.js e.g. IE9-
+ &.placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in IE10+
+ &:-ms-input-placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in Firefox 18-
+ &:-moz-placeholder {
+ color: #999;
+ }
+
+ // Undo the styles Webkit browsers apply to type=search fields,
+ // we provide our own
+ -webkit-appearance: textfield;
+
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ -webkit-appearance: textfield;
+ }
+ }
+
+ // The buttons. They are displayed in the same position, and if both are
+ // present the fulltext search one obscures the 'Go' one.
+ #searchButton,
+ #mw-searchButton {
+ top: 0;
+ right: 0;
+ width: 24px;
+ height: 100%;
+ cursor: pointer;
+ /* Hide button text and replace it with the image. */
+ /* This would be 100% if not for Firefox shenanigans (bug
60900). */
+ text-indent: 200%;
+ /* Needed to make IE6 respect the text-indent. */
+ line-height: 1;
+ /* Opera 12 on RTL flips the text in a funny way without this.
*/
+ /* @noflip */
+ direction: ltr;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ #searchButton {
+ .background-image-svg('images/search-ltr.svg',
'images/search-ltr.png');
+ background-position: center center;
+ background-repeat: no-repeat;
+ }
+
+ #mw-searchButton {
+ z-index: 1;
+ }
+}
diff --git a/components/tabs.less b/components/custom/tabs.less
similarity index 100%
copy from components/tabs.less
copy to components/custom/tabs.less
diff --git a/theme.less b/components/custom/theme.less
similarity index 62%
rename from theme.less
rename to components/custom/theme.less
index 02b1351..c6f8ec6 100644
--- a/theme.less
+++ b/components/custom/theme.less
@@ -1,7 +1,10 @@
/* Add your custom theme overrides here */
+@import "../../variables.less";
+@import "mediawiki.mixins";
+
+@media screen {
/* Top Bar colour and hover colour start */
-
-
/* Top Bar colour and hover colour */
+}
diff --git a/components/watchstar.less b/components/custom/watchstar.less
similarity index 100%
copy from components/watchstar.less
copy to components/custom/watchstar.less
diff --git a/components/collapsibleNav.less
b/components/main/collapsibleNav.less
similarity index 85%
rename from components/collapsibleNav.less
rename to components/main/collapsibleNav.less
index 70e76c0..77c809f 100644
--- a/components/collapsibleNav.less
+++ b/components/main/collapsibleNav.less
@@ -1,7 +1,7 @@
/**
* LESS Stylesheet for collapsible nav
*/
-@import "../variables.less";
+@import "../../variables.less";
@import "mediawiki.mixins.less";
#mw-panel.collapsible-nav {
@@ -10,7 +10,7 @@
h5 {
background-position: left center;
background-repeat: no-repeat;
- .background-image-svg('../images/open.svg',
'../images/open.png');
+ .background-image-svg('../../images/open.svg',
'../../images/open.png');
padding: @collapsible-nav-heading-padding;
margin-left: -0.5em;
@@ -68,7 +68,7 @@
color: @collapsible-nav-heading-collapsed-color;
background-position: left center;
background-repeat: no-repeat;
-
.background-image-svg('../images/closed-ltr.svg', '../images/closed-ltr.png');
+
.background-image-svg('../../images/closed-ltr.svg',
'../../images/closed-ltr.png');
&:hover {
text-decoration: underline;
diff --git a/components/common.less b/components/main/common.less
similarity index 100%
rename from components/common.less
rename to components/main/common.less
diff --git a/components/externalLinks.less b/components/main/externalLinks.less
similarity index 100%
rename from components/externalLinks.less
rename to components/main/externalLinks.less
diff --git a/components/footer.less b/components/main/footer.less
similarity index 100%
rename from components/footer.less
rename to components/main/footer.less
diff --git a/components/navigation.less b/components/main/navigation.less
similarity index 61%
copy from components/navigation.less
copy to components/main/navigation.less
index 8a4c700..0181707 100644
--- a/components/navigation.less
+++ b/components/main/navigation.less
@@ -86,24 +86,6 @@
}
}
-/* Logo */
-#p-logo-custom {
- left: 0;
- width: 10em;
- height: 160px;
- margin-bottom: 1em;
- margin-left: 0.5em;
-
- a {
- display: block;
- width: 10em;
- height: 160px;
- background-repeat: no-repeat;
- background-position: center center;
- text-decoration: none;
- }
-}
-
/* Panel */
div#mw-panel {
font-size: @menu-main-font-size;
@@ -174,86 +156,6 @@
display: none;
}
div.body {
- margin-left: 0.5em;
- }
- }
-}
-
-/* custom */
-/* Panel */
-div#mw-panel-custom {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
- bottom: 0;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-right: 0.7em;
- padding-top: 1em;
- width: 11em;
- left: 0;
- z-index: 1;
-
- div.portal-custom {
- margin: 0 0.6em 0 1.2em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- padding: 0.25em;
- padding-top: 0;
- padding-left: 17px;
- padding-bottom: 0;
- margin-bottom: 0;
- cursor: default;
- border: none;
- }
-
- div.body-custom {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo-custom + #p-searchSearch + div.portal-custom {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body-custom {
margin-left: 0.5em;
}
}
diff --git a/components/personalMenu.less b/components/main/personalMenu.less
similarity index 100%
rename from components/personalMenu.less
rename to components/main/personalMenu.less
diff --git a/components/main/search.less b/components/main/search.less
new file mode 100644
index 0000000..4c4559b
--- /dev/null
+++ b/components/main/search.less
@@ -0,0 +1,117 @@
+/* Search */
+
+@import "mediawiki.mixins";
+
+#p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 3.5em;
+ margin-left: 0.5em;
+
+ h5 {
+ .mixin-screen-reader-text;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+}
+
+div#simpleSearch {
+ display: block;
+ width: 12.6em;
+ padding-right: 1.4em;
+ height: 1.4em;
+ margin-top: 0.65em;
+ position: relative;
+ min-height: 1px; /* Gotta trigger hasLayout for IE7 */
+ border: solid 1px #aaa;
+ color: black;
+ background-color: white;
+ .background-image('images/search-fade.png');
+ background-position: top left;
+ background-repeat: repeat-x;
+
+ // Styles for both the search input and the button
+ input {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ color: black;
+ }
+
+ // The search input
+ #searchInput {
+ width: 100%;
+ padding: 0.2em 0 0.2em 0.2em;
+ font-size: 13px;
+ direction: ltr;
+
+ &:focus {
+ outline: none;
+ }
+
+ // These rules MAY NOT be merged because of how CSS requires
browsers
+ // to parse unrecognized selectors!
+ // Note these rules ensure that placeholder text can be
distinguished from
+ // standard text. In browsers which make this distinction clear
these rules
+ // are not necessary.
+ // For inputs that use jquery.placeholder.js e.g. IE9-
+ &.placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in IE10+
+ &:-ms-input-placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in Firefox 18-
+ &:-moz-placeholder {
+ color: #999;
+ }
+
+ // Undo the styles Webkit browsers apply to type=search fields,
+ // we provide our own
+ -webkit-appearance: textfield;
+
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ -webkit-appearance: textfield;
+ }
+ }
+
+ // The buttons. They are displayed in the same position, and if both are
+ // present the fulltext search one obscures the 'Go' one.
+ #searchButton,
+ #mw-searchButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1.65em;
+ height: 100%;
+ cursor: pointer;
+ /* Hide button text and replace it with the image. */
+ text-indent: -99999px;
+ /* Needed to make IE6 respect the text-indent. */
+ line-height: 1;
+ /* Opera 12 on RTL flips the text in a funny way without this.
*/
+ /* @noflip */
+ direction: ltr;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ #searchButton {
+ .background-image-svg('images/search-ltr.svg',
'images/search-ltr.png');
+ background-position: center center;
+ background-repeat: no-repeat;
+ }
+
+ #mw-searchButton {
+ z-index: 1;
+ }
+}
diff --git a/components/tabs.less b/components/main/tabs.less
similarity index 100%
rename from components/tabs.less
rename to components/main/tabs.less
diff --git a/components/watchstar.less b/components/main/watchstar.less
similarity index 100%
rename from components/watchstar.less
rename to components/main/watchstar.less
diff --git a/components/mobile.less b/components/mobile.less
deleted file mode 100644
index d1bda8c..0000000
--- a/components/mobile.less
+++ /dev/null
@@ -1,244 +0,0 @@
-@import "mediawiki.mixins";
-
-/* different screen sizes */
-
-@media (max-width: 768px) {
-
-.username-space {
- margin-right: 0;
-}
-
-div#mw-head {
- position: fixed;
- top: 0;
- min-width: 97%;
-
- h5 {
- margin: 0;
- padding: 0;
- }
-}
-
-img.hamburger {
- .background-image-svg('images/hamburger.svg', 'images/hamburger.png');
- width: 26px;
- height: 35px;
- margin: 0;
- padding: 0;
- background-repeat: no-repeat;
-}
-
-img.searchbar {
- .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
- width: 26px;
- height: 35px;
- background-repeat: no-repeat;
- margin-right: 0;
- margin-top: 1em;
- float: right;
- margin-left: 0.5em;
-}
-
-img.editbutton {
- .background-image-svg('images/edit-icon.svg', 'images/edit-icon.png');
- width: 36px;
- height: 35px;
- background-repeat: no-repeat;
- cursor: pointer;
- display: block;
- float: right;
- margin-right: 0;
- height: 40px;
-}
-
-img.editbutton:hover {
- cursor: pointer;
- display: block;
- float: right;
- margin-right: 0;
- background-color: #9F6F40;
- height: 40px;
-}
-
-.tilebar {
- cursor: pointer;
- overflow-x: scroll;
- overflow-y: scroll;
-}
-
-#usermenu {
- right: -0.8em;
- padding-right: 0px;
- padding-left: 5px;
-}
-
-#left-navigation {
- display: none;
- position: fixed;
- top: auto;
- bottom: 0px;
- left: auto;
- z-index: 1000;
- list-style: none;
- padding: 0;
- margin: 0 auto;
- line-height: 1.5em;
- background-color: #CF8B54;
- width: 100%;
- text-align: center;
-}
-
-#echoNotifications {
- float: right;
- top: 0.3em;
- position: relative;
- margin-right: 0;
- margin-left: -1em;
-}
-
-#p-search {
- /* @noflip */
- float: left;
- margin-right: 1em;
- margin-left: 0.5em;
-
- h5 {
- display: none;
- }
-
- form,
- input {
- margin: 0;
- margin-top: 0.4em;
- }
-}
-
-#username-text {
- display: none;
-}
-
-.siteLogoBar {
- float: none !important;
- margin: 0 auto !important;
- height: 0 !important;
-}
-
-div#mw-panel {
- display: none;
- top: 40px;
- background: #f3f3f3;
-}
-
-div#mw-panel-custom {
- display: none;
- top: 40px;
- background: #f3f3f3;
-}
-
-.mw-body {
- top: 40px;
- margin-left: 0;
-}
-
-#hamburgerIcon {
- position: static;
- top: auto;
- width: 50px;
- height: 40px;
- float: left;
- display: block;
- padding-left: 0.3em;
-
- &:hover {
- background: #9F6F40;
- }
-}
-
-#hamburgerIcon img {
- padding: 0 10px;
-}
-
-#hamburgerIcon span {
- display: none;
-}
-
-img.userIcon40 {
- margin: 0;
- padding: 0;
- background-repeat: no-repeat;
- position: relative;
-
- &:not(.socialprofile-avatar) {
- .background-image-svg('images/user-icon-40.svg',
'images/user-icon-40.png');
- width: 35px;
- height: 38px;
- }
-}
-
-#userIcon40 {
- display: block;
- position: relative;
- background-image: none;
- background-repeat: no-repeat;
-
- /* Reverse what personalMenu.less sets for desktop view */
- img.socialprofile-avatar {
- display: block;
- /* Yes, I know using pixels is evil, but I just couldn't get the
- * em's to work like I wanted. With -1px, there's no
one-pixel-wide gap.
- */
- top: -1px;
- }
-}
-
-#userIcon20 {
- display: none;
-}
-
-div.actionmenu ul {
- position: fixed;
- border: 0;
- border-top: solid 2px #CF8B54;
- margin-left: 0;
- bottom: 40px;
- right: -0.3em;
- width: 100vw;
-}
-
-}
-
-@media (max-width: 600px) {
-
-#jcctile {
- clear: left;
-}
-
-#tilegrouptable {
- height: 200px;
-}
-
-#tilegroup {
- padding: 35px;
- vertical-align: middle;
-}
-
-#top-tile-bar {
- height: 330px;
-}
-
-.tilebar {
- height: 330px;
-}
-
-}
-
-.full {
- width: auto;
- max-width: 820px;
-}
-.reply {
- width: auto;
- max-width: 750px;
-}
-.f-message { width: auto; }
-.r-message { width: auto; }
diff --git a/components/mobile/mobile-custom.less
b/components/mobile/mobile-custom.less
new file mode 100644
index 0000000..093ae88
--- /dev/null
+++ b/components/mobile/mobile-custom.less
@@ -0,0 +1,229 @@
+@import "../../variables.less";
+@import "mediawiki.mixins";
+
+/* different screen sizes */
+
+@media (max-width: 768px) {
+
+ .username-space {
+ margin-right: 0;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+ min-width: 97%;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ img.hamburger {
+ .background-image-svg('../../images/hamburger.svg',
'../../images/hamburger.png');
+ width: 26px;
+ height: 35px;
+ margin: 0;
+ padding: 0;
+ background-repeat: no-repeat;
+ }
+
+ img.searchbar {
+ .background-image-svg('../../images/search-ltr.svg',
'../../images/search-ltr.png');
+ width: 26px;
+ height: 35px;
+ background-repeat: no-repeat;
+ margin-right: 0;
+ margin-top: 1em;
+ float: right;
+ margin-left: 0.5em;
+ }
+
+ img.editbutton {
+ .background-image-svg('../../images/edit-icon.svg',
'../../images/edit-icon.png');
+ width: 36px;
+ height: 35px;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ height: 40px;
+ }
+
+ img.editbutton:hover {
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ background-color: #9F6F40;
+ height: 40px;
+ }
+
+ .tilebar {
+ cursor: pointer;
+ overflow-x: scroll;
+ overflow-y: scroll;
+ }
+
+ #usermenu {
+ right: -0.8em;
+ padding-right: 0px;
+ padding-left: 5px;
+ }
+
+ #left-navigation {
+ display: none;
+ position: fixed;
+ top: auto;
+ bottom: 0px;
+ left: auto;
+ z-index: 1000;
+ list-style: none;
+ padding: 0;
+ margin: 0 auto;
+ line-height: 1.5em;
+ background-color: #CF8B54;
+ width: 100%;
+ text-align: center;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 0;
+ margin-left: -1em;
+ }
+
+ #username-text {
+ display: none;
+ }
+
+ .siteLogoBar {
+ float: none !important;
+ margin: 0 auto !important;
+ height: 0 !important;
+ }
+
+ div#mw-panel {
+ display: none;
+ top: 40px;
+ background: #f3f3f3;
+ }
+
+ .mw-body {
+ top: 40px;
+ margin-left: 0;
+ }
+
+ #hamburgerIcon {
+ position: static;
+ top: auto;
+ width: 50px;
+ height: 40px;
+ float: left;
+ display: block;
+ padding-left: 0.3em;
+
+ &:hover {
+ background: #9F6F40;
+ }
+ }
+
+ #hamburgerIcon img {
+ padding: 0 10px;
+ }
+
+ #hamburgerIcon span {
+ display: none;
+ }
+
+ img.userIcon40 {
+ margin: 0;
+ padding: 0;
+ background-repeat: no-repeat;
+ position: relative;
+
+ &:not(.socialprofile-avatar) {
+ .background-image-svg('../../images/user-icon-40.svg',
'../../images/user-icon-40.png');
+ width: 35px;
+ height: 38px;
+ }
+ }
+
+ #userIcon40 {
+ display: block;
+ position: relative;
+ background-image: none;
+ background-repeat: no-repeat;
+
+ /* Reverse what personalMenu.less sets for desktop view */
+ img.socialprofile-avatar {
+ display: block;
+ /*
+ * Yes, I know using pixels is evil, but I just
couldn't get the
+ * em's to work like I wanted. With -1px, there's no
one-pixel-wide gap.
+ */
+ top: -1px;
+ }
+ }
+
+ #userIcon20 {
+ display: none;
+ }
+
+ div.actionmenu ul {
+ position: fixed;
+ border: 0;
+ border-top: solid 2px #CF8B54;
+ margin-left: 0;
+ bottom: 40px;
+ right: -0.3em;
+ width: 100vw;
+ }
+}
+
+@media (max-width: 600px) {
+ #jcctile {
+ clear: left;
+ }
+
+ #tilegrouptable {
+ height: 200px;
+ }
+
+ #tilegroup {
+ padding: 35px;
+ vertical-align: middle;
+ }
+
+ #top-tile-bar {
+ height: 330px;
+ }
+
+ .tilebar {
+ height: 330px;
+ }
+}
+
+@media screen {
+ .full {
+ width: auto;
+ max-width: 820px;
+ }
+
+ .reply {
+ width: auto;
+ max-width: 750px;
+ }
+
+ .f-message {
+ width: auto;
+ }
+
+ .r-message {
+ width: auto;
+ }
+}
diff --git a/components/mobile/mobile.less b/components/mobile/mobile.less
new file mode 100644
index 0000000..873408d
--- /dev/null
+++ b/components/mobile/mobile.less
@@ -0,0 +1,246 @@
+@import "../../variables.less";
+@import "mediawiki.mixins";
+
+/* different screen sizes */
+
+@media (max-width: 768px) {
+
+ .username-space {
+ margin-right: 0;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+ min-width: 97%;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ img.hamburger {
+ .background-image-svg('../../images/hamburger.svg',
'../../images/hamburger.png');
+ width: 26px;
+ height: 35px;
+ margin: 0;
+ padding: 0;
+ background-repeat: no-repeat;
+ }
+
+ img.searchbar {
+ .background-image-svg('../../images/search-ltr.svg',
'../../images/search-ltr.png');
+ width: 26px;
+ height: 35px;
+ background-repeat: no-repeat;
+ margin-right: 0;
+ margin-top: 1em;
+ float: right;
+ margin-left: 0.5em;
+ }
+
+ img.editbutton {
+ .background-image-svg('../../images/edit-icon.svg',
'../../images/edit-icon.png');
+ width: 36px;
+ height: 35px;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ height: 40px;
+ }
+
+ img.editbutton:hover {
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ background-color: #9F6F40;
+ height: 40px;
+ }
+
+ .tilebar {
+ cursor: pointer;
+ overflow-x: scroll;
+ overflow-y: scroll;
+ }
+
+ #usermenu {
+ right: -0.8em;
+ padding-right: 0px;
+ padding-left: 5px;
+ }
+
+ #left-navigation {
+ display: none;
+ position: fixed;
+ top: auto;
+ bottom: 0px;
+ left: auto;
+ z-index: 1000;
+ list-style: none;
+ padding: 0;
+ margin: 0 auto;
+ line-height: 1.5em;
+ background-color: #CF8B54;
+ width: 100%;
+ text-align: center;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 0;
+ margin-left: -1em;
+ }
+
+ #p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 1em;
+ margin-left: 0.5em;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+ }
+
+ #username-text {
+ display: none;
+ }
+
+ .siteLogoBar {
+ float: none !important;
+ margin: 0 auto !important;
+ height: 0 !important;
+ }
+
+ div#mw-panel {
+ display: none;
+ top: 40px;
+ background: #f3f3f3;
+ }
+
+ .mw-body {
+ top: 40px;
+ margin-left: 0;
+ }
+
+ #hamburgerIcon {
+ position: static;
+ top: auto;
+ width: 50px;
+ height: 40px;
+ float: left;
+ display: block;
+ padding-left: 0.3em;
+
+ &:hover {
+ background: #9F6F40;
+ }
+ }
+
+ #hamburgerIcon img {
+ padding: 0 10px;
+ }
+
+ #hamburgerIcon span {
+ display: none;
+ }
+
+ img.userIcon40 {
+ margin: 0;
+ padding: 0;
+ background-repeat: no-repeat;
+ position: relative;
+
+ &:not(.socialprofile-avatar) {
+ .background-image-svg('../../images/user-icon-40.svg',
'../../images/user-icon-40.png');
+ width: 35px;
+ height: 38px;
+ }
+ }
+
+ #userIcon40 {
+ display: block;
+ position: relative;
+ background-image: none;
+ background-repeat: no-repeat;
+
+ /* Reverse what personalMenu.less sets for desktop view */
+ img.socialprofile-avatar {
+ display: block;
+ /*
+ * Yes, I know using pixels is evil, but I just
couldn't get the
+ * em's to work like I wanted. With -1px, there's no
one-pixel-wide gap.
+ */
+ top: -1px;
+ }
+ }
+
+ #userIcon20 {
+ display: none;
+ }
+
+ div.actionmenu ul {
+ position: fixed;
+ border: 0;
+ border-top: solid 2px #CF8B54;
+ margin-left: 0;
+ bottom: 40px;
+ right: -0.3em;
+ width: 100vw;
+ }
+}
+
+@media (max-width: 600px) {
+ #jcctile {
+ clear: left;
+ }
+
+ #tilegrouptable {
+ height: 200px;
+ }
+
+ #tilegroup {
+ padding: 35px;
+ vertical-align: middle;
+ }
+
+ #top-tile-bar {
+ height: 330px;
+ }
+
+ .tilebar {
+ height: 330px;
+ }
+}
+
+@media screen {
+ .full {
+ width: auto;
+ max-width: 820px;
+ }
+
+ .reply {
+ width: auto;
+ max-width: 750px;
+ }
+
+ .f-message {
+ width: auto;
+ }
+
+ .r-message {
+ width: auto;
+ }
+}
diff --git a/components/search.less b/components/search.less
deleted file mode 100644
index e7aa78e..0000000
--- a/components/search.less
+++ /dev/null
@@ -1,246 +0,0 @@
-/* Search */
-
-@import "mediawiki.mixins";
-
-#p-search {
- /* @noflip */
- float: left;
- margin-right: 3.5em;
- margin-left: 0.5em;
-
- h5 {
- .mixin-screen-reader-text;
- }
-
- form,
- input {
- margin: 0;
- margin-top: 0.4em;
- }
-}
-
-div#simpleSearch {
- display: block;
- width: 12.6em;
- padding-right: 1.4em;
- height: 1.4em;
- margin-top: 0.65em;
- position: relative;
- min-height: 1px; /* Gotta trigger hasLayout for IE7 */
- border: solid 1px #aaa;
- color: black;
- background-color: white;
- .background-image('images/search-fade.png');
- background-position: top left;
- background-repeat: repeat-x;
-
- // Styles for both the search input and the button
- input {
- margin: 0;
- padding: 0;
- border: 0;
- background-color: transparent;
- color: black;
- }
-
- // The search input
- #searchInput {
- width: 100%;
- padding: 0.2em 0 0.2em 0.2em;
- font-size: 13px;
- direction: ltr;
-
- &:focus {
- outline: none;
- }
-
- // These rules MAY NOT be merged because of how CSS requires
browsers
- // to parse unrecognized selectors!
- // Note these rules ensure that placeholder text can be
distinguished from
- // standard text. In browsers which make this distinction clear
these rules
- // are not necessary.
- // For inputs that use jquery.placeholder.js e.g. IE9-
- &.placeholder {
- color: #999;
- }
- // Distinguish placeholder text in IE10+
- &:-ms-input-placeholder {
- color: #999;
- }
- // Distinguish placeholder text in Firefox 18-
- &:-moz-placeholder {
- color: #999;
- }
-
- // Undo the styles Webkit browsers apply to type=search fields,
- // we provide our own
- -webkit-appearance: textfield;
-
- &::-webkit-search-decoration,
- &::-webkit-search-cancel-button,
- &::-webkit-search-results-button,
- &::-webkit-search-results-decoration {
- -webkit-appearance: textfield;
- }
- }
-
- // The buttons. They are displayed in the same position, and if both are
- // present the fulltext search one obscures the 'Go' one.
- #searchButton,
- #mw-searchButton {
- position: absolute;
- top: 0;
- right: 0;
- width: 1.65em;
- height: 100%;
- cursor: pointer;
- /* Hide button text and replace it with the image. */
- text-indent: -99999px;
- /* Needed to make IE6 respect the text-indent. */
- line-height: 1;
- /* Opera 12 on RTL flips the text in a funny way without this.
*/
- /* @noflip */
- direction: ltr;
- white-space: nowrap;
- overflow: hidden;
- }
-
- #searchButton {
- .background-image-svg('images/search-ltr.svg',
'images/search-ltr.png');
- background-position: center center;
- background-repeat: no-repeat;
- }
-
- #mw-searchButton {
- z-index: 1;
- }
-}
-
-/* Custom */
-
-.suggestions {
- position: fixed !important;
-}
-
-/* Search */
-#p-searchSearch {
- /* @noflip */
- float: left;
- margin-right: 10px;
- margin-left: 10px;
-
- h5 {
- display: none;
- }
-
- form,
- input {
- margin: 0;
- margin-top: -4px;
- }
-}
-
-div#simpleSearchSearch {
- display: block;
- width: 156px;
- height: 1.75em;
- margin-top: 0.65em;
- position: relative;
- min-height: 1px; /* Gotta trigger hasLayout for IE7 */
- border: solid 1px #aaa;
- color: black;
- background-color: white;
- .background-image('images/search-fade.png');
- background-position: top left;
- background-repeat: repeat-x;
- margin-bottom: 10px;
-
- // Styles for both the search input and the button
- input {
- position: absolute;
- margin: 0;
- padding: 0;
- border: 0;
- background-color: transparent;
- color: black;
- }
-
- // The search input
- #searchInput {
- position: absolute;
- top: 0;
- left: 0;
- width: 124px;
- margin: 0;
- padding: 0;
- padding-left: 0.5em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- outline: none;
- border: none;
-
- &:focus {
- outline: none;
- }
-
- // These rules MAY NOT be merged because of how CSS requires
browsers
- // to parse unrecognized selectors!
- // Note these rules ensure that placeholder text can be
distinguished from
- // standard text. In browsers which make this distinction clear
these rules
- // are not necessary.
- // For inputs that use jquery.placeholder.js e.g. IE9-
- &.placeholder {
- color: #999;
- }
- // Distinguish placeholder text in IE10+
- &:-ms-input-placeholder {
- color: #999;
- }
- // Distinguish placeholder text in Firefox 18-
- &:-moz-placeholder {
- color: #999;
- }
-
- // Undo the styles Webkit browsers apply to type=search fields,
- // we provide our own
- -webkit-appearance: textfield;
-
- &::-webkit-search-decoration,
- &::-webkit-search-cancel-button,
- &::-webkit-search-results-button,
- &::-webkit-search-results-decoration {
- -webkit-appearance: textfield;
- }
- }
-
- // The buttons. They are displayed in the same position, and if both are
- // present the fulltext search one obscures the 'Go' one.
- #searchButton,
- #mw-searchButton {
- top: 0;
- right: 0;
- width: 24px;
- height: 100%;
- cursor: pointer;
- /* Hide button text and replace it with the image. */
- /* This would be 100% if not for Firefox shenanigans (bug
60900). */
- text-indent: 200%;
- /* Needed to make IE6 respect the text-indent. */
- line-height: 1;
- /* Opera 12 on RTL flips the text in a funny way without this.
*/
- /* @noflip */
- direction: ltr;
- white-space: nowrap;
- overflow: hidden;
- }
-
- #searchButton {
- .background-image-svg('images/search-ltr.svg',
'images/search-ltr.png');
- background-position: center center;
- background-repeat: no-repeat;
- }
-
- #mw-searchButton {
- z-index: 1;
- }
-}
diff --git a/components/tablet.less b/components/tablet.less
deleted file mode 100644
index 3609034..0000000
--- a/components/tablet.less
+++ /dev/null
@@ -1,649 +0,0 @@
-@import "mediawiki.mixins";
-
-/* ipad landscape and other tablets in landscape */
-
-@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) {
-
-img.searchbar {
- display: none;
-}
-}
-
-@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
-
-img.searchbar {
- display: none;
-}
-}
-
-
-@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) and (orientation:portrait) {
-
-img.searchbar {
- display: none;
-}
-
-#echoNotifications {
- float: right;
- top: 0.3em;
- position: relative;
- margin-right: 0px;
- margin-left: 0px;
-}
-
-
-div#mw-panel {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
- bottom: 0;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-top: 1em;
- width: 9.5em;
- left: 0;
-
- div.portal {
- margin: 0 0.6em 0 0.7em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- margin: 0;
- padding: @menu-main-heading-padding;
- cursor: default;
- border: none;
- }
-
- div.body {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo + div.portal {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body {
- margin-left: 0.5em;
- }
- }
-}
-
-div#mw-panel-custom {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
- bottom: 0;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-right: 1em;
- padding-top: 1em;
- width: 11em;
- left: 0;
-
- div.portal-custom {
- margin: 0 0.6em 0 0.7em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- padding: 0.25em;
- padding-top: 0;
- padding-left: 17px;
- padding-bottom: 0;
- margin-bottom: 0;
- cursor: default;
- border: none;
- }
-
- div.body-custom {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo-custom + #p-searchSearch + div.portal-custom {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body-custom {
- margin-left: 0.5em;
- }
- }
-}
-
-.mw-body {
- margin-left: 11em;
- padding: 1.25em 1.5em 1.5em 1.5em;
- /* @embed */
- background-image: url(images/border.png);
- background-position: top left;
- background-repeat: repeat-y;
- background-color: white;
- color: black;
- direction: ltr;
- height: auto;
- position: fixed;
- bottom: 0;
- right: 0em;
- left: 0;
- top: 40px;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-
- .mw-editsection,
- .mw-editsection-like {
- font-family: @content-font-family;
- }
-
- p {
- line-height: inherit;
- margin: 0.5em 0;
- }
-
- h2 {
- font-family: @content-heading-font-family;
- line-height: @heading-line-height;
- margin-bottom: 0.25em;
- padding: 0;
- }
-
- h1 {
- font-size: @content-heading-font-size;
- }
-
- .mw-body-content {
- h1 {
- margin-top: 1em;
- }
- }
-
- h2 {
- font-size: 1.5em;
- margin-top: 1em;
- }
-
- h3,
- h4,
- h5,
- h6 {
- line-height: @content-line-height;
- margin-top: 0.3em;
- margin-bottom: 0;
- padding-bottom: 0;
- }
-
- h3 {
- font-size: 1.2em;
- }
-
- h3,
- h4 {
- font-weight: bold;
- }
-
- h4,
- h5,
- h6 {
- font-size: 100%; /* (reset) */
- }
-
- #toc h2,
- .toc h2 {
- font-size: 100%; /* (reset) */
- font-family: @content-font-family;
- }
-
- .firstHeading {
- /* Change the default from mediawiki.skinning CSS to let
indicators float into heading area */
- overflow: visible;
- }
-
- .mw-indicators {
- float: right;
- line-height: @content-line-height;
- font-size: @content-font-size;
- /* Ensure that this is displayed on top of .mw-body-content and
clickable */
- position: relative;
- z-index: 1;
- }
-
- .mw-indicator {
- display: -moz-inline-block;
- display: inline-block;
- zoom: 1;
- *display: inline;
- }
-}
-
-div#mw-head {
- position: fixed;
- top: 0;
-
- h5 {
- margin: 0;
- padding: 0;
- }
-}
-
-#mw-page-base {
- height: 2.5em;
- background-color: CF8B54;
- background-position: bottom left;
- background-repeat: repeat-x;
- /* This image is only a fallback (for IE 6-9), so we do not @embed it.
*/
- background-image: url('images/page-fade.png');
-}
-
-#p-search {
- /* @noflip */
- float: left;
- margin-right: 0.3em;
- margin-left: 0.3em;
-
- h5 {
- display: none;
- }
-
- form,
- input {
- margin: 0;
- margin-top: 0.4em;
- }
-}
-
-#usermenu {
- right: -11px;
-}
-
-/* ipad portrait and other tablets in portrait */
-
-@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
-
-img.searchbar {
- display: none;
-}
-
-img.editbutton {
- .background-image-svg('images/edit-icon.svg', 'images/edit-icon.png');
- width: 36px;
- height: 35px;
- background-repeat: no-repeat;
- cursor: pointer;
- display: block;
- float: right;
- margin-right: 0;
- height: 40px;
-}
-
-img.editbutton:hover {
- cursor: pointer;
- display: block;
- float: right;
- margin-right: 0;
- background-color: #9F6F40;
- height: 40px;
-}
-
-#echoNotifications {
- float: right;
- top: 0.3em;
- position: relative;
- margin-right: 30px;
- margin-left: 0px;
-}
-
-div#mw-panel {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
- bottom: 0;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-top: 1em;
- width: 10em;
- left: 0;
-
- div.portal {
- margin: 0 0.6em 0 0.7em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- margin: 0;
- padding: @menu-main-heading-padding;
- cursor: default;
- border: none;
- }
-
- div.body {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo + div.portal {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body {
- margin-left: 0.5em;
- }
- }
-}
-
-div#mw-panel-custom {
- font-size: @menu-main-font-size;
- position: fixed;
- top: 40px;
- bottom: 0;
- height: auto;
- overflow-y: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- padding-right: 1em;
- padding-top: 1em;
- width: 11em;
- left: 0;
-
- div.portal-custom {
- margin: 0 0.6em 0 0.7em;
- padding: 0.25em 0;
- direction: ltr;
- background-position: top left;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
-
- h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
- font-weight: 100;
- font-size: 1em;
- color: #444444;
- padding: 0.25em;
- padding-top: 0;
- padding-left: 17px;
- padding-bottom: 0;
- margin-bottom: 0;
- cursor: default;
- border: none;
- }
-
- div.body-custom {
- margin: @menu-main-body-margin;
- padding-top: 0;
-
- ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: @menu-main-body-padding;
-
- li {
- line-height: 1.125em;
- margin: 0;
- padding: 0.25em 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-
- a {
- color:
@menu-main-body-link-color;
- &:visited {
- color:
@menu-main-body-link-visited-color;
- }
- }
- }
- }
- }
- }
-
- /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
- #p-logo-custom + #p-searchSearch + div.portal-custom {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body-custom {
- margin-left: 0.5em;
- }
- }
-}
-
-.mw-body {
- margin-left: 11em;
- padding: 1.25em 1.5em 1.5em 1.5em;
- /* @embed */
- background-image: url(images/border.png);
- background-position: top left;
- background-repeat: repeat-y;
- background-color: white;
- color: black;
- direction: ltr;
- height: auto;
- position: fixed;
- bottom: 0;
- right: 0;
- left: 0;
- top: 40px;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-
- .mw-editsection,
- .mw-editsection-like {
- font-family: @content-font-family;
- }
-
- p {
- line-height: inherit;
- margin: 0.5em 0;
- }
-
- h2 {
- font-family: @content-heading-font-family;
- line-height: @heading-line-height;
- margin-bottom: 0.25em;
- padding: 0;
- }
-
- h1 {
- font-size: @content-heading-font-size;
- }
-
- .mw-body-content {
- h1 {
- margin-top: 1em;
- }
- }
-
- h2 {
- font-size: 1.5em;
- margin-top: 1em;
- }
-
- h3,
- h4,
- h5,
- h6 {
- line-height: @content-line-height;
- margin-top: 0.3em;
- margin-bottom: 0;
- padding-bottom: 0;
- }
-
- h3 {
- font-size: 1.2em;
- }
-
- h3,
- h4 {
- font-weight: bold;
- }
-
- h4,
- h5,
- h6 {
- font-size: 100%; /* (reset) */
- }
-
- #toc h2,
- .toc h2 {
- font-size: 100%; /* (reset) */
- font-family: @content-font-family;
- }
-
- .firstHeading {
- /* Change the default from mediawiki.skinning CSS to let
indicators float into heading area */
- overflow: visible;
- }
-
- .mw-indicators {
- float: right;
- line-height: @content-line-height;
- font-size: @content-font-size;
- /* Ensure that this is displayed on top of .mw-body-content and
clickable */
- position: relative;
- z-index: 1;
- }
-
- .mw-indicator {
- display: -moz-inline-block;
- display: inline-block;
- zoom: 1;
- *display: inline;
- }
-}
-
-div#mw-head {
- position: fixed;
- top: 0;
-
- h5 {
- margin: 0;
- padding: 0;
- }
-}
-
-#p-search {
- /* @noflip */
- float: left;
- margin-right: 0.5em;
- margin-left: 0.5em;
- padding-right: 4em;
-
- h5 {
- display: none;
- }
-
- form,
- input {
- margin: 0;
- margin-top: 0.4em;
- }
-}
-
-}
-}
diff --git a/components/tablet/tablet-custom.less
b/components/tablet/tablet-custom.less
new file mode 100644
index 0000000..e3e2266
--- /dev/null
+++ b/components/tablet/tablet-custom.less
@@ -0,0 +1,125 @@
+@import "../../variables.less";
+@import "mediawiki.mixins";
+
+/* iPad landscape and other tablets in landscape */
+
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) {
+ img.searchbar {
+ display: none;
+ }
+}
+
+/* iPad landscape and other tablets in landscape */
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
+ img.searchbar {
+ display: none;
+ }
+}
+
+/* iPad landscape and other tablets in landscape and portrait */
+
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) and (orientation:portrait) {
+
+ img.searchbar {
+ display: none;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 0px;
+ margin-left: 0px;
+ }
+
+ div#mw-panel {
+ padding-right: 1em;
+ padding-top: 1em;
+ }
+
+ .mw-body {
+ margin-left: 11em;
+ position: fixed;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ #mw-page-base {
+ height: 2.5em;
+ background-color: CF8B54;
+ background-position: bottom left;
+ background-repeat: repeat-x;
+ /* This image is only a fallback (for IE 6-9), so we do not
@embed it. */
+ background-image: url('../../images/page-fade.png');
+ }
+
+ #usermenu {
+ right: -11px;
+ }
+
+ /* ipad portrait and other tablets in portrait */
+
+ @media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
+
+ img.searchbar {
+ display: none;
+ }
+
+ img.editbutton {
+ .background-image-svg('../../images/edit-icon.svg',
'../../images/edit-icon.png');
+ width: 36px;
+ height: 35px;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ height: 40px;
+ }
+
+ img.editbutton:hover {
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ background-color: #9F6F40;
+ height: 40px;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 30px;
+ margin-left: 0px;
+ }
+
+ div#mw-panel {
+ position: fixed;
+ padding-right: 1em;
+ }
+
+ .mw-body {
+ margin-left: 11em;
+ position: fixed;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+}
diff --git a/components/tablet/tablet.less b/components/tablet/tablet.less
new file mode 100644
index 0000000..aad6f08
--- /dev/null
+++ b/components/tablet/tablet.less
@@ -0,0 +1,162 @@
+@import "../../variables.less";
+@import "mediawiki.mixins";
+
+/* iPad landscape and other tablets in landscape */
+
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) {
+ img.searchbar {
+ display: none;
+ }
+}
+
+/* iPad landscape and other tablets in landscape */
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
+ img.searchbar {
+ display: none;
+ }
+}
+
+/* iPad landscape and other tablets in landscape and portrait */
+
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape) and (orientation:portrait) {
+
+ img.searchbar {
+ display: none;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 0px;
+ margin-left: 0px;
+ }
+
+
+ div#mw-panel {
+ width: 9.5em;
+ z-index: 1;
+ }
+
+ .mw-body {
+ margin-left: 11em;
+ position: fixed;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ #mw-page-base {
+ height: 2.5em;
+ background-color: CF8B54;
+ background-position: bottom left;
+ background-repeat: repeat-x;
+ /* This image is only a fallback (for IE 6-9), so we do not
@embed it. */
+ background-image: url('../../images/page-fade.png');
+ }
+
+ #p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 0.3em;
+ margin-left: 0.3em;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+ }
+
+ #usermenu {
+ right: -11px;
+ }
+
+ /* ipad portrait and other tablets in portrait */
+
+ @media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
+
+ img.searchbar {
+ display: none;
+ }
+
+ img.editbutton {
+ .background-image-svg('../../images/edit-icon.svg',
'../../images/edit-icon.png');
+ width: 36px;
+ height: 35px;
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ height: 40px;
+ }
+
+ img.editbutton:hover {
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin-right: 0;
+ background-color: #9F6F40;
+ height: 40px;
+ }
+
+ #echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 30px;
+ margin-left: 0px;
+ }
+
+ div#mw-panel {
+ position: fixed;
+ padding-top: 1em;
+ width: 10em;
+ }
+
+ .mw-body {
+ margin-left: 11em;
+ position: fixed;
+ }
+
+ div#mw-head {
+ position: fixed;
+ top: 0;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ #p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 0.5em;
+ margin-left: 0.5em;
+ padding-right: 4em;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+ }
+ }
+}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index ea1e998..c367c0b 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -14,6 +14,6 @@
"metrolook.js": "{{optional}}",
"skinmetrolook-collapsiblenav-preference": "The message refers to the
sidebar, whose sections are collapsible in Metrolook skin (some of them
collapsed by default and some no); the preference disables collapsing entirely
and is among \"Advanced options\" in the \"Appearence\" section.\n\nSee
also\n*{{msg-mw|collapsiblevector-collapsiblenav-preference}}",
"metrolook-guest": "Used for descbribing you as a guest editing the
wiki.\n{{Identical|Guest}}",
- "metrolook-tiles": "Used to configure the first set of tiles, which are
displayed when <code>$wgMetrolookBartile</code> is set to
<code>true</code>.\nThe message's format is:\n\n* URL to the site|alternative
text|image URL\n\nFor example:\n\n*
http://www.pidgi.net/wiki/|PidgiWiki|http://images.pidgi.net/pidgiwikitiletop.png\n*
http://www.pidgi.net/press/|PidgiWiki
Press|http://images.pidgi.net/pidgipresstiletop.png\n*
http://www.pidgi.net/jcc/|The JCC|http://images.pidgi.net/jcctiletop.png\n*
http://www.petalburgwoods.com/|Petalburg
Woods|http://images.pidgi.net/pwntiletop.png";,
+ "metrolook-tiles": "Used to configure the first set of tiles, which are
displayed when <code>$wgMetrolookBartile</code> is set to
<code>true</code>.\nThe message's format is:\n\n* URL to the site|alternative
text|image URL\n\nFor example:\n\n*
http://www.pidgi.net/wiki/|PidgiWiki|http://images.pidgi.net/pidgiwikitiletop.png";,
"metrolook-tiles-second": "Used to configure the second set of tiles,
which are displayed when <code>$wgMetrolookBartile</code> is set to
<code>false</code>. The format is same as that of
[[MediaWiki:Metrolook-tiles]]."
}
diff --git a/js/collapsibleNav.custom.js b/js/collapsibleNav.custom.js
deleted file mode 100644
index 03f33a0..0000000
--- a/js/collapsibleNav.custom.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Collapsible navigation for Vector
- */
-( function ( mw, $ ) {
- 'use strict';
- var map;
-
- // Use the same function for all navigation headings - don't repeat
- function toggle( $element ) {
- var isCollapsed = $element.parent().is( '.collapsed' );
-
- $.cookie(
- 'vector-nav-' + $element.parent().attr( 'id' ),
- isCollapsed,
- { expires: 30, path: '/' }
- );
-
- $element
- .parent()
- .toggleClass( 'expanded' )
- .toggleClass( 'collapsed' )
- .find( '.body-custom' )
- .slideToggle( 'fast' );
- isCollapsed = !isCollapsed;
-
- $element
- .find( '> a' )
- .attr( {
- 'aria-pressed': isCollapsed ? 'false' : 'true',
- 'aria-expanded': isCollapsed ? 'false' : 'true'
- } );
- }
-
- /* Browser Support */
-
- map = {
- // Left-to-right languages
- ltr: {
- // Collapsible Nav is broken in Opera < 9.6 and
Konqueror < 4
- opera: [ [ '>=', 9.6 ] ],
- konqueror: [ [ '>=', 4.0 ] ],
- blackberry: false,
- ipod: [ [ '>=', 6 ] ],
- iphone: [ [ '>=', 6 ] ],
- ps3: false
- },
- // Right-to-left languages
- rtl: {
- opera: [ [ '>=', 9.6 ] ],
- konqueror: [ [ '>=', 4.0 ] ],
- blackberry: false,
- ipod: [ [ '>=', 6 ] ],
- iphone: [ [ '>=', 6 ] ],
- ps3: false
- }
- };
- if ( !$.client.test( map ) ) {
- return true;
- }
-
- $( function ( $ ) {
- var $headings;
-
- /* General Portal Modification */
-
- // Apply a class to the entire panel to activate styles
- $( '#mw-panel-custom' ).addClass( 'collapsible-nav' );
- // Use cookie data to restore preferences of what to show and
hide
- $( '#mw-panel-custom > .portal-custom:not(.persistent)' )
- .each( function ( i ) {
- var id = $( this ).attr( 'id' ),
- state = $.cookie( 'vector-nav-' + id );
- $( this ).find( 'ul:first' ).attr( 'id', id +
'-list' );
- // Add anchor tag to heading for better
accessibility
- $( this ).find( 'h5' ).wrapInner(
- $( '<a>' )
- .attr( {
- href: '#',
- 'aria-haspopup': 'true',
- 'aria-controls': id +
'-list',
- role: 'button'
- } )
- .click( false )
- );
- // In the case that we are not showing the new
version, let's show the languages by default
- if (
- state === 'true' ||
- ( state === null && i < 1 ) ||
- ( state === null && id === 'p-lang' )
- ) {
- $( this )
- .addClass( 'expanded' )
- .removeClass( 'collapsed' )
- .find( '.body-custom' )
- .hide() // bug 34450
- .show();
- $( this ).find( 'h5 > a' )
- .attr( {
- 'aria-pressed': 'true',
- 'aria-expanded': 'true'
- } );
- } else {
- $( this )
- .addClass( 'collapsed' )
- .removeClass( 'expanded' );
- $( this ).find( 'h5 > a' )
- .attr( {
- 'aria-pressed': 'false',
- 'aria-expanded': 'false'
- } );
- }
- // Re-save cookie
- if ( state !== null ) {
- $.cookie( 'vector-nav-' + $( this
).attr( 'id' ), state, { expires: 30, path: '/' } );
- }
- } );
-
- /* Tab Indexing */
-
- $headings = $( '#mw-panel-custom >
.portal-custom:not(.persistent) > h5' );
-
- // Make it keyboard accessible
- $headings.attr( 'tabindex', '0' );
-
- // Toggle the selected menu's class and expand or collapse the
menu
- $( '#mw-panel-custom' )
- .delegate( '.portal-custom:not(.persistent) > h5',
'keydown', function ( e ) {
- // Make the space and enter keys act as a click
- if ( e.which === 13 /* Enter */ || e.which ===
32 /* Space */ ) {
- toggle( $( this ) );
- }
- } )
- .delegate( '.portal-custom:not(.persistent) > h5',
'mousedown', function ( e ) {
- if ( e.which !== 3 ) { // Right mouse click
- toggle( $( this ) );
- $( this ).blur();
- }
- return false;
- } );
- } );
-}( mediaWiki, jQuery ) );
diff --git a/js/collapsibleNav.js b/js/collapsibleNav.js
index 8884734..84a5c87 100644
--- a/js/collapsibleNav.js
+++ b/js/collapsibleNav.js
@@ -1,5 +1,5 @@
/**
- * Collapsible navigation for Vector
+ * Collapsible navigation for Metrolook
*/
( function ( mw, $ ) {
'use strict';
@@ -10,7 +10,7 @@
var isCollapsed = $element.parent().is( '.collapsed' );
$.cookie(
- 'vector-nav-' + $element.parent().attr( 'id' ),
+ 'metrolook-nav-' + $element.parent().attr( 'id' ),
isCollapsed,
{ expires: 30, path: '/' }
);
@@ -69,7 +69,7 @@
$( '#mw-panel > .portal:not(.persistent)' )
.each( function ( i ) {
var id = $( this ).attr( 'id' ),
- state = $.cookie( 'vector-nav-' + id );
+ state = $.cookie( 'metrolook-nav-' + id
);
$( this ).find( 'ul:first' ).attr( 'id', id +
'-list' );
// Add anchor tag to heading for better
accessibility
$( this ).find( 'h5' ).wrapInner(
@@ -111,7 +111,7 @@
}
// Re-save cookie
if ( state !== null ) {
- $.cookie( 'vector-nav-' + $( this
).attr( 'id' ), state, { expires: 30, path: '/' } );
+ $.cookie( 'metrolook-nav-' + $( this
).attr( 'id' ), state, { expires: 30, path: '/' } );
}
} );
diff --git a/js/mediawiki.searchSuggest.custom.js
b/js/mediawiki.searchSuggest.custom.js
deleted file mode 100644
index 04522b1..0000000
--- a/js/mediawiki.searchSuggest.custom.js
+++ /dev/null
@@ -1,374 +0,0 @@
-/*!
- * Add search suggestions to the search form.
- */
-( function ( mw, $ ) {
- mw.searchSuggest = {
- // queries the wiki and calls response with the result
- request: function ( api, query, response, maxRows ) {
- return api.get( {
- formatversion: 2,
- action: 'opensearch',
- search: query,
- namespace: 0,
- limit: maxRows,
- suggest: true
- } ).done( function ( data, jqXHR ) {
- response( data[ 1 ], {
- type: jqXHR.getResponseHeader(
'X-OpenSearch-Type' ),
- query: query
- } );
- } );
- }
- };
-
- $( function () {
- var api, map, searchboxesSelectors,
- // Region where the suggestions box will appear
directly below
- // (using the same width). Can be a container element
or the input
- // itself, depending on what suits best in the
environment.
- // For Vector the suggestion box should align with the
simpleSearch
- // container's borders, in other skins it should align
with the input
- // element (not the search form, as that would leave
the buttons
- // vertically between the input and the suggestions).
- $searchRegion = $( '#simpleSearch, #simpleSearchSearch,
#searchInput' ).first(),
- $searchInput = $( '#searchInput' ),
- previousSearchText = $searchInput.val();
-
- // Compatibility map
- map = {
- // SimpleSearch is broken in Opera < 9.6
- opera: [ [ '>=', 9.6 ] ],
- // Older Konquerors are unable to position the
suggestions correctly (bug 50805)
- konqueror: [ [ '>=', '4.11' ] ],
- docomo: false,
- blackberry: false,
- // Support for iOS 6 or higher. It has not been tested
on iOS 5 or lower
- ipod: [ [ '>=', 6 ] ],
- iphone: [ [ '>=', 6 ] ]
- };
-
- if ( !$.client.test( map ) ) {
- return;
- }
-
- // Compute form data for search suggestions functionality.
- function getFormData( context ) {
- var $form, baseHref, linkParams;
-
- if ( !context.formData ) {
- // Compute common parameters for links' hrefs
- $form = context.config.$region.closest( 'form'
);
-
- baseHref = $form.attr( 'action' );
- baseHref += baseHref.indexOf( '?' ) > -1 ? '&'
: '?';
-
- linkParams = $form.serializeObject();
-
- context.formData = {
- textParam: context.data.$textbox.attr(
'name' ),
- linkParams: linkParams,
- baseHref: baseHref
- };
- }
-
- return context.formData;
- }
-
- /**
- * Callback that's run when the user changes the search input
text
- * 'this' is the search input box (jQuery object)
- *
- * @ignore
- */
- function onBeforeUpdate() {
- var searchText = this.val();
-
- if ( searchText && searchText !== previousSearchText ) {
- mw.track( 'mediawiki.searchSuggest', {
- action: 'session-start'
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'session-start'
- } );
- }
- previousSearchText = searchText;
- }
-
- /**
- * defines the location of autocomplete. Typically either
- * header, which is in the top right of vector (for example)
- * and content which identifies the main search bar on
- * Special:Search. Defaults to header for skins that don't set
- * explicitly.
- *
- * @ignore
- */
- function getInputLocation( context ) {
- return context.config.$region
- .closest( 'form' )
- .find( '[data-search-loc]' )
- .data( 'search-loc' ) || 'header';
- }
-
- /**
- * Callback that's run when suggestions have been updated
either from the cache or the API
- * 'this' is the search input box (jQuery object)
- *
- * @ignore
- */
- function onAfterUpdate( metadata ) {
- var context = this.data( 'suggestionsContext' );
-
- mw.track( 'mediawiki.searchSuggest', {
- action: 'impression-results',
- numberOfResults:
context.config.suggestions.length,
- resultSetType: metadata.type || 'unknown',
- query: metadata.query,
- inputLocation: getInputLocation( context )
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'impression-results',
- numberOfResults:
context.config.suggestions.length,
- resultSetType: metadata.type || 'unknown',
- query: metadata.query,
- inputLocation: getInputLocation( context )
- } );
- }
-
- // The function used to render the suggestions.
- function renderFunction( text, context ) {
- var formData = getFormData( context ),
- textboxConfig = context.data.$textbox.data(
'mw-searchsuggest' ) || {};
-
- // linkParams object is modified and reused
- formData.linkParams[ formData.textParam ] = text;
-
- // Allow trackers to attach tracking information, such
- // as wprov, to clicked links.
- mw.track( 'mediawiki.searchSuggest', {
- action: 'render-one',
- formData: formData,
- index: context.config.suggestions.indexOf( text
)
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'render-one',
- formData: formData,
- index: context.config.suggestions.indexOf( text
) + 1
- } );
-
- // this is the container <div>, jQueryfield
- this.text( text );
-
- // wrap only as link, if the config doesn't disallow it
- if ( textboxConfig.wrapAsLink !== false ) {
- this.wrap(
- $( '<a>' )
- .attr( 'href',
formData.baseHref + $.param( formData.linkParams ) )
- .attr( 'title', text )
- .addClass(
'mw-searchSuggest-link' )
- );
- }
- }
-
- // The function used when the user makes a selection
- function selectFunction( $input, source ) {
- var context = $input.data( 'suggestionsContext' ),
- text = $input.val();
-
- // Selecting via keyboard triggers a form submission.
That will fire
- // the submit-form event in addition to this
click-result event.
- if ( source !== 'keyboard' ) {
- mw.track( 'mediawiki.searchSuggest', {
- action: 'click-result',
- numberOfResults:
context.config.suggestions.length,
- index:
context.config.suggestions.indexOf( text )
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'click-result',
- numberOfResults:
context.config.suggestions.length,
- index:
context.config.suggestions.indexOf( text )
- } );
- }
-
- // allow the form to be submitted
- return true;
- }
-
- function specialRenderFunction( query, context ) {
- var $el = this,
- formData = getFormData( context );
-
- // linkParams object is modified and reused
- formData.linkParams[ formData.textParam ] = query;
-
- mw.track( 'mediawiki.searchSuggest', {
- action: 'render-one',
- formData: formData,
- index: context.config.suggestions.indexOf(
query )
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'render-one',
- formData: formData,
- index: context.config.suggestions.indexOf(
query )
- } );
-
- if ( $el.children().length === 0 ) {
- $el
- .append(
- $( '<div>' )
- .addClass(
'special-label' )
- .text( mw.msg(
'searchsuggest-containing' ) ),
- $( '<div>' )
- .addClass(
'special-query' )
- .text( query )
- )
- .show();
- } else {
- $el.find( '.special-query' )
- .text( query );
- }
-
- if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) )
{
- $el.parent().attr( 'href', formData.baseHref +
$.param( formData.linkParams ) + '&fulltext=1' );
- } else {
- $el.wrap(
- $( '<a>' )
- .attr( 'href',
formData.baseHref + $.param( formData.linkParams ) + '&fulltext=1' )
- .addClass(
'mw-searchSuggest-link' )
- );
- }
- }
-
- // Generic suggestions functionality for all search boxes
- searchboxesSelectors = [
- // Primary searchbox on every page in standard skins
- '#searchInput',
- // Generic selector for skins with multiple searchboxes
(used by CologneBlue)
- // and for MediaWiki itself (special pages with page
title inputs)
- '.mw-searchInput'
- ];
- $( searchboxesSelectors.join( ', ' ) )
- .suggestions( {
- fetch: function ( query, response, maxRows ) {
- var node = this[ 0 ];
-
- api = api || new mw.Api();
-
- $.data( node, 'request',
mw.searchSuggest.request( api, query, response, maxRows ) );
- },
- cancel: function () {
- var node = this[ 0 ],
- request = $.data( node,
'request' );
-
- if ( request ) {
- request.abort();
- $.removeData( node, 'request' );
- }
- },
- result: {
- render: renderFunction,
- select: function () {
- // allow the form to be
submitted
- return true;
- }
- },
- update: {
- before: onBeforeUpdate,
- after: onAfterUpdate
- },
- cache: true,
- highlightInput: true
- } )
- .bind( 'paste cut drop', function () {
- // make sure paste and cut events from the
mouse and drag&drop events
- // trigger the keypress handler and cause the
suggestions to update
- $( this ).trigger( 'keypress' );
- } )
- // In most skins (at least Monobook and Vector), the
font-size is messed up in <body>.
- // (they use 2 elements to get a sane font-height). So,
instead of making exceptions for
- // each skin or adding more stylesheets, just copy it
from the active element so auto-fit.
- .each( function () {
- var $this = $( this );
- $this
- .data( 'suggestions-context' )
- .data.$container
- .css( 'fontSize', $this.css(
'fontSize' ) );
- } );
-
- // Ensure that the thing is actually present!
- if ( $searchRegion.length === 0 ) {
- // Don't try to set anything up if simpleSearch is
disabled sitewide.
- // The loader code loads us if the option is present,
even if we're
- // not actually enabled (anymore).
- return;
- }
-
- // Special suggestions functionality and tracking for
skin-provided search box
- $searchInput.suggestions( {
- update: {
- before: onBeforeUpdate,
- after: onAfterUpdate
- },
- result: {
- render: renderFunction,
- select: selectFunction
- },
- special: {
- render: specialRenderFunction,
- select: function ( $input, source ) {
- var context = $input.data(
'suggestionsContext' ),
- text = $input.val();
- if ( source === 'mouse' ) {
- // mouse click won't trigger
form submission, so we need to send a click event
- mw.track(
'mediawiki.searchSuggest', {
- action: 'click-result',
- numberOfResults:
context.config.suggestions.length,
- index:
context.config.suggestions.indexOf( text )
- } );
-
- mw.track( 'skins.metrolook.js',
{
- action: 'click-result',
- numberOfResults:
context.config.suggestions.length,
- index:
context.config.suggestions.indexOf( text )
- } );
- } else {
- $input.closest( 'form' )
- .append( $( '<input
type="hidden" name="fulltext" value="1"/>' ) );
- }
- return true; // allow the form to be
submitted
- }
- },
- $region: $searchRegion
- } );
-
- $searchInput.closest( 'form' )
- // track the form submit event
- .on( 'submit', function () {
- var context = $searchInput.data(
'suggestionsContext' );
- mw.track( 'mediawiki.searchSuggest', {
- action: 'submit-form',
- numberOfResults:
context.config.suggestions.length,
- $form: context.config.$region.closest(
'form' ),
- inputLocation: getInputLocation(
context ),
- index:
context.config.suggestions.indexOf(
- context.data.$textbox.val()
- )
- } );
-
- mw.track( 'skins.metrolook.js', {
- action: 'submit-form',
- numberOfResults:
context.config.suggestions.length,
- $form: context.config.$region.closest(
'form' ),
- inputLocation: getInputLocation(
context )
- } );
- } )
- // If the form includes any fallback fulltext search
buttons, remove them
- .find( '.mw-fallbackSearchButton' ).remove();
- } );
-
-}( mediaWiki, jQuery ) );
diff --git a/js/metrolook.js b/js/metrolook.js
index da71120..8ec8b19 100644
--- a/js/metrolook.js
+++ b/js/metrolook.js
@@ -54,13 +54,10 @@
} // end mobile-only code
$( '#hamburgerIcon' ).click( function ( e ) {
- $( '#mw-panel, #mw-panel-custom' ).fadeToggle(
150 );
+ $( '#mw-panel' ).fadeToggle( 150 );
$( '.clicker' ).toggleClass( 'active' );
- if (
- $( '#mw-panel' ).is( ':visible' ) ||
- $( '#mw-panel-custom' ).is( ':visible' )
- ) {
- $( '#mw-panel, #mw-panel-custom', this
).fadeOut( 150 );
+ if ( $( '#mw-panel' ).is( ':visible' ) ) {
+ $( '#mw-panel', this ).fadeOut( 150 );
$( '.clicker' ).removeClass( 'active' );
}
e.stopPropagation();
diff --git a/js/metrolook.search.js b/js/metrolook.search.js
index 0c94afe..ee29f66 100644
--- a/js/metrolook.search.js
+++ b/js/metrolook.search.js
@@ -1,14 +1,18 @@
-( function ( $ ) {
- $( function () {
-
- function isTouchDevice() {
- return !!( 'ontouchstart' in window );
- }
-
- /* This is here to fix js issue with iPad (all models) */
+( function ( $, mw ) {
+ if ( mw.config.get( 'wgMetrolookSearch' ) ) {
$( function () {
- if ( isTouchDevice() ) {
- if (
/mobi|alcatel|Android|android|webOS|webos|iPhone|iPod|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) ) {
+
+ function isTouchDevice() {
+ return !!( 'ontouchstart' in window );
+ }
+
+ function isMobileUserAgent() {
+ return !!(
/mobi|alcatel|Android|android|webOS|webos|iPhone|iPod|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) );
+ }
+
+ /* This is here to fix js issue with iPad (all models)
*/
+ $( function () {
+ if ( isTouchDevice() && isMobileUserAgent() ) {
$( '#p-search' ).hide();
$( 'img.searchbar' ).click( function (
e ) {
$( '#p-search' ).fadeToggle(
150 );
@@ -27,7 +31,7 @@
if ( /kindle|iPad|PlayBook|Tablet/i.test(
navigator.userAgent ) ) {
$( '#p-search' ).show();
}
- }
+ } );
} );
- } );
-}( jQuery ) );
+ }
+}( jQuery, mediaWiki ) );
diff --git a/js/vector.js b/js/vector.js
index 7266a13..e1a4a3f 100644
--- a/js/vector.js
+++ b/js/vector.js
@@ -1,5 +1,5 @@
/**
- * Vector-specific scripts
+ * Metrolook-specific scripts
*/
jQuery( function ( $ ) {
/**
@@ -110,4 +110,3 @@
}
} );
} );
-
diff --git a/screen-custom.less b/screen-custom.less
new file mode 100644
index 0000000..486e106
--- /dev/null
+++ b/screen-custom.less
@@ -0,0 +1,8 @@
+/* Metrolook screen styles */
+
+@import "variables.less";
+
+@import "components/custom/common.less";
+@import "components/custom/navigation.less";
+@import "components/custom/footer.less";
+@import "components/custom/externalLinks.less";
diff --git a/screen-hd.less b/screen-hd.less
index 925d898..b0ea298 100644
--- a/screen-hd.less
+++ b/screen-hd.less
@@ -9,9 +9,6 @@
#p-logo {
left: @menu-main-logo-left;
}
-#p-logo-custom {
- left: @menu-main-logo-left;
-}
div#footer {
margin-left: 0;
padding: 1.25em;
diff --git a/screen.less b/screen.less
index 1267db6..f2f692a 100644
--- a/screen.less
+++ b/screen.less
@@ -2,8 +2,7 @@
@import "variables.less";
-@import "components/common.less";
-@import "components/navigation.less";
-@import "components/footer.less";
-@import "components/externalLinks.less";
-@import "theme.less";
+@import "components/main/common.less";
+@import "components/main/navigation.less";
+@import "components/main/footer.less";
+@import "components/main/externalLinks.less";
diff --git a/screen.mobile.less b/screen.mobile.less
deleted file mode 100644
index cf81df5..0000000
--- a/screen.mobile.less
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Metrolook screen styles */
-
-@import "variables.less";
-
-@import "components/common.less";
-@import "components/navigation.less";
-@import "components/footer.less";
-@import "components/externalLinks.less";
-@import "components/tablet.less";
-@import "components/mobile.less";
-@import "theme.less";
diff --git a/skin.json b/skin.json
index 0f18494..5a551de 100644
--- a/skin.json
+++ b/skin.json
@@ -58,11 +58,11 @@
}
}
},
- "skins.metrolook.styles.responsive": {
+ "skins.metrolook.styles.custom": {
"targets": [ "desktop", "mobile" ],
"position": "top",
"styles": {
- "screen.mobile.less": {
+ "screen-custom.less": {
"media": "screen"
},
"screen-hd.less": {
@@ -70,13 +70,27 @@
}
}
},
- "skins.metrolook.mediawiki.searchSuggest.custom": {
- "scripts": [
- "js/mediawiki.searchSuggest.custom.js"
- ],
+ "skins.metrolook.styles.mobile": {
+ "targets": [ "desktop", "mobile" ],
"position": "top",
- "dependencies": [
- "mediawiki.searchSuggest"
+ "styles": [
+ "components/mobile/mobile.less",
+ "components/tablet/tablet.less"
+ ]
+ },
+ "skins.metrolook.styles.mobile.custom": {
+ "targets": [ "desktop", "mobile" ],
+ "position": "top",
+ "styles": [
+ "components/mobile/mobile-custom.less",
+ "components/tablet/tablet-custom.less"
+ ]
+ },
+ "skins.metrolook.styles.theme.custom": {
+ "targets": [ "desktop", "mobile" ],
+ "position": "top",
+ "styles": [
+ "components/custom/theme.less"
]
},
"skins.metrolook.js": {
@@ -89,7 +103,6 @@
],
"position": "top",
"dependencies": [
-
"skins.metrolook.mediawiki.searchSuggest.custom",
"jquery.throttle-debounce",
"jquery.tabIndex"
]
@@ -100,21 +113,7 @@
"js/collapsibleNav.js"
],
"styles": [
- "components/collapsibleNav.less"
- ],
- "dependencies": [
- "jquery.client",
- "jquery.cookie",
- "jquery.tabIndex"
- ]
- },
- "skins.metrolook.collapsibleNav-custom": {
- "position": "bottom",
- "scripts": [
- "js/collapsibleNav.custom.js"
- ],
- "styles": [
- "components/collapsibleNav.custom.less"
+ "components/main/collapsibleNav.less"
],
"dependencies": [
"jquery.client",
@@ -166,7 +165,7 @@
"MetrolookLogo": true,
"MetrolookSiteNameLogo": false,
"MetrolookSiteName": true,
- "MetrolookSiteNameText": true,
+ "MetrolookSiteNameText": false,
"MetrolookSiteText": "",
"MetrolookSearchBar": true,
"MetrolookDownArrow": true,
--
To view, visit https://gerrit.wikimedia.org/r/327936
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5a1b89811af3aa158ea2531f9e242b631328e75c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: master
Gerrit-Owner: Paladox <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
![http://images.pidgi.net/pwntiletop.png"](http://images.pidgi.net/pwntiletop.png"){kind=link}
![http://images.pidgi.net/pidgiwikitiletop.png"](http://images.pidgi.net/pidgiwikitiletop.png"){kind=link}