Search UX enhancements (#629)

- Fix the visibility of search popup on read-mode (Prakash's comment)
- Add keyboard shortcut indicator on the read-mode search icon
<img width="254" alt="Screenshot 2022-11-04 at 17 39 05"
src="https://user-images.githubusercontent.com/13393018/199986826-e5e4ffe7-218f-4850-a0bf-867c1beb08b7.png">

source/_static/js/instantSearch.js

@@ -30,6 +30,15 @@ window.addEventListener("DOMContentLoaded", () => {
                 </svg>`,
   };
 
+  // Template for empty search results
+  function noResultTemplate(query) {
+    return `<div class="search__empty">
+              ${icons.noResult}</br>
+              No results have been found for <span>${query}</span>.</br>
+              Please rephrase your query!
+            </div>`;
+  }
+
   // Detect macOS
   function isMac() {
     return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
@@ -101,24 +110,25 @@ window.addEventListener("DOMContentLoaded", () => {
 
           // Clear the filters and select the active platform
           setTimeout(() => {
-            const activeFilterEl = document.querySelector(".search__filters__checkbox[value='" + activePlatform + "']");
+            const activeFilterEl = document.querySelector(
+              ".search__filters__checkbox[value='" + activePlatform + "']"
+            );
 
             if (activeFilterEl && !activeFilterEl.checked) {
               activeFilterEl.click();
             }
           }, 50);
         } else {
-          // Make search modal inactive
-          searchModalEl.classList.remove("search--focused");
-
           // Clear the filters
           clearRefinements();
         }
 
         // Clear the filters on x click
-        document.querySelector(".search__reset").addEventListener("click", () => {
-          clearRefinements();
-        });
+        document
+          .querySelector(".search__reset")
+          .addEventListener("click", () => {
+            clearRefinements("btn");
+          });
 
         // Fire the search
         search(query);
@@ -157,11 +167,9 @@ window.addEventListener("DOMContentLoaded", () => {
         item: "search__hits__item",
       },
       templates: {
-        empty: `<div>
-                      ${icons.noResult}</br>
-                      No results have been found for <span>{{ query }}</span>.</br>
-                      Please rephrase your query!
-                    </div>`,
+        empty: function (data) {
+          return data.query !== "" ? noResultTemplate(data.query) : "";
+        },
         item: function (data) {
           var returnString;
           var docUrl;
@@ -272,12 +280,24 @@ window.addEventListener("DOMContentLoaded", () => {
   ]);
 
   // Function to clear search field and filters
-  function clearRefinements() {
-    const filtersClearEl = document.querySelector("#search-clear .search-clear__btn");
+  function clearRefinements(trigger) {
+    const filtersClearEl = document.querySelector(
+      "#search-clear .search-clear__btn"
+    );
     filtersClearEl?.click();
 
-    root.classList.remove("locked");
-    searchModalEl.classList.remove("search--active", "search--focused");
+    const removeClasses = function () {
+      root.classList.remove("locked");
+      searchModalEl.classList.remove("search--active", "search--focused");
+    };
+
+    if (trigger === "btn") {
+      removeClasses();
+    } else {
+      if (!root.classList.contains("read-mode")) {
+        removeClasses();
+      }
+    }
   }
 
   // Function to close and reset the search modal
@@ -338,19 +358,13 @@ window.addEventListener("DOMContentLoaded", () => {
   // meta + k
   // --------------------------------------------------
   const searchEl = document.getElementById("search-box");
+  const searchToggleBtnEl = document.querySelector(".search-toggle--keyboard");
 
   if (searchEl) {
-    const metaKeyEl = document.createElement("i");
-    metaKeyEl.classList.add("search__meta-key");
+    var metaKey = isMac() ? "⌘K" : "Ctrl+K";
 
-    if (isMac) {
-      metaKeyEl.classList.add("macos");
-      metaKeyEl.innerHTML = "⌘K";
-    } else {
-      metaKeyEl.classList.add("non-macos");
-      metaKeyEl.innerHTML = "Ctrl K";
-    }
-
-    searchEl.appendChild(metaKeyEl);
+    [searchEl, searchToggleBtnEl].forEach((item) => {
+      item.insertAdjacentHTML("beforeend", `<i class="search-meta-key">${metaKey}</i>`);
+    });
   }
 });

source/_static/scss/includes/_nav.scss

@@ -461,6 +461,7 @@
 
     .search-toggle {
         margin-left: auto;
+		margin-right: -0.5rem;
 		position: relative;
 		z-index: 2;
         
@@ -525,3 +526,30 @@
 		pointer-events: none;
 	}
 }
+
+.search-toggle--keyboard {
+	height: 2.5rem;
+	width: 2.5rem;
+	padding: 0.2rem;
+	text-align: center;
+	line-height: 1;
+
+	.search-meta-key {
+		font-size: 0.6rem;
+		display: block;
+		border: 1px solid var(--is-meta-key-border-color);
+		border-radius: $border-radius-sm;
+		padding: 0.1rem 0.2rem;
+		margin: 0.15rem auto 0;
+		font-style: normal;
+		width: fit-content;
+		color: var(--text-muted-color);
+		transition: background-color 200ms;
+	}
+
+	&:hover {
+		.search-meta-key {
+			background-color: var(--is-search-bg);
+		}
+	}
+}

source/_static/scss/includes/_search.scss

@@ -42,15 +42,15 @@
 			&.search--active {
 				display: block;
 			}
+
+			.search-meta-key {
+				display: none;
+			}
 		}
 
 		.search__input {
 			height: 3.1rem;
 		}
-
-		.search__meta-key {
-			display: none;
-		}
 	}
 }
 
@@ -59,6 +59,18 @@
 	display: flex;
 	isolation: isolate;
 	position: relative;
+
+	.search-meta-key {
+		font-style: normal;
+		position: absolute;
+		top: 1rem;
+		right: 0.9rem;
+		pointer-events: none;
+		transition: opacity 300ms;
+		line-height: 1;
+		font-size: $font-size-xs;
+		color: var(--text-muted-color);
+	}
 }
 
 .search--active,
@@ -78,7 +90,7 @@
 		border-bottom-right-radius: 0;		
 	}
 
-	.search__meta-key {
+	.search-meta-key {
 		opacity: 0;
 	}
 }
@@ -96,9 +108,8 @@
 	z-index: 10;
 	flex-direction: column;
 	border-radius: 0 0 $border-radius-lg $border-radius-lg;
-	max-height: 23rem;
-	min-height: 15rem;
 	display: none;
+	max-height: 23rem;
 }
 
 .search__input {
@@ -315,11 +326,6 @@
 }
 
 .search__hits--empty {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
 	display: grid;
 	place-content: center;
 	text-align: center;
@@ -338,14 +344,19 @@
 	}
 }
 
+.search__empty {
+	padding: 2rem 1rem;
+}
+
 .search__powered-by {
 	padding: 0.75rem 1rem;
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	color: var(--text-muted-color);
-	font-size: $font-size-xs;
+	font-size: 0.65rem;
 	justify-content: flex-end;
 	transition: color 300ms;
+	float: right;
 
 	&:hover {
 		color: var(--text-color);
@@ -360,7 +371,7 @@
 	}
 
 	svg {
-		margin-left: -3.5rem;
+		margin-left: -3.2rem;
 
 		path {
 			fill: currentColor;
@@ -379,19 +390,6 @@
 	pointer-events: none;
 }
 
-.search__meta-key {
-	font-style: normal;
-	position: absolute;
-	top: 1rem;
-	right: 0.9rem;
-	pointer-events: none;
-	opacity: 100;
-	transition: opacity 300ms;
-	line-height: 1;
-	font-size: $font-size-xs;
-	color: var(--text-muted-color);
-}
-
 .search__loading {
 	position: absolute;
     top: 0.75rem;

source/_static/scss/includes/_theme.scss

@@ -122,6 +122,7 @@ $theme-properties: (
     --is-refine-list-border-color: $light-400 $dark-300,
     --is-hit-platform-border-color: #c5cad0 $dark-300,
     --is-loader-circle-stroke: #c2c8d1 $dark-300,
+    --is-meta-key-border-color: #c5cad0 $dark-400,
 );
 
 // Activate dark/light themes

source/_templates/platform-navigation.html

@@ -31,7 +31,7 @@
                 Windows
             </a>
 
-            <button type="button" class="icon search-toggle visible-rm">
+            <button type="button" class="icon search-toggle search-toggle--keyboard visible-rm">
                 {%- include "icons/search.html" %}
                 Search
             </button>