Paladox has submitted this change and it was merged.
Change subject: Preview 2 of metrolook
......................................................................
Preview 2 of metrolook
* This release includes more stability and features.
* Includes fixes for mobile desgn including ipad desgn and desktop desgn
* Fixed some bugs
* Changed name of settings again please see the README.md for details on
changes.
* Added setting to disable mobile desgn.
* Re done the logo and sitename support.
* New setting to disable sitename.
* Full support for logo now. With setting to disable logo.
Please see changelog for more details and README.md.
Change-Id: I7e8a4b880c59883ab5d3452624e1e43d0da79e38
---
M CHANGELOG.md
M Metrolook.php
M MetrolookTemplate.php
M README.md
M components/common.less
M components/mobile.less
M components/navigation.less
M components/search.less
M i18n/ast.json
M i18n/fr.json
M i18n/hi.json
M i18n/it.json
M js/metrolook.js
M theme.less
14 files changed, 180 insertions(+), 220 deletions(-)
Approvals:
Paladox: Verified; Looks good to me, approved
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a540e3b..954285f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,9 +9,13 @@
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.)
+
+* Full logo support.
* Cleaned up MetrolookTemplate.php file.
@@ -19,7 +23,7 @@
* 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.
+$logo renamed to $wgMetrolookLogo<br>$SearchBar renamed to
$wgMetrolookSearchBar<br>$DownArrow renamed to $wgMetrolookDownArrow<br>$Line
renamed to $wgMetrolookLine<br>$UploadButton renamed to
$wgMetrolookUploadButton<br>$wgURL1 and $wgImage1 where renamed to
$wgMetrolookURL1 and $wgMetrolookImage1 and 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.
@@ -27,9 +31,25 @@
* New settings that were added
-$wgBartile
+$wgMetrolookBartile
-$wgTile1<br>$wgTile2<br>$wgTile3<br>$wgTile4<br>$wgTile5<br>$wgTile6<br>$wgTile7<br>$wgTile8<br>$wgTile9<br>$wgTile10
+$wgMetrolookTile1<br>$wgMetrolookTile2<br>$wgMetrolookTile3<br>$wgMetrolookTile4<br>$wgMetrolookTile5<br>$wgMetrolookTile6<br>$wgMetrolookTile7<br>$wgMetrolookTile8<br>$wgMetrolookTile9<br>$wgMetrolookTile10
+
+$wgMetrolookSiteName
+
+$wgMetrolookMobile
+
+
+
+Fixes
+
+Fix for ipad.
+
+Fix for desktop view.
+
+Fix for mobile view.
+
+
Note: Please see settings section in README.md for more information on how to
enable and disable it.
diff --git a/Metrolook.php b/Metrolook.php
index 07e37a5..f0d14d4 100644
--- a/Metrolook.php
+++ b/Metrolook.php
@@ -60,28 +60,37 @@
*/
$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['wgLogoImage'] = false;
+/**
+ * Logo
+ * - true = Logo will show
+ * - false = Logo will not show
+ */
+
+$GLOBALS['wgMetrolookLogo'] = true;
+
+$GLOBALS['wgMetrolookSiteName'] = true;
/* to enable search bar on the sidebar and disables the search bar on the top
bar */
-$GLOBALS['wgSearchBar'] = true;
+$GLOBALS['wgMetrolookSearchBar'] = true;
-$GLOBALS['wgDownArrow'] = true;
+$GLOBALS['wgMetrolookDownArrow'] = true;
-$GLOBALS['wgLine'] = true;
+$GLOBALS['wgMetrolookLine'] = true;
-$GLOBALS['wgUploadButton'] = true;
+$GLOBALS['wgMetrolookUploadButton'] = true;
+
+$GLOBALS['wgMetrolookMobile'] = true;
/* To use tile 5 to 10 please diable this */
-$GLOBALS['wgBartile'] = true;
+$GLOBALS['wgMetrolookBartile'] = true;
-$GLOBALS['wgTile1'] = true;
+$GLOBALS['wgMetrolookTile1'] = true;
-$GLOBALS['wgTile2'] = true;
+$GLOBALS['wgMetrolookTile2'] = true;
-$GLOBALS['wgTile3'] = true;
+$GLOBALS['wgMetrolookTile3'] = true;
-$GLOBALS['wgTile4'] = true;
+$GLOBALS['wgMetrolookTile4'] = true;
// Register modules
$GLOBALS['wgResourceModules']['skins.metrolook.styles'] = array(
@@ -110,6 +119,7 @@
'localBasePath' => __DIR__,
);
$GLOBALS['wgResourceModules']['skins.metrolook.collapsibleNav'] = array(
+ 'position' => 'bottom',
'scripts' => array(
'js/collapsibleNav.js',
),
@@ -123,7 +133,6 @@
),
'remoteSkinPath' => 'Metrolook',
'localBasePath' => __DIR__,
- 'position' => 'bottom',
);
// Apply module customizations
diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php
index 0182464..629a881 100644
--- a/MetrolookTemplate.php
+++ b/MetrolookTemplate.php
@@ -22,7 +22,7 @@
*/
/**
- * QuickTemplate class for Vector skin
+ * QuickTemplate class for Metrolook skin
* @ingroup Skins
*/
class MetrolookTemplate extends BaseTemplate {
@@ -37,9 +37,13 @@
* Outputs the entire contents of the (X)HTML page
*/
public function execute() {
- 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;
+ global $wgMetrolookLogo, $wgMetrolookSearchBar,
$wgMetrolookDownArrow, $wgMetrolookLine,
+ $wgMetrolookUploadButton, $wgMetrolookSiteName,
$wgMetrolookBartile, $wgMetrolookTile1,
+ $wgMetrolookTile2, $wgMetrolookTile3, $wgMetrolookTile4,
$wgMetrolookTile5, $wgMetrolookTile6,
+ $wgMetrolookTile7, $MetrolookwgTile8, $wgMetrolookTile9,
$wgMetrolookTile10, $wgMetrolookImage1,
+ $wgMetrolookURL1, $wgMetrolookImage2, $wgMetrolookURL2,
$wgMetrolookImage3, $wgMetrolookURL3,
+ $wgMetrolookImage4, $wgMetrolookURL4, $wgMetrolookImage5,
$wgMetrolookURL5, $wgMetrolookImage6,
+ $wgMetrolookURL6, $wgMetrolookMobile;
// Build additional attributes for navigation urls
$nav = $this->data['content_navigation'];
@@ -107,8 +111,11 @@
$this->html( 'headelement' );
?>
+<?php if ( $wgMetrolookMobile ): ?>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<?php else: ?>
+<?php endif; ?>
-<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">
@@ -283,22 +290,21 @@
</div>
<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 ( $wgMetrolookSiteName ): ?><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 else: ?><?php endif;
?><?php if ( $wgMetrolookLine ): ?><img class="line" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" style="float:left;" /><?php else: ?><?php endif; ?><?php if (
$wgMetrolookDownArrow ): ?><img class="downarrow" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" style="height:60px;width:27px;cursor:pointer;" /><?php else: ?><?php
endif; ?><?php if ( $wgMetrolookSiteName ): ?></div></div><?php else: ?><?php
endif; ?>
-<?php if ( $wgDownArrow ): ?>
+<?php if ( $wgMetrolookDownArrow ): ?>
<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="align:left;margin-left:auto;margin-right:auto;display:none;"
class="tilebar" id="bartile"><div id="tilegrouptable"><div id="tilegroup">
+<?php if ( $wgMetrolookBartile ): ?>
-<?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 if ( $wgMetrolookTile1 ): ?><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 ( $wgMetrolookTile2 ): ?><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 ( $wgMetrolookTile3 ): ?><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 ( $wgMetrolookTile4 ): ?><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 if ( $wgMetrolookTile5 ): ?><div style="float:left;padding:5px;"><div
class="tile"><a href="<?php echo $GLOBALS['$wgMetrolookURL1'] ?>"><img
src="<?php echo $GLOBALS['$wgMetrolookImage1'] ?>" /></a></div></div><?php
else: ?><?php endif; ?><?php if ( $wgMetrolookTile6 ): ?><div
style="float:left;padding:5px;"><div class="tile"><a href="<?php echo
$GLOBALS['$wgMetrolookURL2'] ?>"><img src="<?php echo
$GLOBALS['$wgMetrolookImage2'] ?>" /></a></div></div><?php else: ?><?php endif;
?><?php if ( $wgMetrolookTile7 ): ?><div style="float:left;padding:5px;"
id="jcctile"><div class="tile"><a href="<?php echo $GLOBALS['$wgMetrolookURL3']
?>"><img src="<?php echo $GLOBALS['$wgMetrolookImage4'] ?>"
/></a></div></div><?php else: ?><?php endif; ?><?php if ( $wgMetrolookTile8 ):
?><div style="float:left;padding:5px;"><div class="tile"><a href="<?php echo
$GLOBALS['$wgMetrolookURL4'] ?>"><img src="<?php echo
$GLOBALS['$wgMetrolookImage4'] ?>" /></a></div></div><?php else: ?><?php endif;
?><?php if ( $wgMetrolookTile9 ): ?><div style="float:left;padding:5px;"><div
class="tile"><a href="<?php echo $GLOBALS['$wgMetrolookURL5'] ?>"><img
src="<?php echo $GLOBALS['$wgMetrolookImage5'] ?>" /></a></div></div><?php
else: ?><?php endif; ?><?php if ( $wgMetrolookTile10 ): ?><div
style="float:left;padding:5px;"><div class="tile"><a href="<?php echo
$GLOBALS['$wgMetrolookURL6'] ?>"><img src="<?php echo
$GLOBALS['$wgMetrolookImage6'] ?>" /></a></div></div><?php else: ?><?php endif;
?>
<?php endif; ?>
@@ -309,35 +315,49 @@
<?php else: ?>
<?php endif; ?>
<div id="left-navigation">
- <?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' ) ); ?>
+ <?php if ( $wgMetrolookUploadButton ): ?><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="uploadbutton" 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="editbutton"><img class="editbutton"
src="<?php echo htmlspecialchars( $this->getSkin()->getSkinStylePath(
'images/Transparent.gif' ) ) ?>" ></img></div>
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<img class="searchbar" src="<?php echo
htmlspecialchars( $this->getSkin()->getSkinStylePath( 'images/Transparent.gif'
) ) ?>" ></img>
<?php else: ?>
<?php endif; ?>
<div id="right-navigation">
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<?php $this->renderNavigation( array( 'SEARCH'
) ); ?>
<?php else: ?>
<?php endif; ?>
</div>
</div>
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<div id="mw-panel">
+ <?php if ( $wgMetrolookLogo ): ?>
+ <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 else: ?>
+ <?php endif; ?>
+ <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
+ </div>
<?php else: ?>
<div id="mw-panel-custom">
- <?php endif; ?>
- <?php if ( $wgSearchBar ): ?>
- <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
+ <?php if ( $wgMetrolookLogo ): ?>
+ <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 else: ?>
+ <?php endif; ?>
<?php $this->renderNavigation( array( 'SEARCH'
) ); ?>
<?php $this->renderPortals(
$this->data['sidebar'] ); ?>
- <?php endif; ?>
</div>
+ <?php endif; ?>
</div>
<?php $this->printTrail(); ?>
@@ -397,14 +417,14 @@
* @param null|string|array $hook
*/
protected function renderPortal( $name, $content, $msg = null, $hook =
null ) {
- global $wgSearchBar;
+ global $wgMetrolookSearchBar;
if ( $msg === null ) {
$msg = $name;
}
$msgObj = wfMessage( $msg );
?>
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<div class="portal" role="navigation" id='<?php
echo Sanitizer::escapeId( "p-$name" )
?>'<?php
@@ -425,7 +445,7 @@
echo htmlspecialchars( $msgObj->exists() ?
$msgObj->text() : $msg );
?></h5>
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<div class="body">
<?php else: ?>
<div class="body-custom">
@@ -467,7 +487,7 @@
* @param array $elements
*/
protected function renderNavigation( $elements ) {
- global $wgSearchBar;
+ global $wgMetrolookSearchBar;
// If only one element was given, wrap it in an array, allowing
more
// flexible arguments
@@ -642,7 +662,7 @@
break;
case 'SEARCH':
?>
- <?php if ( $wgSearchBar ): ?>
+ <?php if ( $wgMetrolookSearchBar ): ?>
<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 c0a6a0b..c9d0f71 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@
Please be aware that there are issues in the codes if you see any could you
point it out it would help. and there are things like logos already set sorry i
will put a setting there.
-A working demo of the skin is available at
http://www.pidgi.net/metrolooktest/index.php/Main_Page . This is currently
using MediaWiki 1.25wmf12 and version 3.0 beta 13 of the master branch of the
skin.
+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.
## Installation
@@ -46,27 +46,29 @@
|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;`| |
+|wgMetrolookLogo| `false` | `$wgMetrolookLogo = true;`| `$wgMetrolookLogo =
false;`|
+|wgMetrolookSiteName| `true` | `$wgMetrolookSiteName = true;`|
`$wgMetrolookSiteName = false;`|
+|wgMetrolookSearchBar| `true` | `$wgMetrolookSearchBar = true;`|
`$wgMetrolookSearchBar = false;`|
+|wgMetrolookDownArrow| `true` | `$wgMetrolookDownArrow = true;`|
`$wgMetrolookDownArrow = false;`|
+|wgMetrolookLine| `true` | `$wgMetrolookLine = true;`| `$wgMetrolookLine =
false;`|
+|wgMetrolookUploadButton| `true` | `$wgMetrolookUploadButton = true;`|
`$wgMetrolookUploadButton = false;`|
+|wgMetrolookMobile| `true` | `$wgMetrolookMobile = true;`| `$wgMetrolookMobile
= false;`|
+|wgMetrolookBartile| `true` | `$wgMetrolookBartile = true;`|
`$wgMetrolookBartile = false;`|
+|`$wgMetrolookTileN`<br>Where `N` is between 1 to 4. | `true` |
`$wgMetrolookTile1 = true;`| `$wgMetrolookTile1 = false;` |
+|`$wgMetrolookTileN`<br>Where `N` is between 5 to 10. | | `$wgMetrolookTile5 =
true;`| `$wgMetrolookTile5 = false;` |
+|`$wgMetrolookURLN`, `$wgMetrolookImageN`<br>Where `N` is between 1 to 6. | |
`$wgMetrolookURL1 = link of website;`<br>`$wgMetrolookImage1 = 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
+$link and $picture were removed in favour of using $wgMetrolookBartile and
$wgMetrolookURL1 and $wgMetrolookImage1
-$logo was removed in favour of $wgLogoImage
+$logo was removed in favour of $wgMetrolookLogo and $wgMetrolookSiteName.
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;
+Note: Image setting should be set like this for example $wgMetrolookImage1 =
file/to/image or can be set like http://example.com/image.png;
## Customizing top bar color
@@ -133,7 +135,7 @@
background-color: blue;
}
-img.custom3:hover{
+img.downarrow:hover{
background-color: blue;
}
@@ -161,13 +163,18 @@
}
+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;
+ background-color: blue;
}
div.actionmenu ul {
@@ -184,7 +191,7 @@
## Known Issues
-* 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.
+* When i recent changes and are in mobile view or on a mobile device bartitle
will show but is harder to click off it.
## Support coming soon
diff --git a/components/common.less b/components/common.less
index 0b965e0..f286deb 100644
--- a/components/common.less
+++ b/components/common.less
@@ -27,23 +27,23 @@
}
body {
- height:100%;
+ height: 100%;
}
html {
- height:100%;
+ height: 100%;
}
html,
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
- height:100%;
+ height: 100%;
}
#top-tile-bar {
background:transparent;
left: 0px;
height: 200px;
position: fixed;
- z-index:100;
+ z-index: 100;
}
.tilebar {
position: relative;
@@ -54,10 +54,10 @@
align:right;
color:#fff;
background:#1D1D1D;
- width:21474836.47em;
- height:200px;
- display:block;
- z-index:9999999;
+ width: 21474836.47em;
+ height: 200px;
+ display: block;
+ z-index: 9999999;
}
.tile:hover {
outline: 3px #4A4A4A solid;
@@ -74,8 +74,21 @@
position: absolute;
left:0;
z-index: 2000;
- height:200px;
+ height: 200px;
}
+
+img.editbutton {
+ display: none;
+}
+#tilegrouptable {
+ height: 130px;
+ padding: 0;
+ border-spacing: 0;
+}
+#tilegroup {
+ padding: 35px;
+ height: 130px;
+}
/* Content */
.mw-body {
@@ -176,48 +189,48 @@
}
}
-img.custom {
+img.uploadbutton {
position:inherit;
.background-image-svg('images/uploadlogo.svg', 'images/uploadlogo.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 */
+ 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.custom2 {
- position:inherit;
+img.line {
+ position: inherit;
.background-image-svg('images/line.svg', 'images/line.png');
- width:28px; /* width of your image */
- height:35px; /* height of your image */
- margin:0; /* If you want no margin */
- padding:0; /* if your want to padding */
+ width: 28px; /* 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.custom3 {
- position:inherit;
+img.downarrow {
+ position: inherit;
.background-image-svg('images/downarrow.svg', 'images/downarrow.png');
- margin:-26px; /* If you want no margin */
- padding:0; /*if your want to padding */
+ margin: -26px; /* If you want no margin */
+ padding: 0; /*if your want to padding */
background-repeat: no-repeat;
background-position: -0px 20px;
}
-img.custom3:hover {
- position:inherit;
+img.downarrow:hover {
+ position: inherit;
background: #9F6F40;
.background-image-svg('images/downarrow.svg', 'images/downarrow.png');
- margin:-26px; /* If you want no margin */
- padding:0; /*if your want to padding */
+ margin: -26px; /* If you want no margin */
+ padding: 0; /*if your want to padding */
background-repeat: no-repeat;
background-position: -0px 20px;
}
#hamburgerIcon {
- position:fixed;
- top:40px;
- z-index:0;
+ position: fixed;
+ top: 40px;
+ z-index: 0;
}
/* Hide empty portlets */
diff --git a/components/mobile.less b/components/mobile.less
index 67849fb..a4b8916 100644
--- a/components/mobile.less
+++ b/components/mobile.less
@@ -122,7 +122,7 @@
div#mw-head {
position: absolute;
top: 0;
- min-width:106%;
+ min-width: 106%;
h5 {
margin: 0;
@@ -243,7 +243,7 @@
div#mw-head {
position: absolute;
top: 0;
- min-width:92.750%;
+ min-width: 92.750%;
h5 {
margin: 0;
@@ -287,19 +287,19 @@
img.hamburger {
.background-image-svg('images/hamburger.svg', 'images/hamburger.png');
- width: 26px; /*width of your image*/
- height: 35px; /*height of your image*/
+ 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 */
+ 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*/
+ width: 26px; /* width of your image */
+ height: 35px; /* height of your image */
background-repeat: no-repeat;
- margin-right: -3.5em;
+ margin-right: -4.5em;
margin-top: 1em;
float: right;
}
@@ -307,15 +307,15 @@
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*/
+ 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;
+ margin-left: 0em;
+ margin-top: -0;
}
img.editbutton:hover {
@@ -323,7 +323,7 @@
display: block;
float: right;
margin: 8px;
- margin-left: -1em;
+ margin-left: 0em;
margin-top: -0;
background-color: #CF8B54;
}
@@ -361,6 +361,7 @@
top: 0.3em;
position: relative;
margin-right: -7px;
+ margin-left: 0.7em;
}
#p-search {
@@ -456,15 +457,12 @@
}
#tilegrouptable {
- width: 260px;
- height: 260px;
- margin:0 auto;
+ height: 200px;
}
#tilegroup {
- padding-left: 0px;
- width: 260px;
- height: 260px;
+ padding: 35px;
+ vertical-align: middle;
}
#top-tile-bar {
diff --git a/components/navigation.less b/components/navigation.less
index 99b217a..5f7940c 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -56,11 +56,10 @@
/* Logo */
#p-logo {
- position: absolute;
- top: -160px;
left: 0;
width: 10em;
height: 160px;
+ margin-bottom: 1em;
a {
display: block;
diff --git a/components/search.less b/components/search.less
index 15cbf10..2e4022d 100644
--- a/components/search.less
+++ b/components/search.less
@@ -4,7 +4,6 @@
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
- margin-top: -1.2em;
h5 {
display: none;
diff --git a/i18n/ast.json b/i18n/ast.json
index 2bcdfe9..73ab336 100644
--- a/i18n/ast.json
+++ b/i18n/ast.json
@@ -6,4 +6,4 @@
},
"metrolook-desc": "Aspeutu Metrolook pa MediaWiki",
"metrolook-guest": "Invitáu"
-}
+}
\ No newline at end of file
diff --git a/i18n/fr.json b/i18n/fr.json
index 709dd79..39ca9b5 100644
--- a/i18n/fr.json
+++ b/i18n/fr.json
@@ -7,4 +7,4 @@
},
"metrolook-desc": "Skin Metrolook pour MediaWiki",
"metrolook-guest": "Invité"
-}
+}
\ No newline at end of file
diff --git a/i18n/hi.json b/i18n/hi.json
index df2accb..8aae1bb 100644
--- a/i18n/hi.json
+++ b/i18n/hi.json
@@ -6,4 +6,4 @@
},
"metrolook-desc": "मीडियाविकि के लिए मेट्रोलुक त्वचा",
"metrolook-guest": "अतिथि"
-}
+}
\ No newline at end of file
diff --git a/i18n/it.json b/i18n/it.json
index bf6f403..60909da 100644
--- a/i18n/it.json
+++ b/i18n/it.json
@@ -6,4 +6,4 @@
},
"metrolook-desc": "Skin Metrolook per MediaWiki",
"metrolook-guest": "Ospite"
-}
+}
\ No newline at end of file
diff --git a/js/metrolook.js b/js/metrolook.js
index 97b2943..69c4be7 100644
--- a/js/metrolook.js
+++ b/js/metrolook.js
@@ -116,11 +116,11 @@
});
$(function () {
- $('img.custom3').click(function(e) {
+ $('img.downarrow').click(function(e) {
$( 'img.custom3' ).on( 'click', toggleDiv( 'bartile' ) );
e.stopPropagation();
});
- $('img.custom3').click(function() {
+ $('img.downarrow').click(function() {
if ($('#bartile').is(':visible')) {
$('#bartile', this).fadeOut(150);
$('.clicker').removeClass('active');
diff --git a/theme.less b/theme.less
index de0047e..02b1351 100644
--- a/theme.less
+++ b/theme.less
@@ -2,111 +2,6 @@
/* 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;
-}
-
-@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/193576
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7e8a4b880c59883ab5d3452624e1e43d0da79e38
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: test
Gerrit-Owner: Paladox <thomasmulhall...@yahoo.com>
Gerrit-Reviewer: Paladox <thomasmulhall...@yahoo.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
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}
