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
-