https://www.mediawiki.org/wiki/Special:Code/MediaWiki/113898
Revision: 113898 Author: jdlrobson Date: 2012-03-15 09:44:17 +0000 (Thu, 15 Mar 2012) Log Message: ----------- restyle header following design @ http://www.mediawiki.org/wiki/Mobile_design/Full-screen_search increase margin of content/header change icons for close search and clear search Modified Paths: -------------- trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js trunk/extensions/MobileFrontend/stylesheets/beta_common.css Added Paths: ----------- trunk/extensions/MobileFrontend/stylesheets/images/arrow-left-beta.png trunk/extensions/MobileFrontend/stylesheets/images/close-button-beta.png Modified: trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js =================================================================== --- trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js 2012-03-15 07:56:31 UTC (rev 113897) +++ trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js 2012-03-15 09:44:17 UTC (rev 113898) @@ -4,7 +4,6 @@ var apiUrl = '/api.php', timer = -1, typingDelay = 500, numResults = 15, term, search = document.getElementById( 'search' ), - sq = document.getElementById( 'sq' ), sb = document.getElementById( 'searchbox' ), content = document.getElementById( 'content' ), footer = document.getElementById( 'footer' ), @@ -39,7 +38,7 @@ search.onfocus = function() { var rrd, rrdD; sb = document.getElementById( 'searchbox' ); - sq = document.getElementById( 'sq' ); + header = document.getElementById( 'header' ); content = document.getElementById( 'content' ); footer = document.getElementById( 'footer' ); resetViewPort(); @@ -56,7 +55,7 @@ rrdD = document.createElement( 'div' ); rrdD.setAttribute( 'id', 'left-arrow' ); rrd.appendChild( rrdD ); - sq.insertBefore( rrd, sq.firstChild ); + header.insertBefore( rrd, header.firstChild ); } focused = true; } Modified: trunk/extensions/MobileFrontend/stylesheets/beta_common.css =================================================================== --- trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15 07:56:31 UTC (rev 113897) +++ trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15 09:44:17 UTC (rev 113898) @@ -19,24 +19,21 @@ } .clearlink { - background: url(images/close-button.png?v=1) no-repeat scroll 0 0 transparent; - background-position: center center; + top: 9px; + right: -18px; + width: 18px; + height: 20px; + background: url(images/close-button-beta.png) no-repeat scroll 0 0 transparent; + margin: 0; + display: block; + background-position: right center; + background-size: auto 12px; cursor: pointer; - zoom: 1; position: absolute; - right: 0.25em; - top: 10%; - margin: 1px; - height: 42px; - width: 42px; - margin-top: -6px; - z-index: 99; - border: 0px solid; - display: none; } html[dir="rtl"] .clearlink { - left: 0.25em; + left: 0; right: auto; } @@ -151,7 +148,6 @@ } .search_bar .search { - width: 90%; -webkit-appearance: none; border-top-width: 0px; border-right-width: 0px; @@ -161,6 +157,10 @@ outline-width: initial; outline-color: initial; padding: 0; + font-size: 1.2em; + padding-right: 16px; + width: 100%; + vertical-align: middle; /* don't use line height here as placeholder on ripple positions incorrectly */ } #search::-webkit-search-cancel-button { @@ -546,13 +546,14 @@ } #header { - margin: 8px 8px 0 8px; + margin: 0; position: relative; + border-bottom: solid 1px #CCC; } #content_wrapper { clear: both; - margin: 0 8px; + margin: 22px 22px; } #footer { @@ -562,51 +563,60 @@ #logo { position: absolute; - top: 4px; - left: 5px; + height: 22px; + cursor: pointer; + left: 22px; + top: 9px; + width: 35px; } +html[dir="rtl"] #searchbox { + padding: 0px 54px 0px 20px; +} + #zero-language-search.search_bar, #searchbox { width: auto; position: relative; - padding: 8px 32px 8px 44px; - border: 1px solid #cccccc; + padding: 0px 40px 0px 73px; /* right = width of #logo (35px) + 22px + 16px + left = width of close button + 22px */ -webkit-border-radius: 2px; -moz-border-radius: 2px; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } +.full-screen-search #searchbox { + padding: 0px 40px 0px 54px; /* right = width of #logo (18px) + 22px + 16px */ +} + #zero-language-search.search_bar { padding: 8px 32px 8px 0px; } -#searchbox #form { - padding-right: 34px; - width: 100%; - margin-bottom: 0; +html[dir="rtl"] #remove-results, +html[dir="rtl"] #logo { + right: 18px; + left: auto; } -html[dir="rtl"] #logo, .goButton { position: absolute; - right: 2px; + right: -18px; left: auto; -} - -.goButton { - top: 2px; + top: 0px; border: 0; - background: url(images/s.gif) no-repeat top left; + background: url(images/s.gif) no-repeat center left; background-size: 27px 25px; - height: 25px; + height: 40px; width: 27px; padding-bottom: 0; text-indent: -999px; + cursor: pointer; } html[dir="rtl"] .goButton { right: auto; - left: 2px; + left: 0; } #searchbox a, @@ -725,34 +735,27 @@ display: none; } -.full-screen-search #search { - height: 30px; /* height of #sq - 2px border */ - font-size: 1.2em; +#header, +#search, +#sq, +form, +#searchbox { + position: relative; + right: 0; + top: 0; + left: 0; + height: 40px; } -html[dir="rtl"] .full-screen-search #sq { - padding-left: 0; - padding-right: 44px; +#searchbox { + margin: 0 } .full-screen-search #sq { - position: relative; - padding-left: 44px; margin-right: 0; font-size: 16px; - border: none; - background-color: transparent; } -.full-screen-search #searchbox { - position: absolute; - width: 100%; - padding: 0; - top: 0; - left: 0; - border: none; -} - .full-screen-search #logo, .full-screen-search .goButton { display: none; @@ -798,16 +801,16 @@ #remove-results { display: none; position: absolute; - width: 40px; + width: 18px; height: 40px; text-align: center; line-height: 40px; - background: url(images/arrow-left.png) no-repeat scroll 0 0 transparent; - background-position: center center; + background: url(images/arrow-left-beta.png) no-repeat scroll 0 0 transparent; + background-position: left center; + background-size: auto 18px; cursor: pointer; - zoom: 1; - left: -3px; - top: 3px; + left: 24px; + top: 6px; /* (#header height - background height) / 2 */ margin: 1px; margin-top: -6px; z-index: 99; @@ -816,11 +819,6 @@ overflow: hidden; } -html[dir="rtl"] #remove-results { - right: 0px; - left: auto; -} - .full-screen-search #results { display: block !important; } @@ -829,14 +827,6 @@ display: block; } -.full-screen-search .clearlink { - background: url(images/close-button.png?v=1) no-repeat scroll 0 0 transparent; - top: 0px; - right: 0px; - height: 42px; - width: 42px; -} - .full-screen-search #nav { display: none !important; } Added: trunk/extensions/MobileFrontend/stylesheets/images/arrow-left-beta.png =================================================================== (Binary files differ) Property changes on: trunk/extensions/MobileFrontend/stylesheets/images/arrow-left-beta.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/extensions/MobileFrontend/stylesheets/images/close-button-beta.png =================================================================== (Binary files differ) Property changes on: trunk/extensions/MobileFrontend/stylesheets/images/close-button-beta.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream _______________________________________________ MediaWiki-CVS mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
