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) { '

{msg}

' + ''); $results.html(base({'msg': msg})); + } else if (searchType == 'MKT') { + $results.html('
'); } // Control keys that shouldn't trigger new requests. @@ -56,7 +58,7 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { z.keys.LEFT, z.keys.UP, z.keys.RIGHT, z.keys.DOWN, z.keys.HOME, z.keys.END, z.keys.COMMAND, z.keys.WINDOWS_RIGHT, z.keys.COMMAND_RIGHT, - z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE, + z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE ]; var gestureKeys = [z.keys.ESCAPE, z.keys.UP, z.keys.DOWN]; @@ -80,6 +82,10 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { } $results.removeClass('visible sel'); $results.find('.sel').removeClass('sel'); + if (searchType == 'MKT') { + $('#site-header').removeClass('suggestions'); + $('#search-q').val(''); + } } function gestureHandler(e) { @@ -128,11 +134,11 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { var settings = { '$results': $results, '$form': $form, - 'searchTerm': val, + 'searchTerm': val }; // Optional data for callback. - if (siteSearch) { + if (searchType == 'AMO' || searchType == 'MKT') { settings['category'] = cat; } @@ -182,6 +188,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) { } }); + $results.bind('dismiss', dismissHandler); + $form.submit(function(e) { var $sel = $results.find('.sel'); if ($sel.length && $sel.eq(0).attr('href') != '#') { diff --git a/media/js/mkt/mkt_suggestions.js b/media/js/mkt/mkt_suggestions.js new file mode 100644 index 0000000000..209461f90a --- /dev/null +++ b/media/js/mkt/mkt_suggestions.js @@ -0,0 +1,41 @@ +// Init site search suggestions and populate the suggestions container. +(function() { + // MKT search init. + $('#search #search-q').searchSuggestions($('#site-search-suggestions'), + processResults, 'MKT'); + + function processResults(settings) { + if (!settings) { + return; + } + + var li_item = template( + '
  • {name}
  • ' + ); + + $.ajaxCache({ + url: settings['$results'].attr('data-src'), + data: settings['$form'].serialize() + '&cat=' + settings.category, + newItems: function(formdata, items) { + var eventName; + if (items !== undefined) { + var ul = ''; + $.each(items, function(i, item) { + var d = { + url: escape_(item.url) || '#' + }; + if (item.name) { + d.name = escape_(item.name); + // Append the item only if it has a name. + ul += li_item(d); + } + }); + settings['$results'].find('ul').html(ul); + } + settings['$results'].addClass('visible') + .trigger('resultsUpdated', [items]); + $('#site-header').addClass('suggestions'); + } + }); + } +})(); diff --git a/media/js/mkt/search.js b/media/js/mkt/search.js index 79e938658e..69de10f0a9 100644 --- a/media/js/mkt/search.js +++ b/media/js/mkt/search.js @@ -21,6 +21,10 @@ return false; }); + // Clear search field on 'cancel' search suggestions. + $('#site-header').on('click', '.header-button.cancel', _pd(function() { + $('#site-search-suggestions').trigger('dismiss'); + })); function selectMe($elm) { var $myUL = $elm.closest('ul'), diff --git a/mkt/asset_bundles.py b/mkt/asset_bundles.py index 90eb400870..da4f8e3bfc 100644 --- a/mkt/asset_bundles.py +++ b/mkt/asset_bundles.py @@ -244,7 +244,7 @@ JS = { # Search suggestions. 'js/impala/ajaxcache.js', 'js/impala/suggestions.js', - 'js/impala/site_suggestions.js', + 'js/mkt/mkt_suggestions.js', # Account settings. 'js/mkt/account.js', diff --git a/mkt/templates/mkt/header.html b/mkt/templates/mkt/header.html index 3b236cca3b..e82e802fb2 100644 --- a/mkt/templates/mkt/header.html +++ b/mkt/templates/mkt/header.html @@ -21,12 +21,12 @@ {% if search_form.cat.value() %} {{ search_form.cat }} {% endif %} -
    {% endblock %} {% endif %} +