https://www.mediawiki.org/wiki/Special:Code/MediaWiki/113900
Revision: 113900 Author: jdlrobson Date: 2012-03-15 10:00:36 +0000 (Thu, 15 Mar 2012) Log Message: ----------- style search results for full screen search this completes the first iteration of http://www.mediawiki.org/wiki/Mobile_design/Full-screen_search add box shadow to search box when active use css transitions to fade into full screen search move results element to under search form Modified Paths: -------------- trunk/extensions/MobileFrontend/stylesheets/beta_common.css trunk/extensions/MobileFrontend/templates/SearchTemplate.php Modified: trunk/extensions/MobileFrontend/stylesheets/beta_common.css =================================================================== --- trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15 09:47:47 UTC (rev 113899) +++ trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15 10:00:36 UTC (rev 113900) @@ -128,7 +128,6 @@ a.search-result-item { display: block; - margin-right: 2em; } /* TODO: support browsers which do not support data uris */ @@ -137,16 +136,6 @@ padding-right: 13px; } -#results { - display: none; - background-color: #ffffff; - border-top: none; - z-index: 2; - position: absolute; - left: 53px; - top: 35px; -} - .search_bar .search { -webkit-appearance: none; border-top-width: 0px; @@ -725,16 +714,46 @@ full screen search css */ .full-screen-search #header { + -webkit-box-shadow: 3px 1px 8px #333; + -moz-box-shadow: 3px 1px 8px #333; + -o-box-shadow: 3px 1px 8px #333; + box-shadow: 3px 1px 8px #333; + z-index: 2; margin: 0; + background-color: white; } -.full-screen-search #content, +#results, +#content_wrapper { + transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; +} + +#content_wrapper, +.full-screen-search #results { + opacity: 1; + height: auto; +} + +#results, +.full-screen-search #content_wrapper { + height: 0; + overflow: hidden; + opacity: 0; +} + .full-screen-search #footer, .full-screen-search #zero-rated-banner-red, .full-screen-search #zero-rated-banner { display: none; } +#search::-webkit-search-decoration { + display: none; +} + #header, #search, #sq, @@ -764,34 +783,32 @@ .full-screen-search #results { left: 0px; width: 100% !important; - min-height: 100%; - border-bottom: none; - border-left: none; - border-right: none; - border-top: 1px solid #A6A6A6; + max-height: 99999px; + border: none; + z-index: 1; background-color: #E6E6E6; - display: block; + position: relative; + opacity: 1; } .full-screen-search .suggestions-results { - line-height: 2.6em; padding: 0; position: relative; - border-bottom: solid 1px #999; + padding-bottom: 20px; font-size: 1.4em; cursor: pointer; margin: 0; + background-color: white; } .full-screen-search .suggestions-result { - line-height: 2.6em; + color: #666; border: none; - color: black; - margin: 0; - line-height: 2.6em; - padding: 0.01em 0.25em; position: relative; border-bottom: solid 1px #999999; + border-bottom: solid 1px #eee; + padding: 12px 56px; + font-size: 0.9em; } .full-screen-search .suggestions-result a:visited { @@ -819,10 +836,6 @@ overflow: hidden; } -.full-screen-search #results { - display: block !important; -} - .full-screen-search #remove-results { display: block; } Modified: trunk/extensions/MobileFrontend/templates/SearchTemplate.php =================================================================== --- trunk/extensions/MobileFrontend/templates/SearchTemplate.php 2012-03-15 09:47:47 UTC (rev 113899) +++ trunk/extensions/MobileFrontend/templates/SearchTemplate.php 2012-03-15 10:00:36 UTC (rev 113900) @@ -29,7 +29,6 @@ $languageSelectionDiv = '<div id="languageselection">' . $languageSelectionText . $languageSelection . '</div>'; $searchWebkitHtml = <<<HTML - {$openSearchResults} <div id='header'> <div id='searchbox' {$logoDisplayNone}> <img width="35" height="22" alt='Logo' id='logo' src='{$this->data['wgMobileFrontendLogo']}' {$logoDisplayNone} /> @@ -48,6 +47,7 @@ <a href="{$randomPageUrl}" id="randomButton" class="button">{$randomButton}</a> </div> </div> + {$openSearchResults} HTML; return $searchWebkitHtml; } _______________________________________________ MediaWiki-CVS mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
