show ⌘ on Mac in both search button and search input field (#1449)

Ctrl -> ⌘ in both places
pydata · Sep 18, 2023 · eac1a87 · eac1a87
1 parent bd67c18
commit eac1a87
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
@@ -249,14 +249,30 @@ var addEventListenerForSearchKeyboard = () => {
   );
 };
 
+/**
+ * Find out if we're on a Mac
+ */
+var isMac = (navigator) => {
+  var platform = "";
+  if (
+    typeof navigator.userAgentData !== "undefined" &&
+    navigator.userAgentData != null
+  ) {
+    platform = navigator.userAgentData.platform;
+  } else if (typeof navigator.platform !== "undefined") {
+    platform = navigator.platform;
+  }
+  return /mac.?os/.test(platform.toLowerCase());
+};
+
 /**
  * Change the search hint to `meta key` if we are a Mac
  */
+
 var changeSearchShortcutKey = () => {
-  let forms = document.querySelectorAll("form.bd-search");
-  var isMac = window.navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-  if (isMac) {
-    forms.forEach(
+  let shortcuts = document.querySelectorAll(".search-button__kbd-shortcut");
+  if (isMac(window.navigator)) {
+    shortcuts.forEach(
       (f) => (f.querySelector("kbd.kbd-shortcut__modifier").innerText = "⌘")
     );
   }

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss
@@ -151,7 +151,7 @@
   }
 
   // The keyboard shotcut text
-  .search-button__kbd-shortcut {
+  .search-button__default-text {
     font-size: var(--bs-nav-link-font-size);
     font-weight: var(--bs-nav-link-font-weight);
     margin-right: 0.5em;

diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html
@@ -6,8 +6,8 @@
  document.write(`
    <button class="btn navbar-btn search-button-field search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
     <i class="fa-solid fa-magnifying-glass"></i>
-    <span class="search-button__kbd-shortcut">{{ _('Search') }}</span>
-    <span><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
+    <span class="search-button__default-text">{{ _('Search') }}</span>
+    <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
    </button>
  `);
  </script>