From 69ca8e5f46dee8e7354b479a5ba722889a54d52b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my-Christophe=20Schermesser?= Date: Wed, 9 Dec 2015 14:44:26 +0100 Subject: [PATCH 1/3] Improve UI of the autocomplete search --- resources/javascript/searchbar.js | 45 +++++++++++++++++++++++++------ resources/stylesheets/base.css | 27 +++++++++++++++---- 2 files changed, 59 insertions(+), 13 deletions(-) diff --git a/resources/javascript/searchbar.js b/resources/javascript/searchbar.js index 2a74e439f2..3774ea843a 100644 --- a/resources/javascript/searchbar.js +++ b/resources/javascript/searchbar.js @@ -36,14 +36,40 @@ categories[suggestion._tags[0]].push(suggestion) }); - categories = $.map(Object.keys(categories).sort(), function(categoryName) { - var items = categories[categoryName]; - items[0].isCategoryHeader = true; - items[0].categoryName = capitalize(categoryName); + var categoriesWithSubCategories = {} + $.each(categories, function(categoryName, suggestions) { + var subCategories = {} + suggestions.forEach(function(suggestion) { + var highlight = suggestion._highlightResult || {}; + var title = (highlight.title || {}).value + title = title || suggestion.title + title = title || categoryName + subCategories[title] = subCategories[title] || [] + subCategories[title].push(suggestion) + }); + categoriesWithSubCategories[categoryName] = subCategories; + }); + + var suggestionsSorted = [] + Object.keys(categoriesWithSubCategories).sort().forEach(function(categoryName) { + var subCategories = categoriesWithSubCategories[categoryName]; + var firstInCategory = true; + Object.keys(subCategories).sort().forEach(function(subCategoryName) { + var items = subCategories[subCategoryName]; + items[0].isSubCategoryHeader = true; + items[0].subCategoryName = capitalize(subCategoryName); + + if(firstInCategory) { + items[0].isCategoryHeader = true; + items[0].categoryName = capitalize(categoryName); + firstInCategory = false; + } - return items; + suggestionsSorted = suggestionsSorted.concat(items); + }); }); - callback(categories); + + callback(suggestionsSorted); }); }, name: 'a', @@ -54,10 +80,14 @@ if(suggestion.isCategoryHeader) { html.push('
' + suggestion.categoryName + '
'); } + if(suggestion.isSubCategoryHeader) { + html.push('
' + suggestion.subCategoryName + '
'); + } else { + html.push('
 
'); + } var highlight = suggestion._highlightResult || {}; var snippet = suggestion._snippetResult || {}; - var title = highlight.title.value; var text = ''; for(var i = 0 ; i < ATTRIBUTES.length ; i++) { if(highlight[ATTRIBUTES[i]] !== undefined) { @@ -68,7 +98,6 @@ } html.push('
'); - html.push('
' + title + '
'); html.push('
' + text + '
'); html.push('
'); return html.join(' '); diff --git a/resources/stylesheets/base.css b/resources/stylesheets/base.css index 67d6c7e95f..dfcab9a1dc 100644 --- a/resources/stylesheets/base.css +++ b/resources/stylesheets/base.css @@ -246,8 +246,9 @@ div#pop-up-arrow { } .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor { - background-color: #B2D7FF; + background-color: #EEEEEE; } + .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em { font-weight: bold; font-style: normal; @@ -263,14 +264,30 @@ div#pop-up-arrow { cursor: default; } -.aa-suggestion .suggestion-content div { +.aa-suggestion > div:not(.suggestion-category) { display: table-cell; - padding: 5px 7px; + padding: 5px; } -.aa-suggestion .suggestion-content div:first-child { +.aa-suggestion.aa-cursor .suggestion-empty-subcategory, .aa-suggestion.aa-cursor .suggestion-subcategory { + background-color: white; +} + +.aa-suggestion .suggestion-empty-subcategory, .aa-suggestion .suggestion-subcategory { border-right: 2px solid #DE3423; - width: 180px; + width: 200px; + font-weight: 500; + z-index: 1000; + text-align: right; +} + +.aa-suggestion .suggestion-content { + width: 276px; + border-top: 1px #999 solid; +} + +.aa-suggestion .suggestion-category ~ .suggestion-content { + border-top: none; } .aa-dropdown-menu .branding-footer { From b656b5002137a03e89703ac087021f047b57d295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my-Christophe=20Schermesser?= Date: Wed, 9 Dec 2015 14:54:59 +0100 Subject: [PATCH 2/3] Search: Enlarge the autocomplete menu --- resources/stylesheets/base.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/stylesheets/base.css b/resources/stylesheets/base.css index dfcab9a1dc..f352625622 100644 --- a/resources/stylesheets/base.css +++ b/resources/stylesheets/base.css @@ -232,11 +232,11 @@ div#pop-up-arrow { } .algolia-autocomplete .aa-dropdown-menu { - width: 500px; + width: 550px; background-color: #fff; border: 1px solid #404040; margin-top: 2px; - margin-left: -319px; + margin-left: -369px; padding: 1px; } @@ -275,14 +275,14 @@ div#pop-up-arrow { .aa-suggestion .suggestion-empty-subcategory, .aa-suggestion .suggestion-subcategory { border-right: 2px solid #DE3423; - width: 200px; + width: 150px; font-weight: 500; z-index: 1000; text-align: right; } .aa-suggestion .suggestion-content { - width: 276px; + width: 376px; border-top: 1px #999 solid; } From 7b026d2f24e4ad7bcc37512f83156da166565bb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my-Christophe=20Schermesser?= Date: Wed, 9 Dec 2015 15:03:44 +0100 Subject: [PATCH 3/3] Search: Nicer handle of snippets --- resources/javascript/searchbar.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/resources/javascript/searchbar.js b/resources/javascript/searchbar.js index 3774ea843a..f006328964 100644 --- a/resources/javascript/searchbar.js +++ b/resources/javascript/searchbar.js @@ -92,7 +92,16 @@ for(var i = 0 ; i < ATTRIBUTES.length ; i++) { if(highlight[ATTRIBUTES[i]] !== undefined) { text = highlight[ATTRIBUTES[i]].value; - text = (snippet[ATTRIBUTES[i]] || {}).value || text; + var snippet = (snippet[ATTRIBUTES[i]] || {}).value + if(snippet) { + if(snippet.charAt(0) === snippet.charAt(0).toLowerCase()) { + snippet = "… " + snippet; + } + if(['.', '!', '?'].indexOf(snippet.charAt(snippet.length - 1)) === -1) { + snippet = snippet + " …"; + } + } + text = snippet || text; break; } }