Coveo search links in the search UI (#3534)

* working on modifying the display of search results

* added product and version to search results dropdown, updated search attributes

* fixed result highlighting

* updated the sidebar toggle icon

* add links to coveo search in search results modal

* uncomment search ux js

assets/styles/layouts/_algolia-search-overrides.scss

@@ -6,19 +6,23 @@
     width: 74vw;
     max-width: 800px;
     background: $sidebar-search-bg;
+    background-color: $sidebar-search-bg;
+    border: none;
+    box-shadow: 2px 2px 10px $sidebar-search-shadow;
+    transition: background-color 0.2s;
+
 
     [class^=ds-dataset-] {
-      background-color: $sidebar-search-bg;
       border: none;
-      box-shadow: 2px 2px 10px $sidebar-search-shadow;
+      background: $sidebar-search-bg;
-      transition: background-color .2s;
+      background-color: $sidebar-search-bg;
     }
     &:before {
       display: none;
     }
 
     .ds-suggestions {
-      padding: 2rem;
+      padding: .5rem 2rem 2rem;
     }
   }
 
@@ -104,7 +108,11 @@
   }
 }
 
-// Search result version tags
+.algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results {
+  text-align: center;
+}
+
+////////////////////////// Search result version tags //////////////////////////
 .algolia-autocomplete .algolia-docsearch-suggestion .search-product-version {
   font-size: .8em;
   font-weight: $medium;
@@ -116,6 +124,70 @@
   display: none;
 }
 
+///////// CUSTOM ELEMENTS ADDED IN layouts/partials/footer/search.html /////////
+
+.search-all-content {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  text-align: right;
+
+  a {
+    color: $article-text;
+    opacity: .6;
+    text-decoration: none;
+    transition: opacity .2s;
+    &:hover{
+      opacity: 1;
+    }
+  }
+}
+
+.search-no-results {
+  padding: 2rem;
+  text-align: center;
+  font-size: 1.1rem;
+  color: rgba($article-text, .75);
+  font-style: italic;
+
+  a {
+    position: relative;
+    display: inline-block;
+    margin: .5rem .25rem .5rem 0;
+    padding: 0.85rem 1.5rem;
+    color: $article-btn-text !important;
+    border-radius: $radius;
+    font-size: 1.1rem;
+    font-weight: $medium;
+    font-style: normal;
+    text-decoration: none;
+    z-index: 1;
+    @include gradient($article-btn-gradient);
+
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: $radius;
+      @include gradient($article-btn-gradient-hover);
+      opacity: 0;
+      transition: opacity .2s;
+      z-index: -1;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/layouts/_sidebar-toggle.scss

@@ -34,11 +34,16 @@ $vertical-offset: -14px;
   }
 }
 
+.sidebar-toggle {
+  padding: 0.4rem 0.6rem;
+  width: 35px;
+  & > a {
+    font-size: 1rem;
+  }
+}
 
 .content-wrapper .sidebar-toggle {
   display: none;
-  padding: .4rem .6rem;
-  width: 35px;
   left: 0;
   background-color: $body-bg;
   border-radius: 0 $radius $radius 0;
@@ -51,14 +56,9 @@ $vertical-offset: -14px;
   }
   &:before { transform: rotateY(180deg); }
   &:after { transform: rotate(180deg); }
-  & > a {
-    font-size: 1rem;
-  }
 }
 
 .sidebar .sidebar-toggle {
-  padding: .4rem .6rem;
-  width: 30px;
   right: 0;
   background-color: $article-bg;
   border-radius: $radius 0 0 $radius;
@@ -69,9 +69,6 @@ $vertical-offset: -14px;
       </svg>");
     right: 0;
   }
-  & > a {
-    font-size: 1rem;
-  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////

layouts/partials/footer/search.html

@@ -65,5 +65,11 @@ docsearch({
       {{ end }}
     ]
   },
+  autocompleteOptions: {
+    templates: {
+      header: '<div class="search-all-content"><a href="https:\/\/support.influxdata.com" target="_blank">Search all InfluxData content <span class="icon-arrow-up-right"></span></a>',
+      empty: '<div class="search-no-results"><p>Not finding what you\'re looking for?</p> <a href="https:\/\/support.influxdata.com" target="_blank">Search all InfluxData content <span class="icon-arrow-up-right"></span></a></div>'
+    }
+  }
 });
 </script>