diff --git a/media/css/mkt/search.less b/media/css/mkt/search.less index 813d55f91d..ad43434eb2 100644 --- a/media/css/mkt/search.less +++ b/media/css/mkt/search.less @@ -5,7 +5,6 @@ width: 235px; max-width: 235px; margin: 0 12px 0 0; - top: 10px; float: right; } @@ -34,6 +33,7 @@ padding: 0 5px 0 30px; z-index: 2; width: 235px; + margin-top: 10px; &:focus { .box-shadow(0 1px 1px rgba(0, 0, 0, 0.06) inset, 0 0 8px rgba(80, 160, 220, 0.6)); diff --git a/media/css/mkt/suggestions.less b/media/css/mkt/suggestions.less index 11de72d539..3f72289b1a 100644 --- a/media/css/mkt/suggestions.less +++ b/media/css/mkt/suggestions.less @@ -4,44 +4,27 @@ .transition-property(~'bottom, opacity, visibility'); .transition-duration(.3s); font: 13px/26px @open-stack; - height: 0; + height: 100%; opacity: 0; - position: absolute; + position: fixed; right: -10px; bottom: 0px; left: 0; visibility: hidden; z-index: 4; - .width(3); + width: 100%; &.visible { opacity: 1; - bottom: -6px; + bottom: 5px; visibility: visible; } .wrap { - .border-radius(4px); - .box-shadow(0 0 4px rgba(0,0,0,.2), - 0 -2px 0 @faint-gray inset); - background: @white; + background: @bg @grain-src; position: absolute; - top: 0; + top: 55px; right: 0; left: 0; - &:before { - .box-shadow(1px 1px 0 rgba(255,255,255,.1) inset, - -1px -1px 0 @faint-gray); - .transform(~'rotate(45deg)'); - content: ""; - height: 12px; - position: absolute; - top: -5px; - left: 9px; - z-index: 5; - width: 12px; - } - } - .wrap:before, p a { - background: @faint-gray; + height: 100%; } ul { list-style: none; @@ -49,12 +32,16 @@ padding: 0; } a { - border-top: 1px solid @faint-gray; - border-bottom: 1px solid transparent; + border-top: 1px solid @white; + border-bottom: 1px solid #cbd0d3; display: block; position: relative; text-decoration: none; z-index: 6; + color: @text; + font-size: 19px; + background: @bg @grain-src; + line-height: 44px; &:after { clear: both; content: "."; @@ -63,24 +50,12 @@ visibility: hidden; } span { - .max-width(3); - background: no-repeat 5px 50%; - .background-size(20px auto); display: block; float: left; overflow: hidden; - padding: 0 5px 0 32px; + padding: 0 15px; text-overflow: ellipsis; white-space: nowrap; - &.cat { - background-image: url(../../img/icons/search-cat.png); - } - } - .subtitle { - color: @note-gray; - float: left; - font-size: 12px; - font-style: normal; } } li a:hover, @@ -95,27 +70,19 @@ border-color: @faint-gray transparent transparent transparent; color: @link; } - p { - font-size: 11px; - margin: 0; - a { - .border-radius(3px 3px 0 0); - border-top-width: 0; - background: @faint-gray; - border-bottom: 0; +} + +// Market header suggestions mode. (Searchatron Terrorize!) +#site-header.suggestions { + nav { + .home, .expand, .filter { + display: none; + } + .cancel { + display: block; } } - &.sel p a { - color: @note-gray; - } - p a, - p a.sel, - &.sel p a:hover { - color: @dark-gray; - } - li { - &:last-child a { - .border-radius(0 0 3px 3px); - } + #search, #search-q { + width: 235px; } } diff --git a/media/js/impala/site_suggestions.js b/media/js/impala/site_suggestions.js index e6cc0bc074..2e8438e05d 100644 --- a/media/js/impala/site_suggestions.js +++ b/media/js/impala/site_suggestions.js @@ -1,7 +1,8 @@ // Init site search suggestions and populate the suggestions container. (function() { + // AMO search init. $('#search #search-q').searchSuggestions($('#site-search-suggestions'), - processResults, true); + processResults, 'AMO'); function processResults(settings) { if (!settings || !settings.category) { @@ -28,7 +29,7 @@ url: escape_(item.url) || '#', icon: '', cls: '', - subtitle: '', + subtitle: '' }; if (item.icon) { d.icon = format( diff --git a/media/js/impala/suggestions.js b/media/js/impala/suggestions.js index 111039ab41..72f384da5c 100644 --- a/media/js/impala/suggestions.js +++ b/media/js/impala/suggestions.js @@ -20,10 +20,9 @@ $.fn.highlightTerm = function(val) { * processCallback - callback function that deals with the XHR call & populates - the $results element. * Optional: - * siteSearch - boolean of whether this is a site-search suggestions box which - - deals with multiple types of search results (apps/personas/etc) + * searchType - possible values are 'AMO', 'MKT' */ -$.fn.searchSuggestions = function($results, processCallback, siteSearch) { +$.fn.searchSuggestions = function($results, processCallback, searchType) { var $self = this, $form = $self.closest('form'); @@ -31,10 +30,11 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { return; } - if (siteSearch) { + var cat = $results.attr('data-cat'); + + if (searchType == 'AMO') { // Some base elements that we don't want to keep creating on the fly. - var cat = $results.attr('data-cat'), - msg; + var msg; if (cat == 'personas') { msg = gettext('Search personas for {0}'); } else if (cat == 'apps') { @@ -46,6 +46,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { '