custom.js: Rework dropdown layout

Author: adriendupuis

docs/css/search.css

@@ -22,14 +22,23 @@
     padding: 0;
 }
 
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main {
+    padding: 0 0 14px 0;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion:not(.algolia-docsearch-suggestion__main) {
+    padding: 14px 0;
+    border-top: 1px solid #E0E0E8;
+}
+
 .md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
     display: flex;
     align-items: center;
     font-size: 14px;
     line-height: 21px;
     letter-spacing: 0.12px;
     height: 40px;
-    margin: 16px 0 0 0;
+    margin: 16px 0;
     padding: 0 40px;
     border: 0;
     background-color: #F2F2F5;
@@ -45,29 +54,32 @@
     padding: 0;
 }
 
-.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
     float: none;
     width: 100%;
     text-align: left;
+    padding: 0;
+    margin: 0 40px;
+    color: var(--ibexa-dusk-black);
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title {
     font-size: 18px;
     line-height: 20px;
     letter-spacing: 0.12px;
-    margin: 24px 40px 4px;
-    padding: 0;
-    color: var(--ibexa-dusk-black);
     font-weight: 600;
 }
 
-.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
     float: none;
     width: 100%;
     text-align: left;
     color: #3B424A;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 21px;
     letter-spacing: 0.12px;
     padding: 0;
-    margin: 0 40px;
+    margin: 0px 40px 4px;
     display: flex;
     flex-direction: column-reverse;
 }
@@ -76,17 +88,18 @@
     display: none;
 }
 
-.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title {
-    font-size: 12px;
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--text {
+    color: #3B424A;
+    font-size: 14px;
     line-height: 21px;
     letter-spacing: 0.12px;
-    margin-top: 16px;
-    font-weight: 500;
+    margin-top: 10px;
+    padding-left: 10px;
+    border-left: 2px solid var(--mid-grey);
 }
 
 .md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .aa-suggestion-title-separator {
-    margin: 0 12px;
-    font-weight: 500;
+    padding: 0 10px;
 }
 
 .md-header .md-search .algolia-autocomplete .ds-dataset-1 {

docs/js/custom.js

@@ -144,12 +144,22 @@ $(document).ready(function() {
         debug: true,
     });
     search.autocomplete.on('autocomplete:updated', event => {
-        $('.ds-dropdown-menu .ds-suggestion').each(function() {
-            let category = $(this).find('.algolia-docsearch-suggestion--subcategory-column');
-            let content = $(this).find('.algolia-docsearch-suggestion--title');
-            //if (content.text().trim() == category.text().trim()) {
-            //    content.remove();
-            //}
+        const searchedText = $('.ais-SearchBox-input')[0].value.trim();
+        $('.algolia-docsearch-suggestion--wrapper').each((index, element) => {
+            const title = $(element).find('.algolia-docsearch-suggestion--title');
+            const category = $(element).find('.algolia-docsearch-suggestion--subcategory-column-text');
+            category.append('<span class="aa-suggestion-title-separator" aria-hidden="true">&gt;</span>');
+            if (title.find('.aa-suggestion-title-separator').length) {
+                $.each(title.contents(), (i, e) => {
+                    if (title.contents().length > 1) {
+                        $(e).appendTo(category);
+                    }
+                });
+            }
+            const displayedText = $(element).find('.algolia-docsearch-suggestion--text');
+            if (displayedText.length && displayedText.text() == searchedText+'…') {
+                displayedText.remove();
+            }
         });
     });