From ceefee34fede426e81777c86ac3f117205ffb782 Mon Sep 17 00:00:00 2001 From: Rushan Date: Mon, 7 Nov 2022 21:00:28 +0400 Subject: [PATCH] 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 Screenshot 2022-11-04 at 17 39 05 --- source/_static/js/instantSearch.js | 74 +++++++++++++--------- source/_static/scss/includes/_nav.scss | 30 ++++++++- source/_static/scss/includes/_search.scss | 54 ++++++++-------- source/_static/scss/includes/_theme.scss | 1 + source/_templates/platform-navigation.html | 2 +- 5 files changed, 101 insertions(+), 60 deletions(-) diff --git a/source/_static/js/instantSearch.js b/source/_static/js/instantSearch.js index 68a0136d..3e9504a9 100644 --- a/source/_static/js/instantSearch.js +++ b/source/_static/js/instantSearch.js @@ -30,6 +30,15 @@ window.addEventListener("DOMContentLoaded", () => { `, }; + // Template for empty search results + function noResultTemplate(query) { + return `
+ ${icons.noResult}
+ No results have been found for ${query}.
+ Please rephrase your query! +
`; + } + // 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: `
- ${icons.noResult}
- No results have been found for {{ query }}.
- Please rephrase your query! -
`, + empty: function (data) { + return data.query !== "" ? noResultTemplate(data.query) : ""; + }, item: function (data) { var returnString; var docUrl; @@ -272,18 +280,30 @@ 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 function closeSearchModal() { const searchResetEl = document.querySelector(".search__reset"); - + setTimeout(() => { searchResetEl.click(); }); @@ -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", `${metaKey}`); + }); } }); diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index d76c60f9..a3224a58 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -461,6 +461,7 @@ .search-toggle { margin-left: auto; + margin-right: -0.5rem; position: relative; z-index: 2; @@ -524,4 +525,31 @@ height: 100%; pointer-events: none; } -} \ No newline at end of file +} + +.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); + } + } +} diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index fa4e12cc..232c6014 100644 --- a/source/_static/scss/includes/_search.scss +++ b/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; diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 6e68f141..6db42a93 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/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 diff --git a/source/_templates/platform-navigation.html b/source/_templates/platform-navigation.html index 38246935..dfc5541c 100644 --- a/source/_templates/platform-navigation.html +++ b/source/_templates/platform-navigation.html @@ -31,7 +31,7 @@ Windows -