Paladox has uploaded a new change for review.
https://gerrit.wikimedia.org/r/191638
Change subject: Preview big release including mobile view for metrolook
......................................................................
Preview big release including mobile view for metrolook
* This release is a big release includes many new features and fixes.
* Important to read CHANGELOG.md and README.md to see the setting that were
added, removed, renamed.
* Preview mobile desgn.
* Changes to desktop desgn.
* Includes fixes for js.
* Cleans up Metrolook.php and MetrolookTemplate.php.
* And many more changes.
Please see changelog for more details.
Change-Id: I67c8f6bba2a23258706a9b67ea063622c6883baf
---
M .gitreview
A .jscsrc
M CHANGELOG.md
M Metrolook.php
M MetrolookTemplate.php
M README.md
M SkinMetrolook.php
M components/common.less
A components/mobile.less
M components/navigation.less
M components/personalMenu.less
M components/search.less
M images/bullet-circle-icon.svg
A images/edit-icon.png
A images/edit-icon.svg
A images/hamburger.png
A images/hamburger.svg
A images/user-icon-20.png
A images/user-icon-20.svg
A images/user-icon-40.png
A images/user-icon-40.svg
D images/user-icon.png
D images/user-icon.svg
R js/collapsibleNav.js
R js/collapsibleTabs.js
A js/mediawiki.searchSuggest.custom.js
A js/metrolook.js
R js/overthrow.js
R js/vector.js
M screen.less
M theme.less
31 files changed, 1,599 insertions(+), 525 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Metrolook
refs/changes/38/191638/1
diff --git a/.gitreview b/.gitreview
index db98503..8791eee 100644
--- a/.gitreview
+++ b/.gitreview
@@ -2,5 +2,5 @@
host=gerrit.wikimedia.org
port=29418
project=mediawiki/skins/Metrolook.git
-defaultbranch=master
+defaultbranch=test
defaultrebase=0
diff --git a/.jscsrc b/.jscsrc
new file mode 100644
index 0000000..9d22e3f
--- /dev/null
+++ b/.jscsrc
@@ -0,0 +1,3 @@
+{
+ "preset": "wikimedia"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6763e99..a540e3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,55 @@
Changelog
=========
+### 3.0 beta 16
+
+Big release with new desgn for mobile and minor improvements to desktop desgn.
+
+Please see test branch for updates to beta 16 release once it looks like there
arnt many issues and all things have been added to it, it will be released to
the master branch.
+
+Bump required mediawiki version to mediawiki 1.25 wmf 18
+
+Mainly new features and desgn are
+
+* Mobile desgn (This is a preview of mobile desgn please report bug in issue
section and fix bugs if you know how to thanks. and please also suggest
improvements to the desktop and mobile desgn.)
+
+* Cleaned up MetrolookTemplate.php file.
+
+* Cleaned up setting names.
+
+* Settings that were renamed
+
+$logo renamed to $wgLogoImage<br>$SearchBar renamed to
$wgSearchBar<br>$DownArrow renamed to $wgDownArrow<br>$Line renamed to
$wgLine<br>$UploadButton renamed to $wgUploadButton<br>$wgURL1 and $wgImage1
where not renamed instead there settings were changed for url you put in the
url to website for image you put in the path to image or url to image.
+
+* Settings that were removed.
+
+ $link and $picture
+
+* New settings that were added
+
+$wgBartile
+
+$wgTile1<br>$wgTile2<br>$wgTile3<br>$wgTile4<br>$wgTile5<br>$wgTile6<br>$wgTile7<br>$wgTile8<br>$wgTile9<br>$wgTile10
+
+Note: Please see settings section in README.md for more information on how to
enable and disable it.
+
+* Remove styles and js from the main MetrolookTemplate.php and seperated it
into own files.
+
+* More new things and changes comming soon to this release. /* This will be
removed once this is ready to be published */
+
+
+
+Revision 3 brings these fixes /* This may be removed near to time of release.
*/
+
+* Fixes for ipad desgn.
+
+* Disabled searchbar js for ipad.
+
+* Fixes for mobile desgn.
+
+* Fixes for desktop desgn.
+
+
### 3.0 beta 15
* Adding copying file for license.
diff --git a/Metrolook.php b/Metrolook.php
index 345e6e3..07e37a5 100644
--- a/Metrolook.php
+++ b/Metrolook.php
@@ -26,7 +26,7 @@
'name' => 'Metrolook',
'namemsg' => 'skinname-metrolook',
'descriptionmsg' => 'metrolook-desc',
- 'version' => '3.0 beta 15',
+ 'version' => '3.0 beta 16',
'url' => 'https://www.mediawiki.org/wiki/Skin:Metrolook',
'author' => array( 'immewnity', 'paladox2015', 'Craig Davison',
'lagleki' ),
'license-name' => 'GPL-2.0+',
@@ -61,40 +61,27 @@
$GLOBALS['wgVectorUseIconWatch'] = true;
/* Logo is off by default to turn it on plase see README.md. Note that if
enabled it will not show properly.*/
-$GLOBALS['logo'] = false;
+$GLOBALS['wgLogoImage'] = false;
/* to enable search bar on the sidebar and disables the search bar on the top
bar */
-$GLOBALS['SearchBar'] = true;
+$GLOBALS['wgSearchBar'] = true;
-$GLOBALS['DownArrow'] = true;
+$GLOBALS['wgDownArrow'] = true;
-$GLOBALS['Line'] = true;
+$GLOBALS['wgLine'] = true;
-$GLOBALS['link1'] = true;
+$GLOBALS['wgUploadButton'] = true;
-$GLOBALS['image1'] = true;
+/* To use tile 5 to 10 please diable this */
+$GLOBALS['wgBartile'] = true;
-$GLOBALS['link2'] = true;
+$GLOBALS['wgTile1'] = true;
-$GLOBALS['image2'] = true;
+$GLOBALS['wgTile2'] = true;
-$GLOBALS['link3'] = true;
+$GLOBALS['wgTile3'] = true;
-$GLOBALS['image3'] = true;
-
-$GLOBALS['link4'] = true;
-
-$GLOBALS['image4'] = true;
-
-$GLOBALS['link5'] = false;
-
-$GLOBALS['image5'] = false;
-
-$GLOBALS['link6'] = false;
-
-$GLOBALS['image6'] = false;
-
-$GLOBALS['UploadButton'] = true;
+$GLOBALS['wgTile4'] = true;
// Register modules
$GLOBALS['wgResourceModules']['skins.metrolook.styles'] = array(
@@ -107,20 +94,24 @@
);
$GLOBALS['wgResourceModules']['skins.metrolook.js'] = array(
'scripts' => array(
- 'collapsibleTabs.js',
- 'vector.js',
+ 'js/collapsibleTabs.js',
+ 'js/metrolook.js',
+ 'js/vector.js',
+ 'js/mediawiki.searchSuggest.custom.js',
+ 'js/overthrow.js',
),
'position' => 'top',
'dependencies' => array(
'jquery.throttle-debounce',
'jquery.tabIndex',
+ 'mediawiki.searchSuggest',
),
'remoteSkinPath' => 'Metrolook',
'localBasePath' => __DIR__,
);
$GLOBALS['wgResourceModules']['skins.metrolook.collapsibleNav'] = array(
'scripts' => array(
- 'collapsibleNav.js',
+ 'js/collapsibleNav.js',
),
'messages' => array(
'vector-collapsiblenav-more',
diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php
index d121d9b..0182464 100644
--- a/MetrolookTemplate.php
+++ b/MetrolookTemplate.php
@@ -37,35 +37,9 @@
* Outputs the entire contents of the (X)HTML page
*/
public function execute() {
- global $logo;
- global $SearchBar;
- global $DownArrow;
- global $Line;
- global $image1;
- global $link1;
- global $picture1;
- global $url1;
- global $image2;
- global $link2;
- global $picture2;
- global $url2;
- global $image3;
- global $link3;
- global $picture3;
- global $url3;
- global $image4;
- global $link4;
- global $picture4;
- global $url4;
- global $image5;
- global $link5;
- global $picture5;
- global $url5;
- global $image6;
- global $link6;
- global $picture6;
- global $url6;
- global $UploadButton;
+ global $wgLogoImage, $wgSearchBar, $wgDownArrow, $wgLine,
$wgUploadButton;
+ global $wgBartile, $wgTile1, $wgTile2, $wgTile3, $wgTile4,
$wgTile5, $wgTile6, $wgTile7, $wgTile8, $wgTile9, $wgTile10;
+ global $wgImage1, $wgURL1, $wgImage2, $wgURL2, $wgImage3,
$wgURL3, $wgImage4, $wgURL4, $wgImage5, $wgURL5, $wgImage6, $wgURL6;
// Build additional attributes for navigation urls
$nav = $this->data['content_navigation'];
@@ -132,104 +106,9 @@
// Output HTML Page
$this->html( 'headelement' );
?>
- <style>
-body {
- height:100%;
-}
-html {
- height:100%;
-}
-html,
-body {
- margin: 0px 0px 0px 0px;
- padding: 0px 0px 0px 0px;
- height:100%;
-}
-#top-tile-bar {
- background:transparent;
- left: 0px;
- height: 200px;
- position: fixed;
- z-index:100;
-}
-.tilebar {
- position: relative;
- left: 0px;
- top: 0px;
- right: 0px;
- bottom: 0px;
- align:right;
- color:#fff;
- background:#1D1D1D;
- width:21474836.47em;
- height:400px;
- display:block;
- z-index:9999999;
-}
-.tile:hover {
- outline: 3px #4A4A4A solid;
-}
-.onhoverbg:hover {
- background: #9F6F40;
-}
-.topleft {
- display: inline;
- position: relative;
-}
-.topright .hover {
- display: none;
- position: absolute;
- left:0;
- z-index: 2000;
- height:200px;
-}
- </style>
- <script>
-var openDiv, $;
-function toggleDiv(divID) {
- $("#" + divID).fadeToggle(150, function() {
- openDiv = $(this).is(':visible') ? divID : null;
- });
-}
-$(document).click(function(e) {
- if (!$(e.target).closest('#'+openDiv).length) {
- toggleDiv(openDiv);
- }
-});
-$(function () {
- $('.usermenu > div').toggleClass('no-js js');
- $('.usermenu .js div').hide();
- $('.usermenu .js').click(function(e) {
- $('.usermenu .js div').fadeToggle(150);
- $('.usermenu').toggleClass('active');
- e.stopPropagation();
- });
- $(document).click(function() {
- if ($('.usermenu .js div').is(':visible')) {
- $('.usermenu .js div', this).fadeOut(150);
- $('.usermenu').removeClass('active');
- }
- });
-});
-$(function () {
- $('.actionmenu > div').toggleClass('no-js js');
- $('.actionmenu .js div').hide();
- $('.actionmenu .js').click(function(e) {
- $('.actionmenu .js div').fadeToggle(150);
- $('.clicker').toggleClass('active');
- e.stopPropagation();
- });
- $(document).click(function() {
- if ($('.actionmenu .js div').is(':visible')) {
- $('.actionmenu .js div', this).fadeOut(150);
- $('.clicker').removeClass('active');
- }
- });
-});
- </script>
-<script src="<?php echo htmlspecialchars( $this->getSkin()->getSkinStylePath(
'overthrow.js' ) ) ?>"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="mw-page-base" class="noprint"></div>
<div id="mw-head-base" class="noprint"></div>
<div id="content" class="mw-body" class="overthrow" role="main">
@@ -378,17 +257,21 @@
<h2><?php $this->msg( 'navigation-heading' ) ?></h2>
<div id="mw-head">
- <div class="vectorMenu"
style="float:right;background-image:none;vertical-align:middle;height:40px;padding-left:10px;padding-right:10px;position:relative;top:0px;right:10px;width:auto;text-align:right;">
-<a href="#" style="text-decoration:none;"><span id="username-top"><?php
+ <div class="vectorMenu" id="usermenu">
+ <div class="no-js">
+<a href="#" style="text-decoration:none;"><span id="username-top"><span
id="username-text"><?php
if ($_SERVER["REMOTE_ADDR"] ==
htmlspecialchars($this->getSkin()->getUser()->getName())) {
echo wfMessage( 'metrolook-guest' )->text();
}
else {
echo htmlspecialchars( $this->getSkin()->getUser()->getName() );
}
- ?><span style="word-spacing:4px;"> </span><img class="custom4"
style="position:relative;top:0.4em;" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>"
/></span></a>
+ ?></span><span style="word-spacing:4px;"> </span><span id="userIcon20"><img
class="userIcon20" style="position:relative;top:0.3em;" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" /></span>
+<span style="word-spacing:4px;"> </span><span id="userIcon40"><img
class="userIcon40" style="position:relative;top:0.4em;" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" />
+</span></span></a>
<div class="menu"
style="position:absolute;top:40px;right:0px;margin:0;width:200px;">
<?php $this->renderNavigation( 'PERSONAL' ); ?>
+</div>
</div>
</div>
<div id="echoNotifications">
@@ -398,14 +281,26 @@
?>
</ul>
</div>
-<?php if ( $logo ): ?><div style="padding-left:10px;"><div class="lighthover"
style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><img alt="<?php echo
$this->text('sitename'); ?>" src="<?php echo $this->text('logopath') ?>"
style="max-width: 65px;height:auto; max-height:36px; display: inline-block;
vertical-align:middle; padding-right:5px;
padding-left:5px;"></div></h4></a><?php else: ?><div
style="padding-left:10px;"><div class="lighthover"
style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><div class="title-name"
style="font-size: 0.9em;
padding-left:0.4em;padding-right:0.4em;color:white;max-width: auto;height:auto;
max-height:700px; display: inline-block; vertical-align:middle;"><?php echo
$GLOBALS['wgSitename'] ?></div></a></h4></div><?php endif; ?><?php if ( $Line
): ?><img class="custom2" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>"
style="float:left;" /><?php else: ?><?php endif; ?><?php if ( $DownArrow ):
?><img class="custom3" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>"
style="height:60px;width:27px;cursor:pointer;"
onclick="toggleDiv('bartile');"/><?php else: ?><?php endif; ?></div></div>
-<?php if ( $DownArrow ): ?>
+
+<div id="hamburgerIcon"><img class="hamburger" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" height="40px" width="40px"></img></div>
+<?php if ( $wgLogoImage ): ?><div style="padding-left:10px;"><div
class="lighthover" style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><img alt="<?php echo
$this->text('sitename'); ?>" src="<?php echo $this->text('logopath') ?>"
style="max-width: 65px;height:auto; max-height:36px; display: inline-block;
vertical-align:middle; padding-right:5px;
padding-left:5px;"/></a></h4></div></div></div><?php else: ?><div
style="padding-left:10px;"><div id="siteLogoBar" class="lighthover"
style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><div class="title-name"
style="font-size: 0.9em;
padding-left:0.4em;padding-right:0.4em;color:white;max-width: auto;height:auto;
max-height:700px; display: inline-block; vertical-align:middle;"><?php echo
$GLOBALS['wgSitename'] ?></div></a></h4></div><?php endif; ?><?php if ( $wgLine
): ?><img class="custom2" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>"
style="float:left;" /><?php else: ?><?php endif; ?><?php if ( $wgDownArrow ):
?><img class="custom3" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>"
style="height:60px;width:27px;cursor:pointer;" /><?php else: ?><?php endif;
?></div></div>
+
+<?php if ( $wgDownArrow ): ?>
<div id="top-tile-bar" class="fixed-position">
<div style="vertical-align:top;align:left;">
<div class="topleft">
<div style="align:left;display:none;height:200px;" class="tilebar"
id="bartile"><div style="height:200px;display:table;"><div
style="vertical-align:middle;display:table-cell;padding-left:36px;">
-<div style="float:left;padding:5px;"><div class="tile"><?php if ( $link1 ):
?><a href="http://www.pidgi.net/wiki/";><?php else: ?><a href="<?php echo
$GLOBALS['$url1'] ?>"><?php endif; ?><?php if ( $image1 ): ?><img
src="http://images.pidgi.net/pidgiwikitiletop.png"; /><?php else: ?><img
src="<?php echo $GLOBALS['$picture1'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link2 ): ?><a
href="http://www.pidgi.net/press/";><?php else: ?><a href="<?php echo
$GLOBALS['$url2'] ?>"><?php endif; ?><?php if ( $image2 ): ?><img
src="http://images.pidgi.net/pidgipresstiletop.png"; /><?php else: ?><img
src="<?php echo $GLOBALS['$picture2'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link3 ): ?><a
href="http://www.pidgi.net/jcc/";><?php else: ?><a href="<?php echo
$GLOBALS['$url3'] ?>"><?php endif; ?><?php if ( $image3 ): ?><img
src="http://images.pidgi.net/jcctiletop.png"; /><?php else: ?><img src="<?php
echo $GLOBALS['$picture3'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link4 ): ?><a
href="http://www.petalburgwoods.com/";><?php else: ?><a href="<?php echo
$GLOBALS['$url4'] ?>"><?php endif; ?><?php if ( $image4 ): ?><img
src="http://images.pidgi.net/pwntiletop.png"; /><?php else: ?><img src="<?php
echo $GLOBALS['$picture4'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link5 ): ?><a
href="<?php echo $GLOBALS['$url5'] ?>"><?php else: ?><?php endif; ?><?php if (
$image5 ): ?><img src="<?php echo $GLOBALS['$picture5'] ?>" /><?php else:
?><?php endif; ?></a></div></div><div style="float:left;padding:5px;"><div
class="tile"><?php if ( $link6 ): ?><a href="<?php echo $GLOBALS['$url6']
?>"><?php else: ?><?php endif; ?><?php if ( $image6 ): ?><img src="<?php echo
$GLOBALS['$picture6'] ?>" /><?php else: ?><?php endif; ?></a></div></div>
+
+<?php if ( $wgBartile ): ?>
+
+<?php if ( $wgTile1 ): ?><div style="float:left;padding:5px;"><div
class="tile"><a href="http://www.pidgi.net/wiki/";><img
src="http://images.pidgi.net/pidgiwikitiletop.png"; /></a></div></div><?php
else: ?><?php endif; ?><?php if ( $wgTile2 ): ?><div
style="float:left;padding:5px;"><div class="tile"><a
href="http://www.pidgi.net/press/";><img
src="http://images.pidgi.net/pidgipresstiletop.png"; /></a></div></div><?php
else: ?><?php endif; ?><?php if ( $wgTile3 ): ?><div
style="float:left;padding:5px;" id="jcctile"><div class="tile"><a
href="http://www.pidgi.net/jcc/";><img
src="http://images.pidgi.net/jcctiletop.png"; /></a></div></div><?php else:
?><?php endif; ?><?php if ( $wgTile4 ): ?><div
style="float:left;padding:5px;"><div class="tile"><a
href="http://www.petalburgwoods.com/";><img
src="http://images.pidgi.net/pwntiletop.png"; /></a></div></div><?php else:
?><?php endif; ?>
+
+<?php else: ?>
+
+<?php if ( $wgTile5 ): ?><div style="float:left;padding:5px;"><div
class="tile"><a href="<?php echo $GLOBALS['$wgURL1'] ?>"><img src="<?php echo
$GLOBALS['$wgImage1'] ?>" /></a></div></div><?php else: ?><?php endif; ?><?php
if ( $wgTile6 ): ?><div style="float:left;padding:5px;"><div class="tile"><a
href="<?php echo $GLOBALS['$wgURL2'] ?>"><img src="<?php echo
$GLOBALS['$wgImage2'] ?>" /></a></div></div><?php else: ?><?php endif; ?><?php
if ( $wgTile7 ): ?><div style="float:left;padding:5px;" id="jcctile"><div
class="tile"><a href="<?php echo $GLOBALS['$wgURL3'] ?>"><img src="<?php echo
$GLOBALS['$wgImage4'] ?>" /></a></div></div><?php else: ?><?php endif; ?><?php
if ( $wgTile8 ): ?><div style="float:left;padding:5px;"><div class="tile"><a
href="<?php echo $GLOBALS['$wgURL4'] ?>"><img src="<?php echo
$GLOBALS['$wgImage4'] ?>" /></a></div></div><?php else: ?><?php endif; ?><?php
if ( $wgTile9 ): ?><div style="float:left;padding:5px;"><div class="tile"><a
href="<?php echo $GLOBALS['$wgURL5'] ?>"><img src="<?php echo
$GLOBALS['$wgImage5'] ?>" /></a></div></div><?php else: ?><?php endif; ?><?php
if ( $wgTile10 ): ?><div style="float:left;padding:5px;"><div class="tile"><a
href="<?php echo $GLOBALS['$wgURL6'] ?>"><img src="<?php echo
$GLOBALS['$wgImage6'] ?>" /></a></div></div><?php else: ?><?php endif; ?>
+
+<?php endif; ?>
</div></div></div>
</div>
@@ -414,21 +309,29 @@
<?php else: ?>
<?php endif; ?>
<div id="left-navigation">
- <?php if ( $UploadButton ): ?><a href="<?php
echo $this->data['nav_urls']['upload']['href']; ?>"><div class="onhoverbg"
style="padding-left:0.8em;padding-right:0.8em;float:left;height:40px;font-size:10pt;"><img
class="custom" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>" /> <span
style="color:#fff;position:relative;top:3px; "><?php $this->msg('uploadbtn')
?></span></div></a><?php else: ?><?php endif; ?><?php $this->renderNavigation(
array( 'NAMESPACES', 'VARIANTS', 'VIEWS', 'ACTIONS' ) ); ?>
+ <?php if ( $wgUploadButton ): ?><a href="<?php
echo $this->data['nav_urls']['upload']['href']; ?>"><div class="onhoverbg"
style="padding-left:0.8em;padding-right:0.8em;float:left;height:40px;font-size:10pt;"><img
class="custom" src="<?php echo htmlspecialchars(
$this->getSkin()->getSkinStylePath( 'images/Transparent.gif' ) ) ?>" /> <span
style="color:#fff;position:relative;top:3px; "><?php $this->msg('uploadbtn')
?></span></div></a><?php else: ?><?php endif; ?><?php $this->renderNavigation(
array( 'NAMESPACES', 'VARIANTS', 'VIEWS', 'ACTIONS' ) ); ?>
</div>
- <div id="right-navigation">
- <?php if ( $SearchBar ): ?>
- <?php $this->renderNavigation( array( 'SEARCH'
) ); ?>
+
+ <div id="editbutton"><img class="editbutton"
src="<?php echo htmlspecialchars( $this->getSkin()->getSkinStylePath(
'images/Transparent.gif' ) ) ?>" ></img></div>
+ <?php if ( $wgSearchBar ): ?>
+ <img class="searchbar" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" ></img>
<?php else: ?>
- <?php endif; ?>
+ <?php endif; ?>
+
+ <div id="right-navigation">
+ <?php if ( $wgSearchBar ): ?>
+ <?php $this->renderNavigation( array( 'SEARCH'
) ); ?>
+
+ <?php else: ?>
+ <?php endif; ?>
</div>
</div>
- <?php if ( $SearchBar ): ?>
+ <?php if ( $wgSearchBar ): ?>
<div id="mw-panel">
<?php else: ?>
<div id="mw-panel-custom">
<?php endif; ?>
- <?php if ( $SearchBar ): ?>
+ <?php if ( $wgSearchBar ): ?>
<?php $this->renderPortals(
$this->data['sidebar'] ); ?>
<?php else: ?>
<?php $this->renderNavigation( array( 'SEARCH'
) ); ?>
@@ -494,14 +397,14 @@
* @param null|string|array $hook
*/
protected function renderPortal( $name, $content, $msg = null, $hook =
null ) {
- global $SearchBar;
+ global $wgSearchBar;
if ( $msg === null ) {
$msg = $name;
}
$msgObj = wfMessage( $msg );
?>
- <?php if ( $SearchBar ): ?>
+ <?php if ( $wgSearchBar ): ?>
<div class="portal" role="navigation" id='<?php
echo Sanitizer::escapeId( "p-$name" )
?>'<?php
@@ -522,7 +425,7 @@
echo htmlspecialchars( $msgObj->exists() ?
$msgObj->text() : $msg );
?></h5>
- <?php if ( $SearchBar ): ?>
+ <?php if ( $wgSearchBar ): ?>
<div class="body">
<?php else: ?>
<div class="body-custom">
@@ -564,7 +467,7 @@
* @param array $elements
*/
protected function renderNavigation( $elements ) {
- global $SearchBar;
+ global $wgSearchBar;
// If only one element was given, wrap it in an array, allowing
more
// flexible arguments
@@ -669,7 +572,10 @@
?>><span><a
href="<?php
echo htmlspecialchars( $link['href'] )
?>" <?php
-
echo $link['key']
+
echo $link['key'];
+
if ( isset ( $link['rel'] ) ) {
+
echo ' rel="' . htmlspecialchars( $link['rel'] ) . '"';
+
}
?>><?php
// $link['text'] can be undefined - bug 27764
if ( array_key_exists( 'text', $link ) ) {
@@ -687,7 +593,7 @@
break;
case 'ACTIONS':
?>
- <div id="p-cactions" role="navigation"
class="vectorMenu<?php
+ <div id="p-cactions" role="navigation"
class="vectorMenu actionmenu<?php
if ( count( $this->data['action_urls']
) == 0 ) {
echo ' emptyPortlet';
}
@@ -736,7 +642,7 @@
break;
case 'SEARCH':
?>
- <?php if ( $SearchBar ): ?>
+ <?php if ( $wgSearchBar ): ?>
<div id="p-search" role="search">
<h5<?php $this->html(
'userlangattributes' ) ?>>
<label
for="searchInput"><?php $this->msg( 'search' ) ?></label>
diff --git a/README.md b/README.md
index 7b2d7ad..c0a6a0b 100644
--- a/README.md
+++ b/README.md
@@ -44,15 +44,29 @@
1.25 only
-|Setting|Default|To Enable|
-|-------|-------|---------|
-|logo| `false` | `$logo = true;`|
-|SearchBar| `false` | `$SearchBar = true;`|
-|DownArrow| `false` | `$DownArrow = true;`|
-|Line| `false` | `$Line = true;`|
-|UploadButton| `false` | `$UploadButton = true;`|
-|`$linkN`, `$imageN`<br>Where `N` is between 1 to 6. | `true` | `$link1 =
false;`<br>`$image1 = false;`<br>`$url1 = link of website;`<br>`$picture1 =
image link;`|
+|Setting|Default|To Enable|To Disable|
+|-------|-------|---------|----------|
+|wgLogoImage| `false` | `$wgLogoImage = true;`| `$wgLogoImage = false;`|
+|wgSearchBar| `true` | `$wgSearchBar = true;`| `$wgSearchBar = false;`|
+|wgDownArrow| `true` | `$wgDownArrow = true;`| `$wgDownArrow = false;`|
+|wgLine| `true` | `$wgLine = true;`| `$wgLine = false;`|
+|wgUploadButton| `true` | `$wgUploadButton = true;`| `$wgUploadButton =
false;`|
+|wgBartile| `true` | `$wgBartile = true;`| `$wgBartile = false;`|
+|`$wgTileN`<br>Where `N` is between 1 to 4. | `true` | `$wgTile1 = true;`|
`$wgTile1 = false;` |
+|`$wgTileN`<br>Where `N` is between 5 to 10. | | `$wgTile5 = true;`| `$wgTile5
= false;` |
+|`$wgURLN`, `$imageN`<br>Where `N` is between 1 to 6. | | `$wgURL1 = link of
website;`<br>`$wgImage1 = image link;`| |
+
+$wgBartile is now used to disable the default tiles or enable them so you can
have the default tiles or set your self one.
+
+$link and $picture were removed in favour of using $wgBartile and $wgURL1 and
$wgImage1
+
+$logo was removed in favour of $wgLogoImage
+
+
+Note: Tile 5 to 10 is for when you disable bartile.
+
+Note: Image setting should be set like this for example $wgImage1 =
file/to/image or can be set like http://example.com/image.png;
## Customizing top bar color
@@ -62,6 +76,8 @@
```css
/* Top Bar colour and hover colour start */
+
+@import "mediawiki.mixins";
#mw-page-base {
height: 2.5em;
@@ -73,6 +89,18 @@
min-width: auto;
}
+@media (max-width:768px) {
+#mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ 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');
+ min-width: 24em;
+}
+}
+
@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : portrait) {
#mw-page-base {
height: 2.5em;
@@ -81,7 +109,7 @@
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');
- min-width:65em;
+ min-width: 25em;
}
}
@@ -93,7 +121,7 @@
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');
- min-width:65em;
+ min-width: 67.800em;
}
}
@@ -123,22 +151,32 @@
background-repeat: no-repeat;
.transition(background-position 250ms);
}
+
div.vectorMenu:hover {
background-color: blue;
}
div.vectorMenu ul {
- position: absolute;
- background-color: white;
border: solid 2px dodgerBlue;
- border-top-width: 0;
- list-style-type: none;
- list-style-image: none;
- padding: 0;
- padding-top:5px;
- margin: 0;
- margin-left: -6px;
- text-align: left;
+
+}
+
+@media (max-width: 768px) {
+#hamburgerIcon:hover {
+ background-color: blue;
+}
+
+img.editbutton:hover {
+ background-color:blue;
+}
+
+div.actionmenu ul {
+ border-top: solid 2px dodgerBlue;
+}
+
+#left-navigation {
+ background-color: dodgerBlue;
+}
}
/* Top Bar colour and hover colour end */
@@ -146,7 +184,7 @@
## Known Issues
-* Mobile view of desktop is not shown correctly.
+* When in portrait and you go to landscape the search bar will go out of place
on the ipad. If you refresh in landscape then go into portrait it wont cause
problems.
## Support coming soon
diff --git a/SkinMetrolook.php b/SkinMetrolook.php
index a62fd9f..fd804cf 100644
--- a/SkinMetrolook.php
+++ b/SkinMetrolook.php
@@ -56,7 +56,7 @@
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
- $out->addModules( array( 'skins.metrolook.js',
'skins.metrolook.collapsibleNav', ) );
+ $out->addModules( array( 'skins.metrolook.js',
'skins.metrolook.collapsibleNav' ) );
}
/**
diff --git a/components/common.less b/components/common.less
index bdaa1a9..0b965e0 100644
--- a/components/common.less
+++ b/components/common.less
@@ -26,6 +26,57 @@
background-color: #f3f3f3;
}
+body {
+ height:100%;
+}
+html {
+ height:100%;
+}
+html,
+body {
+ margin: 0px 0px 0px 0px;
+ padding: 0px 0px 0px 0px;
+ height:100%;
+}
+#top-tile-bar {
+ background:transparent;
+ left: 0px;
+ height: 200px;
+ position: fixed;
+ z-index:100;
+}
+.tilebar {
+ position: relative;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ align:right;
+ color:#fff;
+ background:#1D1D1D;
+ width:21474836.47em;
+ height:200px;
+ display:block;
+ z-index:9999999;
+}
+.tile:hover {
+ outline: 3px #4A4A4A solid;
+}
+.onhoverbg:hover {
+ background: #9F6F40;
+}
+.topleft {
+ display: inline;
+ position: relative;
+}
+.topright .hover {
+ display: none;
+ position: absolute;
+ left:0;
+ z-index: 2000;
+ height:200px;
+}
+
/* Content */
.mw-body {
margin-left: 10em;
@@ -37,7 +88,7 @@
background-color: white;
color: black;
direction: ltr;
- height: auto;
+ height: auto;
position: absolute;
bottom: 0;
right: 0;
@@ -125,108 +176,6 @@
}
}
-/* Content */
-/* different screen sizes */
-@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) {
-.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: absolute;
- bottom: 0;
- right: -60px;
- 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;
- }
-
- 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.17em;
- }
-
- 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;
- }
-}
-}
-
img.custom {
position:inherit;
.background-image-svg('images/uploadlogo.svg', 'images/uploadlogo.png');
@@ -253,7 +202,7 @@
margin:-26px; /* If you want no margin */
padding:0; /*if your want to padding */
background-repeat: no-repeat;
- background-position: -0px 20px
+ background-position: -0px 20px;
}
img.custom3:hover {
position:inherit;
@@ -264,13 +213,11 @@
background-repeat: no-repeat;
background-position: -0px 20px;
}
-img.custom4 {
- .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
- width:26px; /*width of your image*/
- height:35px; /*height of your image*/
- margin:0; /* If you want no margin */
- padding:0; /*if your want to padding */
- background-repeat: no-repeat;
+
+#hamburgerIcon {
+ position:fixed;
+ top:40px;
+ z-index:0;
}
/* Hide empty portlets */
@@ -280,7 +227,7 @@
ul {
list-style-type: disc;
- .list-style-image('images/bullet-icon.png');
+ .list-style-image-svg('images/bullet-icon.svg',
'images/bullet-icon.png');
}
pre, .mw-code {
diff --git a/components/mobile.less b/components/mobile.less
new file mode 100644
index 0000000..67849fb
--- /dev/null
+++ b/components/mobile.less
@@ -0,0 +1,486 @@
+@import "mediawiki.mixins";
+
+/* different screen sizes */
+
+@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) {
+
+.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: absolute;
+ bottom: 0;
+ right: -60px;
+ 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;
+ }
+
+ 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.17em;
+ }
+
+ 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: absolute;
+ top: 0;
+ min-width:106%;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+}
+
+@media only screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait) {
+
+#echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: 30px;
+ margin-left: 1em;
+}
+
+.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: absolute;
+ bottom: 0;
+ right: -60;
+ 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;
+ }
+
+ 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.17em;
+ }
+
+ 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: absolute;
+ top: 0;
+ min-width:92.750%;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+#p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 0.5em;
+ margin-left: 0.5em;
+ margin-top: 0;
+ padding-right: 4em;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+}
+
+}
+
+@media (max-width: 768px) {
+
+div#mw-head {
+ position: absolute;
+ top: 0;
+ min-width: 97%;
+
+ h5 {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+img.hamburger {
+ .background-image-svg('images/hamburger.svg', 'images/hamburger.png');
+ width: 26px; /*width of your image*/
+ height: 35px; /*height of your image*/
+ margin: 0; /* If you want no margin */
+ padding: 0; /*if your want to padding */
+ background-repeat: no-repeat;
+}
+
+img.searchbar {
+ .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+ width: 26px; /*width of your image*/
+ height: 35px; /*height of your image*/
+ background-repeat: no-repeat;
+ margin-right: -3.5em;
+ margin-top: 1em;
+ float: right;
+}
+
+
+img.editbutton {
+ .background-image-svg('images/edit-icon.svg', 'images/edit-icon.png');
+ width: 36px; /*width of your image*/
+ height: 35px; /*height of your image*/
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin: 8px;
+ margin-left: -1em;
+ margin-top:-0;
+}
+
+img.editbutton:hover {
+ cursor: pointer;
+ display: block;
+ float: right;
+ margin: 8px;
+ margin-left: -1em;
+ margin-top: -0;
+ background-color: #CF8B54;
+}
+
+.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: #CF8B54;
+ width: 100%;
+ text-align: center;
+}
+
+#echoNotifications {
+ float: right;
+ top: 0.3em;
+ position: relative;
+ margin-right: -7px;
+}
+
+#p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 1em;
+ margin-left: 0.5em;
+ margin-top:0;
+
+ h5 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+}
+
+#username-text {
+ display: none;
+}
+
+#siteLogoBar {
+ float: none;
+ margin: 0 auto;
+}
+
+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;
+}
+
+#hamburgerIcon:hover {
+ background: #9F6F40;
+}
+
+#hamburgerIcon img {
+ padding: 0 10px;
+}
+
+#hamburgerIcon span {
+ display: none;
+}
+
+#userIcon20 {
+ display: none;
+}
+
+#userIcon40 {
+ display: block;
+}
+
+div.actionmenu ul {
+ position: fixed;
+ border: 0;
+ border-top: solid 2px #CF8B54;
+ margin-left: 0;
+ bottom: 40px;
+ right: -1.3em;
+ width: 100vw;
+}
+
+}
+
+@media (max-width: 600px) {
+
+#jcctile {
+ clear: left;
+}
+
+#tilegrouptable {
+ width: 260px;
+ height: 260px;
+ margin:0 auto;
+}
+
+#tilegroup {
+ padding-left: 0px;
+ width: 260px;
+ height: 260px;
+}
+
+#top-tile-bar {
+ height: 330px;
+}
+
+.tilebar {
+ height: 330px;
+}
+
+}
+
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+.full { width: auto; max-width:820px; }
+.reply { width: auto; max-width:750px; }
+.f-message { width: auto; }
+.r-message { width: auto; }
diff --git a/components/navigation.less b/components/navigation.less
index 820423f..99b217a 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -21,30 +21,7 @@
.vertical-gradient(#CF8B54, #CF8B54, 50%, 100%);
min-width: auto;
}
-@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : portrait) {
-#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');
- .vertical-gradient(#CF8B54, #CF8B54, 50%, 100%);
- min-width:65em;
-}
-}
-@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : landscape) {
-#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');
- .vertical-gradient(#CF8B54, #CF8B54, 50%, 100%);
- min-width:65em;
-}
-}
+
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
@@ -64,19 +41,6 @@
margin: 0;
padding: 0;
}
-}
-
-@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) {
- div#mw-head {
- position: absolute;
- top: 0;
- min-width:106%;
-
- h5 {
- margin: 0;
- padding: 0;
- }
-}
}
/* Navigation Containers */
@@ -107,7 +71,6 @@
text-decoration: none;
}
}
-
/* Panel */
div#mw-panel {
@@ -167,16 +130,17 @@
}
}
}
+ }
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body {
- margin-left: 0.5em;
- }
+ /* 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;
}
}
}
@@ -240,16 +204,17 @@
}
}
}
+ }
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body {
- margin-left: 0.5em;
- }
+ /* 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;
}
}
}
@@ -264,7 +229,9 @@
top: 40px;
bottom: 0;
height: auto;
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-right: 1em;
padding-top: 1em;
width: 11em;
left: 0;
@@ -317,16 +284,17 @@
}
}
}
+ }
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body-custom {
- margin-left: 0.5em;
- }
+ /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
+ #p-logo + div.portal-custom {
+ background-image: none;
+ margin-top: 0;
+ h5 {
+ display: none;
+ }
+ div.body-custom {
+ margin-left: 0.5em;
}
}
}
@@ -341,7 +309,9 @@
top: 40px;
bottom: 0;
height: auto;
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-right: 1em;
padding-top: 1em;
width: 11em;
left: 0;
@@ -394,16 +364,17 @@
}
}
}
+ }
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- div.body-custom {
- margin-left: 0.5em;
- }
+ /* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
+ #p-logo + 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/personalMenu.less
index 4e093df..1f3aadd 100644
--- a/components/personalMenu.less
+++ b/components/personalMenu.less
@@ -30,6 +30,7 @@
white-space: nowrap;
}
}
+
#username-top {
color: #fff;
height:40px;
@@ -39,12 +40,59 @@
padding-top:1px;
font-family:sans-serif;
}
+
+#usermenu {
+ float:right;
+ background-image:none;
+ vertical-align:middle;
+ height:40px;
+ padding-left:10px;
+ padding-right:10px;
+ position:relative;
+ top:0px;
+ right:10px;
+ width:auto;
+ text-align:right;
+}
+
+img.userIcon20 {
+ .background-image-svg('images/user-icon-20.svg',
'images/user-icon-20.png');
+ width:20px; /*width of your image*/
+ height:37px; /*height of your image*/
+ margin:0; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+}
+
+img.userIcon40 {
+ margin:0; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+}
+
+#userIcon20 {
+ position:relative;
+ top:2px;
+ background-repeat: no-repeat;
+}
+
+#userIcon40 {
+ position:relative;
+ top:-0.4px;
+ display:none;
+ .background-image-svg('images/user-icon-40.svg',
'images/user-icon-40.png');
+ width:34px; /*width of your image*/
+ height:38px; /*height of your image*/
+ background-repeat: no-repeat;
+}
+
#echoNotifications {
float: right;
top: 0.3em;
position: relative;
margin-right: 20px;
}
+
#echoNotifications ul {
list-style: none;
}
diff --git a/components/search.less b/components/search.less
index e74f86f..15cbf10 100644
--- a/components/search.less
+++ b/components/search.less
@@ -4,6 +4,7 @@
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
+ margin-top: -1.2em;
h5 {
display: none;
@@ -143,7 +144,7 @@
.background-image('images/search-fade.png');
background-position: top left;
background-repeat: repeat-x;
- margin-bottom: 10px;
+ margin-bottom: 10px;
// Styles for both the search input and the button
input {
diff --git a/images/bullet-circle-icon.svg b/images/bullet-circle-icon.svg
index aec3a3e..f3b7272 100644
--- a/images/bullet-circle-icon.svg
+++ b/images/bullet-circle-icon.svg
@@ -1,56 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- version="1.1"
- width="5"
- height="13"
- id="svg2"
- inkscape:version="0.48.5 r10040"
- sodipodi:docname="bullet-icon.svg">
- <metadata
- id="metadata10">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <defs
- id="defs8" />
- <sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1366"
- inkscape:window-height="705"
- id="namedview6"
- showgrid="false"
- inkscape:zoom="18.153846"
- inkscape:cx="-6.0932203"
- inkscape:cy="6.5"
- inkscape:window-x="-8"
- inkscape:window-y="-8"
- inkscape:window-maximized="1"
- inkscape:current-layer="svg2" />
- <path
- d="m4.820297 5.8103962a2.1173267 2.1173267 0 1 1-4.23465347 0 2.1173267
2.1173267 0 1 1 4.23465347 0z"
- transform="matrix(1.1807342,0,0,1.1807342,-0.69148932,2.0972643)"
- fill="#00528c"
- id="path4"
- style="fill:#784000;fill-opacity:1" />
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; version="1.1" width="5" height="13">
+<circle cx="2.5" cy="9.5" r="2.5" fill="784000ff"
style="fill:#784000;fill-opacity:1" />
</svg>
diff --git a/images/edit-icon.png b/images/edit-icon.png
new file mode 100644
index 0000000..815cd4f
--- /dev/null
+++ b/images/edit-icon.png
Binary files differ
diff --git a/images/edit-icon.svg b/images/edit-icon.svg
new file mode 100644
index 0000000..18e9276
--- /dev/null
+++ b/images/edit-icon.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="37.5"
+ height="37.5"
+ viewBox="0 0 744.09449 1052.3622"
+ id="svg3346"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="edit-icon.svg">
+ <defs
+ id="defs3348" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="14.29"
+ inkscape:cx="14.000287"
+ inkscape:cy="18.525418"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata3351">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#cdcdcd"
+ d="M -27.595681,864.08205 C -21.505171,822.58448 6.1067578,754.08397
16.6724,760.90664 l 5.707997,3.68285 60.38308,64.27695 60.382833,64.2746
-36.82723,11.50108 c -20.254807,6.32604 -61.163122,16.76425 -90.907507,23.19474
l -54.080974,11.69368 z m 557.493341,30.43048 -52.61778,-52.61806 0,-62.55039
0,-62.55038 -40.70896,-33.78613 -40.7092,-33.7838 L 284.4996,758.51638
173.13769,867.81133 101.78035,796.45413 30.422985,725.09461 140.21092,613.23074
249.99839,501.36453 201.70821,448.00387 153.41804,394.6455 l -69.587283,0
-69.587056,0 -31.570672,-31.57223 -31.57066,-31.56992 0,-64.5879 0,-64.58791
52.1240328,47.17155 52.1244932,47.17154 38.982358,-32.35197 38.982377,-32.35196
-41.514918,-63.3603 -41.514675,-63.3603 53.764363,0 53.7646,0 41.34239,41.34444
41.34262,41.34211 0,59.81437 0,59.81666 53.35967,48.2901 53.36011,48.29009
111.8656,-109.78924 111.86558,-109.7869 71.35736,71.35718 71.35715,71.3572
-109.29376,111.36263 -109.29349,111.36261 33.78547,40.70859 33.78544,40.70858
62.5509,0 62.55092,0 52.61755,52.61806 52.61779,52.61808 0,52.61807 0,52.61574
-3.38387,21.30355 c 0,0 -45.74377,-49.43988 -67.09826,-67.86713 C
674.2583,753.69847 674.2583,753.69847 674.2583,753.69847 l -71.81576,90.15229
46.73151,51.63645 46.7319,51.63877 -56.6954,0 -56.69512,0 z m
-148.14867,-279.8755 -22.85905,-22.6749 -85.50409,77.27016 c -38.98189,35.22955
-88.94872,82.56587 -85.50361,85.50378 35.33999,30.14272 4.12293,59.08336
193.86675,-140.09904 z m -44.76437,-48.68922 -30.71245,-26.60376
-85.50408,77.27016 c -34.26649,30.96887 -88.73782,82.33614 -85.50362,85.50379
30.55403,29.9362 -8.22321,55.42372 201.72015,-136.17019 z m
309.81642,-224.21509 -26.7859,-28.56702 -83.54041,92.97854 c -23.17378,25.79155
-88.5808,82.18298 -85.50385,85.50379 33.37682,36.0325 9.79854,43.19165
195.83016,-149.91531 z m -52.61776,-50.65483 -24.82224,-24.6405
-85.50407,87.08878 c -44.40708,45.22918 -89.0091,82.63781 -85.50363,85.50379
39.26682,32.10599 11.77978,41.23073 195.82994,-147.95207 z m 67.98302,-66.66951
-61.06531,-65.00097 34.24059,-41.25857 34.24055,-41.256238 74.3756,71.255078
74.37528,71.25742 -29.04923,35.00212 C 749.02973,302.9108 732.17954,298.93325
662.1663,224.40838 Z"
+ id="path10930"
+ inkscape:connector-curvature="0"
+
sodipodi:nodetypes="sscccsscscccccccccccccccccccccccccccccccccccccccccccccccccscccccccccsscccsscccsscccsscscccccss"
/>
+ </g>
+</svg>
diff --git a/images/hamburger.png b/images/hamburger.png
new file mode 100644
index 0000000..050c0c6
--- /dev/null
+++ b/images/hamburger.png
Binary files differ
diff --git a/images/hamburger.svg b/images/hamburger.svg
new file mode 100644
index 0000000..59a03b5
--- /dev/null
+++ b/images/hamburger.svg
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="37.5"
+ height="37.5"
+ viewBox="0 0 744.09449 1052.3622"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="hamburger.svg">
+ <defs
+ id="defs4">
+ <pattern
+ y="0"
+ x="0"
+ height="6"
+ width="6"
+ patternUnits="userSpaceOnUse"
+ id="EMFhbasepattern" />
+ <pattern
+ y="0"
+ x="0"
+ height="6"
+ width="6"
+ patternUnits="userSpaceOnUse"
+ id="EMFhbasepattern-5" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="6.29"
+ inkscape:cx="14.920665"
+ inkscape:cy="32.343871"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <image
+ width="1052.3622"
+ height="1052.3622"
+ preserveAspectRatio="none"
+ style="fill:#ffffff;image-rendering:optimizeQuality"
+
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41
LjExR/NCNwAAALRJREFUWEftlLEJw0AQBL8LgftR6A4UuwE14FgduBMV4TrUxmsxxwWCP3gWjpfZ
gUk2uYmu1FrLqPzaFEigQBYFstw7EPsEH4lOdtrBFgYeMJPDTjvYFNjD/wXu8JvobqcdbO3AEVAg
SxiIfYXvRFc77WALA/VmLiiQpTtwga9EFzvtYGsHjoACWcJA7Bv8JLrZaQdbGKg3c0GBLN2BM3wm
OttpB1s7cAQUyKJAFgWy3CCwlhPwsK1XMCV7cQAAAABJRU5ErkJggg== "
+ id="image3344-3"
+ x="-907.15137"
+ y="-8.3729545e-005"
+ transform="scale(-1,1)" />
+ <rect
+ style="fill:#ffffff"
+ id="rect6720"
+ width="777.67285"
+ height="151.21416"
+ x="-3.6440258"
+ y="210.24545" />
+ <rect
+ style="fill:#ffffff"
+ id="rect6722"
+ width="777.67273"
+ height="154.97009"
+ x="-3.6440163"
+ y="448.57333" />
+ <rect
+ style="fill:#ffffff"
+ id="rect6724"
+ width="777.67285"
+ height="149.07863"
+ x="0.81750679"
+ y="681.73407" />
+ </g>
+</svg>
diff --git a/images/user-icon-20.png b/images/user-icon-20.png
new file mode 100644
index 0000000..b3e94dc
--- /dev/null
+++ b/images/user-icon-20.png
Binary files differ
diff --git a/images/user-icon-20.svg b/images/user-icon-20.svg
new file mode 100644
index 0000000..ea22b33
--- /dev/null
+++ b/images/user-icon-20.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="20.129"
+ height="21.445"
+ viewBox="0 0 744.09449 1052.3622"
+ id="svg3396"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="user-icon-20.svg">
+ <defs
+ id="defs3398" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="12.59"
+ inkscape:cx="11.114972"
+ inkscape:cy="7.5505425"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata3401">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <g
+ id="g6066"
+ transform="matrix(63.919959,0,0,64.5868,-23484.589,-25520.824)">
+ <g
+ id="g6068">
+ <path
+ d="m 380.4,410.3 c -0.3,0.5 0.7,0.47316 -0.7,0.37316 -1.1,0
0.83461,0.60676 -0.26539,0.60676 -4.6,-0.1 -8.95318,0.0734 -13.55318,-0.0266
6.46934,-18.04804 -5.54394,-7.38971 4.31857,-8.15328 1.8,0.7 3.6,1.2 5.4,0
2.5,0 3.2,1.9 3.9,3.8 0.3,1 -0.1,2.4 0.9,3.4 z"
+ id="path6070"
+ inkscape:connector-curvature="0"
+ style="fill:#fdfdfd;fill-opacity:1"
+ sodipodi:nodetypes="ccccccccc" />
+ <path
+ d="m 380.36825,411.44505 c -1.07902,0.1 -0.62093,0.17058
-1.2367,-1.71886 -0.5,-1.9 -1.53155,-6.02619 -3.93155,-5.92619 -0.3,-0.2
-0.5,-0.5 -0.6,-0.8 -0.1,-0.6 -0.1,-1.2 -0.1,-1.8 0,-1.2 -0.4,-2.3 -1.8,-2.3
-1.8,0 -1.7,1.4 -1.6,2.6 0,0.5 0.1,1 0.1,1.5 -0.1,0.3 -0.3,0.6 -0.5,0.9 -4.6,0
-3.28255,8.93946 -5.2,7.4 l 0,-16.07336 c 4.4133,0 9.15789,-0.0656 13.5,-0.0867
2.0007,0 2.39603,-0.163 1.95343,1.76038 0.0358,4.73579 0.12053,10.37183
0.10866,14.54505 z"
+ id="path6072"
+ inkscape:connector-curvature="0"
+ style="fill:#474747"
+ sodipodi:nodetypes="ccccssccccccccc" />
+ <path
+ d="m 370.6,403.7 c 0,-0.3 0,-0.7 0.1,-1 1.5,-0.4 2.9,-0.3 4.4,-0.1
0,0.4 0.1,0.7 0.1,1.1 -1.5,1.7 -3,1.7 -4.6,0 z"
+ id="path6074"
+ style="fill:#474747;fill-opacity:1"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 375.1,402.6 c -1.4,1.1 -2.9,1 -4.4,0.1 -1,-1.7 -1.3,-3.5
0.4,-4.9 0.9,-0.8 2.2,-0.7 3.1,0 1.7,1.2 1.7,3 0.9,4.8 z"
+ id="path6076"
+ style="fill:#fdfdfd;fill-opacity:1"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/images/user-icon-40.png b/images/user-icon-40.png
new file mode 100644
index 0000000..1ec9dc3
--- /dev/null
+++ b/images/user-icon-40.png
Binary files differ
diff --git a/images/user-icon-40.svg b/images/user-icon-40.svg
new file mode 100644
index 0000000..a528421
--- /dev/null
+++ b/images/user-icon-40.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="37.5"
+ height="37.5"
+ viewBox="0 0 744.09449 1052.3622"
+ id="svg3348"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="user-icon-40.svg">
+ <defs
+ id="defs3350" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="6.29"
+ inkscape:cx="14.557547"
+ inkscape:cy="31.576571"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata3353">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <g
+ id="g6066"
+ transform="matrix(69.17894,0,0,64.950357,-25439.036,-25664.465)">
+ <g
+ id="g6068">
+ <path
+ d="m 380.4,410.3 c -0.3,0.5 0.7,0.47316 -0.7,0.37316 -1.1,0
0.83461,0.60676 -0.26539,0.60676 -4.6,-0.1 -8.95318,0.0734 -13.55318,-0.0266
6.46934,-18.04804 -5.54394,-7.38971 4.31857,-8.15328 1.8,0.7 3.6,1.2 5.4,0
2.5,0 3.2,1.9 3.9,3.8 0.3,1 -0.1,2.4 0.9,3.4 z"
+ id="path6070"
+ inkscape:connector-curvature="0"
+ style="fill:#fdfdfd;fill-opacity:1"
+ sodipodi:nodetypes="ccccccccc" />
+ <path
+ d="m 380.55119,411.3847 c -1.07902,0.1 -0.80387,0.23093
-1.41964,-1.65851 -0.5,-1.9 -1.53155,-6.02619 -3.93155,-5.92619 -0.3,-0.2
-0.5,-0.5 -0.6,-0.8 -0.1,-0.6 -0.1,-1.2 -0.1,-1.8 0,-1.2 -0.4,-2.3 -1.8,-2.3
-1.8,0 -1.7,1.4 -1.6,2.6 0,0.5 0.1,1 0.1,1.5 -0.1,0.3 -0.3,0.6 -0.5,0.9 -4.6,0
-2.79472,8.09457 -5.2,7.4 l 0,-16.07336 c 4.4133,0 9.15789,-0.0656 13.5,-0.0867
1.3867,0 2.20478,-0.12869 1.75797,1.69135 0.04,4.53738 0.0111,10.19078
-0.0133,14.4847 z"
+ id="path6072"
+ inkscape:connector-curvature="0"
+ style="fill:#474747"
+ sodipodi:nodetypes="ccccssccccccccc" />
+ <path
+ d="m 370.6,403.7 c 0,-0.3 0,-0.7 0.1,-1 1.5,-0.4 2.9,-0.3 4.4,-0.1
0,0.4 0.1,0.7 0.1,1.1 -1.5,1.7 -3,1.7 -4.6,0 z"
+ id="path6074"
+ style="fill:#474747;fill-opacity:1"
+ inkscape:connector-curvature="0" />
+ <path
+ d="m 375.1,402.6 c -1.4,1.1 -2.9,1 -4.4,0.1 -1,-1.7 -1.3,-3.5
0.4,-4.9 0.9,-0.8 2.2,-0.7 3.1,0 1.7,1.2 1.7,3 0.9,4.8 z"
+ id="path6076"
+ style="fill:#fdfdfd;fill-opacity:1"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/images/user-icon.png b/images/user-icon.png
deleted file mode 100644
index f20d49f..0000000
--- a/images/user-icon.png
+++ /dev/null
Binary files differ
diff --git a/images/user-icon.svg b/images/user-icon.svg
deleted file mode 100644
index 839dedd..0000000
--- a/images/user-icon.svg
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/";
- xmlns:cc="http://creativecommons.org/ns#";
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
- xmlns:svg="http://www.w3.org/2000/svg";
- xmlns="http://www.w3.org/2000/svg";
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
- version="1.1"
- id="Layer_1"
- x="0px"
- y="0px"
- viewBox="0 0 612 792"
- enable-background="new 0 0 612 792"
- xml:space="preserve"
- inkscape:version="0.48.5 r10040"
- width="24"
- height="22"
- sodipodi:docname="user-icon.svg"><metadata
- id="metadata6082"><rdf:RDF><cc:Work
- rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
- id="defs6080" /><sodipodi:namedview
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1"
- objecttolerance="10"
- gridtolerance="10"
- guidetolerance="10"
- inkscape:pageopacity="0"
- inkscape:pageshadow="2"
- inkscape:window-width="1366"
- inkscape:window-height="705"
- id="namedview6078"
- showgrid="false"
- inkscape:zoom="8.7165024"
- inkscape:cx="5.1804601"
- inkscape:cy="20.029586"
- inkscape:window-x="-8"
- inkscape:window-y="-8"
- inkscape:window-maximized="1"
- inkscape:current-layer="Layer_1" />
-<g
- id="g6066"
- transform="matrix(47.634902,0,0,47.647843,-17387.924,-18829.686)">
- <g
- id="g6068">
- <path
- d="m 380.4,410.3 c -0.3,0.5 0.7,0.47316 -0.7,0.37316 -1.1,0 0.83461,0.60676
-0.26539,0.60676 -4.6,-0.1 -8.95318,0.0734 -13.55318,-0.0266 6.46934,-18.04804
-5.54394,-7.38971 4.31857,-8.15328 1.8,0.7 3.6,1.2 5.4,0 2.5,0 3.2,1.9 3.9,3.8
0.3,1 -0.1,2.4 0.9,3.4 z"
- id="path6070"
- inkscape:connector-curvature="0"
- style="fill:#fdfdfd;fill-opacity:1"
- sodipodi:nodetypes="ccccccccc" />
- <path
- d="m 380.4867,411.24732 c -1.07902,0.1 -0.73938,0.36831 -1.35515,-1.52113
-0.5,-1.9 -1.53155,-6.02619 -3.93155,-5.92619 -0.3,-0.2 -0.5,-0.5 -0.6,-0.8
-0.1,-0.6 -0.1,-1.2 -0.1,-1.8 0,-1.2 -0.4,-2.3 -1.8,-2.3 -1.8,0 -1.7,1.4
-1.6,2.6 0,0.5 0.1,1 0.1,1.5 -0.1,0.3 -0.3,0.6 -0.5,0.9 -4.6,0 -2.79472,8.09457
-5.2,7.4 0,-5.9 0,-11.07336 0,-16.07336 4.4133,0 9.15789,-0.0656 13.5,-0.0867
1.3867,0 1.94681,-0.06 1.5,1.76004 0.23352,4.4 0.33352,9.84732 -0.0133,14.34732
z"
- id="path6072"
- inkscape:connector-curvature="0"
- style="fill:#474747"
- sodipodi:nodetypes="ccccsscccccccc" />
- <path
- d="m 370.6,403.7 c 0,-0.3 0,-0.7 0.1,-1 1.5,-0.4 2.9,-0.3 4.4,-0.1 0,0.4
0.1,0.7 0.1,1.1 -1.5,1.7 -3,1.7 -4.6,0 z"
- id="path6074"
- style="fill:#474747;fill-opacity:1"
- inkscape:connector-curvature="0" />
- <path
- d="m 375.1,402.6 c -1.4,1.1 -2.9,1 -4.4,0.1 -1,-1.7 -1.3,-3.5 0.4,-4.9
0.9,-0.8 2.2,-0.7 3.1,0 1.7,1.2 1.7,3 0.9,4.8 z"
- id="path6076"
- style="fill:#fdfdfd;fill-opacity:1"
- inkscape:connector-curvature="0" />
- </g>
-</g>
-</svg>
\ No newline at end of file
diff --git a/collapsibleNav.js b/js/collapsibleNav.js
similarity index 100%
rename from collapsibleNav.js
rename to js/collapsibleNav.js
diff --git a/collapsibleTabs.js b/js/collapsibleTabs.js
similarity index 100%
rename from collapsibleTabs.js
rename to js/collapsibleTabs.js
diff --git a/js/mediawiki.searchSuggest.custom.js
b/js/mediawiki.searchSuggest.custom.js
new file mode 100644
index 0000000..2438d28
--- /dev/null
+++ b/js/mediawiki.searchSuggest.custom.js
@@ -0,0 +1,198 @@
+/*!
+ * Add search suggestions to the search form.
+ */
+( function ( mw, $ ) {
+ $( function () {
+ var api, map, resultRenderCache, 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' );
+
+ // 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 computeResultRenderCache( context ) {
+ var $form, baseHref, linkParams;
+
+ // Compute common parameters for links' hrefs
+ $form = context.config.$region.closest( 'form' );
+
+ baseHref = $form.attr( 'action' );
+ baseHref += baseHref.indexOf( '?' ) > -1 ? '&' : '?';
+
+ linkParams = $form.serializeObject();
+
+ return {
+ textParam: context.data.$textbox.attr( 'name' ),
+ linkParams: linkParams,
+ baseHref: baseHref
+ };
+ }
+
+ // The function used to render the suggestions.
+ function renderFunction( text, context ) {
+ if ( !resultRenderCache ) {
+ resultRenderCache = computeResultRenderCache(
context );
+ }
+
+ // linkParams object is modified and reused
+ resultRenderCache.linkParams[
resultRenderCache.textParam ] = text;
+
+ // this is the container <div>, jQueryfied
+ this.text( text )
+ .wrap(
+ $( '<a>' )
+ .attr( 'href',
resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
+ .attr( 'title', text )
+ .addClass(
'mw-searchSuggest-link' )
+ );
+ }
+
+ function specialRenderFunction( query, context ) {
+ var $el = this;
+
+ if ( !resultRenderCache ) {
+ resultRenderCache = computeResultRenderCache(
context );
+ }
+
+ // linkParams object is modified and reused
+ resultRenderCache.linkParams[
resultRenderCache.textParam ] = 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',
resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) +
'&fulltext=1' );
+ } else {
+ $el.wrap(
+ $( '<a>' )
+ .attr( 'href',
resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) +
'&fulltext=1' )
+ .addClass(
'mw-searchSuggest-link' )
+ );
+ }
+ }
+
+ // Generic suggestions functionality for all search boxes
+ searchboxesSelectors = [
+ // Primary searchbox on every page in standard skins
+ '#searchInput',
+ // Special:Search
+ '#powerSearchText',
+ '#searchText',
+ // 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', api.get( {
+ action: 'opensearch',
+ search: query,
+ namespace: 0,
+ limit: maxRows,
+ suggest: ''
+ } ).done( function ( data ) {
+ response( data[ 1 ] );
+ } ) );
+ },
+ 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;
+ }
+ },
+ 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 for skin-provided search
box
+ $searchInput.suggestions( {
+ special: {
+ render: specialRenderFunction,
+ select: function ( $input ) {
+ $input.closest( 'form' )
+ .append( $( '<input
type="hidden" name="fulltext" value="1"/>' ) );
+ return true; // allow the form to be
submitted
+ }
+ },
+ $region: $searchRegion
+ } );
+
+ // If the form includes any fallback fulltext search buttons,
remove them
+ $searchInput.closest( 'form' ).find( '.mw-fallbackSearchButton'
).remove();
+ } );
+
+}( mediaWiki, jQuery ) );
+
diff --git a/js/metrolook.js b/js/metrolook.js
new file mode 100644
index 0000000..97b2943
--- /dev/null
+++ b/js/metrolook.js
@@ -0,0 +1,129 @@
+var openDiv, $;
+function toggleDiv(divID) {
+ $("#" + divID).fadeToggle(150, function() {
+ openDiv = $(this).is(':visible') ? divID : null;
+ });
+}
+
+$(document).click(function(e) {
+ if (!$(e.target).closest('#'+openDiv).length) {
+ toggleDiv(openDiv);
+ }
+});
+
+function is_touch_device() {
+ return !!('ontouchstart' in window);
+}
+$(document).ready(function() {
+ if(is_touch_device()) {
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
+ $('#usermenu > div').toggleClass('no-js js');
+ $('#usermenu .js div').hide();
+ $('#usermenu .js').click(function(e) {
+ $('#usermenu .js div').fadeToggle(150);
+ $('#usermenu').toggleClass('active');
+ e.stopPropagation();
+ });
+ $(document).click(function() {
+ if ($('#usermenu .js div').is(':visible')) {
+ $('#usermenu .js div', this).fadeOut(150);
+ $('#usermenu').removeClass('active');
+ }
+ });
+}
+}
+});
+
+$(function () {
+ if(is_touch_device()) {
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
+ $('.actionmenu > div').toggleClass('no-js js');
+ $('.actionmenu .js div').hide();
+ $('.actionmenu .js').click(function(e) {
+ $('.actionmenu .js div').fadeToggle(150);
+ $('.clicker').toggleClass('active');
+ e.stopPropagation();
+ });
+ $(document).click(function() {
+ if ($('.actionmenu .js div').is(':visible')) {
+ $('.actionmenu .js div', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+}
+}
+});
+
+$(function () {
+ $('#hamburgerIcon').click(function(e) {
+ $('#mw-panel').fadeToggle(150);
+ $('.clicker').toggleClass('active');
+ e.stopPropagation();
+ });
+ $('#hamburgerIcon').click(function() {
+ if ($('#mw-panel').is(':visible')) {
+ $('#mw-panel', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+});
+
+$(function () {
+ $('#hamburgerIcon').click(function(e) {
+ $('#mw-panel-custom').fadeToggle(150);
+ $('.clicker').toggleClass('active');
+ e.stopPropagation();
+ });
+ $('#hamburgerIcon').click(function() {
+ if ($('#mw-panel-custom').is(':visible')) {
+ $('#mw-panel-custom', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+});
+
+$(function () {
+if(is_touch_device()) {
+ if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
+ $('#p-search').hide();
+ $('img.searchbar').click(function(e) {
+ $('#p-search').fadeToggle(150);
+ $('.clicker').toggleClass('active');
+ e.stopPropagation();
+ });
+ $('img.searchbar').click(function() {
+ if ($('#p-search').is(':visible')) {
+ $('#p-search', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+}
+}
+});
+
+$(function () {
+ $('img.editbutton').click(function(e) {
+ $('#left-navigation').fadeToggle(150);
+ $('.clicker').toggleClass('active');
+ e.stopPropagation();
+ });
+ $('img.editbutton').click(function() {
+ if ($('#left-navigation').is(':visible')) {
+ $('#left-navigation', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+});
+
+$(function () {
+ $('img.custom3').click(function(e) {
+ $( 'img.custom3' ).on( 'click', toggleDiv( 'bartile' ) );
+ e.stopPropagation();
+ });
+ $('img.custom3').click(function() {
+ if ($('#bartile').is(':visible')) {
+ $('#bartile', this).fadeOut(150);
+ $('.clicker').removeClass('active');
+ }
+ });
+});
diff --git a/overthrow.js b/js/overthrow.js
similarity index 100%
rename from overthrow.js
rename to js/overthrow.js
diff --git a/vector.js b/js/vector.js
similarity index 90%
rename from vector.js
rename to js/vector.js
index 2b1fc3d..93faf5e 100644
--- a/vector.js
+++ b/js/vector.js
@@ -34,12 +34,6 @@
} );
/**
- * Sidebar
- */
- $( '#mw-panel > .portal:first' ).addClass( 'first' );
- $( '#mw-panel-custom > .portal-custom:first' ).addClass( 'first' );
-
- /**
* Collapsible tabs
*/
var $cactions = $( '#p-cactions' ),
@@ -55,16 +49,16 @@
$cactions
.removeClass( 'emptyPortlet' )
.find( 'h5' )
- .css( 'width', '1px' ).animate(
{ 'width': originalDropdownWidth }, 'normal' );
+ .css( 'width', '1px' ).animate(
{ width: originalDropdownWidth }, 'normal' );
}
} )
.bind( 'beforeTabExpand', function () {
// If we're removing the last child node right now,
hide the dropdown
if ( $cactions.find( 'li' ).length === 1 ) {
- $cactions.find( 'h5' ).animate( { 'width':
'1px' }, 'normal', function () {
+ $cactions.find( 'h5' ).animate( { width: '1px'
}, 'normal', function () {
$( this ).attr( 'style', '' )
.parent().addClass(
'emptyPortlet' );
- });
+ } );
}
} )
.collapsibleTabs( {
diff --git a/screen.less b/screen.less
index 1267db6..40564b2 100644
--- a/screen.less
+++ b/screen.less
@@ -6,4 +6,5 @@
@import "components/navigation.less";
@import "components/footer.less";
@import "components/externalLinks.less";
+@import "components/mobile.less";
@import "theme.less";
diff --git a/theme.less b/theme.less
index 17ab0ff..de0047e 100644
--- a/theme.less
+++ b/theme.less
@@ -2,6 +2,111 @@
/* Top Bar colour and hover colour start */
+@import "mediawiki.mixins";
+#mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ 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');
+ min-width: auto;
+}
-/* Top Bar colour and hover colour end */
+@media (max-width:768px) {
+#mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ 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');
+ min-width: 24em;
+}
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : portrait) {
+#mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ 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');
+ min-width: 25em;
+}
+}
+
+@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : landscape) {
+#mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ 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');
+ min-width: 67.800em;
+}
+}
+
+div.vectorTabs a:hover {
+ background-color: blue;
+}
+
+div.onhoverbg:hover {
+ background-color: blue;
+}
+
+img.custom3:hover{
+ background-color: blue;
+}
+
+div.vectorMenu:hover h5 a {
+ background-color: blue;
+}
+
+div.vectorMenu h5 a {
+ display: inline-block;
+ width: 24px;
+ height: 2em;
+ background-color: dodgerBlue;
+ .background-image-svg('images/arrow-down-icon.svg',
'images/arrow-down-icon.png');
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ .transition(background-position 250ms);
+}
+
+div.vectorMenu:hover {
+ background-color: blue;
+}
+
+div.vectorMenu ul {
+ border: solid 2px dodgerBlue;
+
+}
+
+ul {
+ list-style-type: disc;
+ .list-style-image-svg('images/bullet-circle-icon.svg',
'images/bullet-circle-icon.png');
+}
+
+@media (max-width: 768px) {
+#hamburgerIcon:hover {
+ background-color: blue;
+}
+
+img.editbutton:hover {
+ background-color:blue;
+}
+
+div.actionmenu ul {
+ border-top: solid 2px dodgerBlue;
+}
+
+#left-navigation {
+ background-color: dodgerBlue;
+}
+}
+
+/* Top Bar colour and hover colour */
--
To view, visit https://gerrit.wikimedia.org/r/191638
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I67c8f6bba2a23258706a9b67ea063622c6883baf
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: test
Gerrit-Owner: Paladox <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
![http://images.pidgi.net/pidgiwikitiletop.png"](http://images.pidgi.net/pidgiwikitiletop.png"){kind=link}
![http://images.pidgi.net/pidgipresstiletop.png"](http://images.pidgi.net/pidgipresstiletop.png"){kind=link}
![http://images.pidgi.net/jcctiletop.png"](http://images.pidgi.net/jcctiletop.png"){kind=link}
![http://images.pidgi.net/pwntiletop.png"](http://images.pidgi.net/pwntiletop.png"){kind=link}
