jenkins-bot has submitted this change and it was merged. Change subject: Update to 0.2.4 ......................................................................
Update to 0.2.4 This will probaly be the last update for MediaWiki 1.21 for metrolook. This includes just one new features like new tiles format please changelog on details on it. Renamed settings please also see changelog. Change-Id: I8d20e10e9600a7d11a028e3e726eed22bf00a49d --- A .jshintignore M CHANGELOG.md M Metrolook.i18n.php M Metrolook.php M MetrolookTemplate.php M README.md M js/metrolook.js M js/metrolook.search.js M mobile.css M package.json M screen.css M tablet.css 12 files changed, 226 insertions(+), 401 deletions(-) Approvals: Paladox: Looks good to me, approved jenkins-bot: Verified diff --git a/.jshintignore b/.jshintignore new file mode 100644 index 0000000..aea60a1 --- /dev/null +++ b/.jshintignore @@ -0,0 +1 @@ +js/overthrow.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c305b3..085b7a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,44 @@ Changelog ========= +0.2.4 +=== + +### New features + +To set tiles now please do the following + +go to MediaWiki:metrolook-tiles + + +Then add + +for example + +Doint forget to add * in front of the code. It wont work without doing * in fornt of code. + +* URL to the site|alternative text|image URL + +* http://example.com|Example name|http://example.com/example.png + +You can now set different tiles for different languges. + +(for french) + +For example MediaWiki:metrolook-tiles/fr + +Renamed settings + +VectorUseSimpleSearch -> MetrolookUseSimpleSearch + +VectorUseIconWatch -> MetrolookUseIconWatch + + +Remove settings + +$wgMetrolookTile1-10 + + 0.2.3 === diff --git a/Metrolook.i18n.php b/Metrolook.i18n.php index dbc536d..ac96828 100644 --- a/Metrolook.i18n.php +++ b/Metrolook.i18n.php @@ -89,22 +89,19 @@ 'metrolook-guest' => 'Meyman', ); -/** - * @author Caliburn - */ -$messages['en-gb'] = array( - 'metrolook-desc' => 'Metrolook skin for MediaWiki', - 'metrolook-guest' => 'Guest', -); - /** English * @author paladox */ $messages['en'] = array( 'skinname-metrolook' => 'Metrolook', + 'metrolook-desc' => 'Metrolook is a [https://en.wikipedia.org/wiki/Metro_(design_language) Metro-inspired] fork of the Vector skin', 'skinmetrolook-collapsiblenav-preference' => 'Enable collapsing of items in the sidebar in Metrolook skin', - 'metrolook-desc' => 'Metrolook skin for MediaWiki', 'metrolook-guest' => 'Guest', + 'metrolook-tiles' => '* http://www.pidgi.net/wiki/|PidgiWiki|http://images.pidgi.net/pidgiwikitiletop.png +* http://www.pidgi.net/press/|PidgiWiki Press|http://images.pidgi.net/pidgipresstiletop.png +* http://www.petalburgwoods.com/|Petalburg Woods|http://images.pidgi.net/pwntiletop.png +* http://burstcade.pidgi.net/|Burstcade|http://images.pidgi.net/burstcadetiletop.png', + 'metrolook-tiles-second' => '', ); /** diff --git a/Metrolook.php b/Metrolook.php index f1e0880..d297842 100644 --- a/Metrolook.php +++ b/Metrolook.php @@ -26,7 +26,7 @@ 'name' => 'Metrolook', 'namemsg' => 'skinname-metrolook', 'descriptionmsg' => 'metrolook-desc', - 'version' => '0.2.3', + 'version' => '0.2.4', 'url' => 'https://www.mediawiki.org/wiki/Skin:Metrolook', 'author' => array( 'immewnity', 'Paladox', 'Craig Davison', 'lagleki' ), 'license-name' => 'GPLv2+', @@ -72,14 +72,14 @@ * - true = use an icon search button * - false = use Go & Search buttons */ -$wgVectorUseSimpleSearch = true; +$wgMetrolookUseSimpleSearch = true; /** * Watch and unwatch as an icon rather than a link. * - true = use an icon watch/unwatch button * - false = use watch/unwatch text link */ -$wgVectorUseIconWatch = true; +$wgMetrolookUseIconWatch = true; $wgMetrolookLogo = true; @@ -101,16 +101,7 @@ $wgMetrolookMobile = true; -/* To use tile 5 to 10 please diable this */ $wgMetrolookBartile = true; - -$wgMetrolookTile1 = true; - -$wgMetrolookTile2 = true; - -$wgMetrolookTile3 = true; - -$wgMetrolookTile4 = true; // Register modules $wgResourceModules['skins.metrolook'] = array( diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php index 3628c67..f72e5c0 100644 --- a/MetrolookTemplate.php +++ b/MetrolookTemplate.php @@ -33,6 +33,52 @@ /** @var string $mPersonalToolsEcho Saves Echo notifications */ private $mPersonalToolsEcho = ''; + private function getTiles( $messageName = 'metrolook-tiles' ) { + /** + * The message's format is: + * * URL to the site|alternative text|image URL + * + * For example: + * * http://www.pidgi.net/wiki/|PidgiWiki|http://images.pidgi.net/pidgiwikitiletop.png + * * http://www.pidgi.net/press/|PidgiWiki Press|http://images.pidgi.net/pidgipresstiletop.png + * * http://www.pidgi.net/jcc/|The JCC|http://images.pidgi.net/jcctiletop.png + * * http://www.petalburgwoods.com/|Petalburg Woods|http://images.pidgi.net/pwntiletop.png + */ + $tileMessage = $this->getSkin()->msg( $messageName ); + $tiles = ''; + if ( $tileMessage->isDisabled() ) { + return $tiles; + } + + $lines = explode( "\n", $tileMessage->inContentLanguage()->text() ); + + foreach ( $lines as $line ) { + if ( strpos( $line, '*' ) !== 0 ) { + continue; + } else { + $line = explode( '|', trim( $line, '* ' ), 3 ); + $siteURL = $line[0]; + $altText = $line[1]; + + // Maybe it's the name of a MediaWiki: message? I18n is + // always nice, so at least try it and see what happens... + $linkMsgObj = $this->getSkin()->msg( $altText ); + if ( !$linkMsgObj->isDisabled() ) { + $altText = $linkMsgObj->parse(); + } + + $imageURL = $line[2]; + $tiles .= '<div class="tile-wrapper"><div class="tile">' . + '<a href="' . htmlspecialchars( $siteURL, ENT_QUOTES ) . '"><img src="' . + htmlspecialchars( $imageURL, ENT_QUOTES ) . + '" alt="' . htmlspecialchars( $altText, ENT_QUOTES ) . '" /></a>' . + '</div></div>'; + } + } + + return $tiles; + } + /** * Outputs the entire contents of the (X)HTML page */ @@ -41,7 +87,7 @@ // Build additional attributes for navigation urls $nav = $this->data['content_navigation']; - if ( $GLOBALS['wgVectorUseIconWatch'] ) { + if ( $GLOBALS['wgMetrolookUseIconWatch'] ) { $mode = $this->getSkin()->getUser()->isWatched( $this->getSkin()->getRelevantTitle() ) ? 'unwatch' : 'watch'; if ( isset( $nav['actions'][$mode] ) ) { $nav['views'][$mode] = $nav['actions'][$mode]; @@ -345,165 +391,6 @@ } ?> - <?php - if ( $GLOBALS['wgMetrolookDownArrow'] ) { - ?> - <div id="top-tile-bar" class="fixed-position"> - <div style="vertical-align:top;align:left;"> - <div class="topleft"> - <div style="align: left; margin-left: auto; margin-right: auto; display: none;" - class="tilebar" id="bartile"> - <div id="tilegrouptable"> - <div id="tilegroup"> - <?php - if ( $GLOBALS['wgMetrolookBartile'] ) { - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - } else { - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['wgMetrolookTile7'] ) { - ?> - <div style="float:left;padding:5px;"> - <div class="tile"> - <a href="<?php echo $GLOBALS['wgMetrolookURL3'] ?>"> - <img src="<?php echo $GLOBALS['wgMetrolookImage3'] ?>" /> - </a> - </div> - </div> - <?php - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - if ( $GLOBALS['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 - } - ?> - <?php - } - ?> - </div> - </div> - </div> - </div> - </div> - </div> - <?php - } - ?> - <div id="left-navigation"> <?php if ( $GLOBALS['wgMetrolookUploadButton'] ) { @@ -590,6 +477,29 @@ ?> <?php $this->renderNavigation( array( 'SEARCH' ) ); ?> <?php $this->renderPortals( $this->data['sidebar'] ); ?> + </div> + <?php + } + ?> + <?php + if ( $GLOBALS['wgMetrolookDownArrow'] ) { + ?> + <div class="top-tile-bar-inner-container"> + <div class="topleft"> + <div class="tilebar" id="bartile"> + <div id="tilegrouptable"> + <div id="tilegroup"> + <?php + if ( $GLOBALS['wgMetrolookBartile'] ) { + echo $this->getTiles(); + } else { + echo $this->getTiles( 'metrolook-tiles-second' ); + } + ?> + </div> + </div> + </div> + </div> </div> <?php } @@ -812,7 +722,7 @@ <form action="<?php $this->text( 'wgScript' ) ?>" id="searchform"> <?php - if ( $GLOBALS['wgVectorUseSimpleSearch'] ) { + if ( $GLOBALS['wgMetrolookUseSimpleSearch'] ) { ?> <div id="simpleSearch"> <?php @@ -857,7 +767,7 @@ <form action="<?php $this->text( 'wgScript' ) ?>" id="searchform"> <?php - if ( $GLOBALS['wgVectorUseSimpleSearch'] ) { + if ( $GLOBALS['wgMetrolookUseSimpleSearch'] ) { ?> <div id="simpleSearchSearch"> <?php diff --git a/README.md b/README.md index 7d440c5..84c42a1 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,18 @@ The author of the skin is http://www.pidgi.net/wiki/Main_Page -Compatible with MediaWiki 1.21. +Compatible with MediaWiki 1.21+. -If you would like compatibility with mediawiki 1.26, 1.25, 1.24, 1.23 and 1.22 please visit +If you would like compatibility with older releases of MediaWiki, download the +appropriate version for your MediaWiki from one of the URLs below: + +1.27 + +https://github.com/paladox/Metrolook/tree/master 1.26 -https://github.com/paladox/Metrolook/tree/master +https://github.com/paladox/Metrolook/tree/REL1_26 1.25 @@ -30,200 +35,52 @@ https://github.com/paladox/Metrolook/tree/REL1_22 +### Live demo -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.25wmf18 and a snapshot of the test 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. +### On-wiki documentation -## Installation +Please visit https://www.mediawiki.org/wiki/Skin:Metrolook where the documentation is now located. -Download and save in skins/ folder +### Mobile design -Add this to LocalSettings.php +Mobile design now included in the latest release for MediaWiki 1.21+. +To get mobile design please download Metrolook release 0.2.0, 0.3.10, 1.4, 2.5 or 3.0 beta 16 or higher. -```php -require_once "$IP/skins/Metrolook/Metrolook.php"; -``` +Please report any and all bugs, issues and other feedback via the bug tracker (see below). -## Settings +### Bugs +Bugs and issues should be reported on the MediaWiki Phabricator or GitHub. +It is strongly recommended that you use Phabricator to report bugs and submit +feedback, as more developers will see the report and are able to act on it. -1.21 +Phabricator is located at: -|Setting|Default|To Enable|To Disable| -|-------|-------|---------|----------| -|wgMetrolookLogo| `false` | `$wgMetrolookLogo = true;`| `$wgMetrolookLogo = false;`| -|wgMetrolookSiteName| `true` | `$wgMetrolookSiteName = true;`| `$wgMetrolookSiteName = false;`| -|wgMetrolookSiteNameText| `true` | `$wgMetrolookSiteNameText = true;`| `$wgMetrolookSiteNameText = false;`| -|wgMetrolookSiteText| `There is none` | `$wgMetrolookSiteNameText = false;` then do `$wgMetrolookSiteText = 'Enter text here';`| `$wgMetrolookSiteNameText = true;`| -|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;`| | -|wgMetrolookFeatures| `$wgMetrolookFeatures'] = array( 'collapsiblenav' => array( 'global' => false, 'user' => true ), );` | default is enabled | `$wgDefaultUserOptions['skinmetrolook-collapsiblenav'] = 0;` to disable it but allow users in preference to enable it. or `$wgMetrolookFeatures = array( 'collapsiblenav' => array( 'global' => false, 'user' => false ), );` to disable everywhere| +https://phabricator.wikimedia.org/tag/mediawiki-skins-metrolook/ -$wgBartile is now used to disable the default tiles or enable them so you can have the default tiles or set your self one. +If, for some reason, you are unable to unwilling to use Phabricator, you can +submit your bug on GitHub, but it is likely to receive less attention there +than on Phabricator. -$link and $picture were removed in favour of using $wgMetrolookBartile and $wgMetrolookURL1 and $wgMetrolookImage1 +The GitHub bug reporting URL is: -$logo was removed in favour of $wgMetrolookLogo and $wgMetrolookSiteName. +https://github.com/paladox/Metrolook/issues - -Note: Tile 5 to 10 is for when you disable bartile. - -Note: Image setting should be set like this for example $wgMetrolookImage1 = file/to/image or can be set like http://example.com/image.png; - -You can shorten youre site name for the top bar with $wgMetrolookSiteText. To set it please enable $wgMetrolookSiteNameText by doing $wgMetrolookSiteNameText = false then set this $wgMetrolookSiteText = 'Enter text here'; - - - -## Mobile desgn - -Mobile desgn now included in the latest release for Mediawiki 1.21+. Also to get mobile desgn please download Metrolook release 0.2.0, 0.3.10, 1.4, 2.5 or 3.0 beta 16 or higher please. - -And please report feedback in the issues tab. And if you could help fix the problem and or improve the desgn please open and pull task. - - -## Customizing top bar color - -To customise top bar colour ether add it to theme.css which is in metrolook skin folder or MediaWiki:Metrolook.css from web browser. - -and all you need to do is edit background-colour and the top bar should change colour but please remember there is also hover which is when you hover it goes a different colour. - -```css - -/* Add your custom theme overrides here */ - -/* Top Bar colour and hover colour start */ - -#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: 64.7em; -} -} - -div.vectorTabs li a:hover { - background-color: blue; -} - -div.onhoverbg:hover { - background-color: blue; -} - -img.downarrow: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: url('images/arrow-down-icon'); - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url('images/arrow-down-icon.svg'); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url('images/arrow-down-icon.svg'); - background-position: 50% 50%; - background-repeat: no-repeat; - .transition(background-position 250ms); -} - -div.vectorMenu:hover { - background-color: blue; -} - -div.vectorMenu ul { - border: solid 2px blue; - border-top: none; - -} - -@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; -} -} - -/* To change bullet icon to a circle */ - -ul { - list-style-type: disc; - list-style-image: url('images/bullet-circle-icon.png'); -} - -/* Top Bar colour and hover colour end */ -``` +It is recommended that you spend a while reading the documentation and +searching the archived discussions before posting a question - it is +possible that someone has experienced the same issue with this software +that you are experiencing currently. ## Known Issues -* Sometimes clicking of bartitle on mobile, it wont let you click off sometimes. - -## Comming soon - -Note plans may change. +See https://phabricator.wikimedia.org/tag/mediawiki-skins-metrolook/ for a list +of currently open bugs. ## Version + +5.x.x requires MediaWiki 1.27. 4.x.x requires MediaWiki 1.26. @@ -237,13 +94,3 @@ 0.2.x requires MediaWiki 1.21. - -## Removed things - -Please do not remove this section. it is for things that have been removed and used for if something goes wrong and the problem was because it was removed then they can use the things here. - -```html -<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' defer="defer" rel='stylesheet' type='text/css'> -<meta name="msapplication-TileImage" content="http://www.pidgi.net/new/public/images/pidgiwiki.png"/> -<meta name="msapplication-TileColor" content="#BE0027"/> -``` diff --git a/js/metrolook.js b/js/metrolook.js index e6f4b0b..2309db3 100644 --- a/js/metrolook.js +++ b/js/metrolook.js @@ -17,7 +17,7 @@ } function isMobileUserAgent() { - return !!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|CriOS|Opera Mini|Mobile|mobile/i.test( navigator.userAgent ) ); + return !!( /mobi|alcatel|Android|android|kindle|webOS|webos|iPhone|iPad|iPod|Tablet|PlayBook|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test( navigator.userAgent ) ); } $( function() { @@ -83,4 +83,15 @@ } e.stopPropagation(); } ); + + // Listen to clicks (taps on mobile) to the black bar and if it was + // clicked/tapped (instead of an individual tile), dismiss the menu. + // This improves usability especially on lower-end mobile devices with + // smaller screens. + // Fixes https://phabricator.wikimedia.org/T105785 + $( '#tilegroup' ).not( '.tile-wrapper' ).on( 'click', function() { + if ( $( '#bartile' ).is( ':visible' ) ) { + toggleDiv( 'bartile' ); + } + } ); } ); diff --git a/js/metrolook.search.js b/js/metrolook.search.js index 5f26d6d..a6d9987 100644 --- a/js/metrolook.search.js +++ b/js/metrolook.search.js @@ -1,10 +1,13 @@ +/* global $ */ + function isTouchDevice() { return !!('ontouchstart' in window); } + /* This is here to fix js issue with iPad (all models) */ $(function () { if( isTouchDevice() ) { - if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { + if( /mobi|alcatel|Android|android|webOS|webos|iPhone|iPod|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(navigator.userAgent) ) { $( '#p-search' ).hide(); $( 'img.searchbar' ).click(function(e) { $( '#p-search' ).fadeToggle(150); @@ -18,5 +21,10 @@ } }); } + + /* Fix search bar not showing on iPad */ + if( /kindle|iPad|PlayBook|Tablet/i.test(navigator.userAgent) ) { + $( '#p-search' ).show(); + } } }); diff --git a/mobile.css b/mobile.css index f7251c6..6cef9c4 100644 --- a/mobile.css +++ b/mobile.css @@ -7,7 +7,7 @@ } div#mw-head { - position: absolute; + position: fixed; top: 0; min-width: 97%; } diff --git a/package.json b/package.json index d1896df..637aa4b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "devDependencies": { "grunt": "0.4.5", "grunt-cli": "0.1.13", - "grunt-contrib-jshint": "0.11.2", + "grunt-contrib-jshint": "0.11.3", "grunt-jscs": "1.8.0", "grunt-jsonlint": "1.0.4" } diff --git a/screen.css b/screen.css index 9139cb6..9a34bb9 100644 --- a/screen.css +++ b/screen.css @@ -37,15 +37,18 @@ padding: 0px 0px 0px 0px; height: 100%; } -#top-tile-bar { - background: transparent; - left: 0px; - height: 200px; - position: fixed; - z-index: 100; +.top-tile-bar-inner-container { + align: left; + vertical-align: top; } + +.tile-wrapper { + float: left; + padding: 5px; +} + .tilebar { - position: relative; + position: fixed; left: 0px; top: 0px; right: 0px; @@ -53,16 +56,30 @@ align: right; color: #fff; background: #1D1D1D; - width: 21474836.47em; height: 200px; display: block; z-index: 9999999; + margin-left: auto; + margin-right: auto; + display: none; } + .tile:hover { outline: 3px #4A4A4A solid; } -.onhoverbg:hover { - background: #9F6F40; + +.onhoverbg { + height: 40px; + float: left; + + &:hover { + background: #9F6F40; + } +} + +.siteLogoBar { + float: left; + height: 40px; } .topleft { @@ -93,6 +110,7 @@ height: 130px; } + /* Content */ div#content { margin-left: 10em; @@ -105,7 +123,7 @@ color: black; direction: ltr; height: auto; - position: absolute; + position: relative; bottom: 0; right: 0; left: 0; @@ -196,19 +214,24 @@ 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; + min-width: 100%; + position: fixed; + top: 0px; + z-index: 1; } #mw-head-base { margin-top: -5em; margin-left: 10em; height: 5em; + position: fixed; } div#mw-head { - position: absolute; + position: fixed; top: 0px; min-width: 100%; + z-index: 1; } div#mw-head h5 { @@ -812,7 +835,7 @@ /* Panel */ div#mw-panel { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -822,6 +845,7 @@ padding-top: 1em; width: 11em; left: 0; + z-index: 1; } div#mw-panel div.portal { margin: 0 0.6em 0 0.7em; @@ -868,7 +892,7 @@ /* Panel */ div#mw-panel-custom { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -879,6 +903,7 @@ padding-top: 1em; width: 11em; left: 0; + z-index: 1; } div#mw-panel-custom div.portal-custom { margin: 0 0.6em 0 0.7em; diff --git a/tablet.css b/tablet.css index f12dd5b..02a2994 100644 --- a/tablet.css +++ b/tablet.css @@ -32,7 +32,7 @@ div#mw-panel { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -87,7 +87,7 @@ div#mw-panel-custom { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -152,7 +152,7 @@ color: black; direction: ltr; height: auto; - position: absolute; + position: fixed; bottom: 0; right: 0em; left: 0; @@ -162,9 +162,8 @@ } div#mw-head { - position: absolute; + position: fixed; top: 0; - min-width: 99%; } #mw-page-base { @@ -174,7 +173,6 @@ 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: 62em; } #p-search { @@ -241,7 +239,7 @@ div#mw-panel { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -296,7 +294,7 @@ div#mw-panel-custom { font-size: inherit; - position: absolute; + position: fixed; top: 40px; bottom: 0; height: auto; @@ -361,7 +359,7 @@ color: black; direction: ltr; height: auto; - position: absolute; + position: fixed; bottom: 0; right: 0; left: 0; @@ -373,7 +371,6 @@ div#mw-head { position: absolute; top: 0; - min-width: 92.750%; } div#mw-head h5 { -- To view, visit https://gerrit.wikimedia.org/r/243518 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I8d20e10e9600a7d11a028e3e726eed22bf00a49d Gerrit-PatchSet: 2 Gerrit-Project: mediawiki/skins/Metrolook Gerrit-Branch: REL1_21 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}
![http://www.pidgi.net/new/public/images/pidgiwiki.png"/](http://www.pidgi.net/new/public/images/pidgiwiki.png"/){kind=link}