zig

commit d2014fe9713794f6cc0830301a1110d5e92d0ff0 (tree)
parent 51d7700c8c8e81706e0d0313d853b8e989f8a4da
Author: Ian Johnson <ian@ianjohnson.dev>
Date:   Sat,  9 Sep 2023 12:58:53 -0400

Autodoc: simplify search text on mobile

This prevents the placeholder text from spilling out of the search bar
on smaller screens.

Diffstat:
M
lib/docs/index.html
 | 
21
++++++++++++++++++---
M
lib/docs/main.js
 | 
3
++-

2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/lib/docs/index.html b/lib/docs/index.html
@@ -307,8 +307,14 @@
       #searchPlaceholder {
         position: absolute;
         pointer-events: none;
-        top: 5px;
-        left: 5px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+      }
+
+      #searchPlaceholderTextMobile {
+        display: none;
       }
 
       #dotsPopover:before {
@@ -797,6 +803,12 @@
           display: inline-block;
           min-width: calc(100% - 2.8rem);
         }
+        #searchPlaceholderText {
+          display: none;
+        }
+        #searchPlaceholderTextMobile {
+          display: inline;
+        }
       }
       .banner {
         background-color: orange;
@@ -994,7 +1006,10 @@
             </div>
         <div class="flex-right" style="padding-top: 0.5rem;overflow:visible;">
           <div class="search-container" style="position:relative;">
-            <span id="searchPlaceholder"><!-- populated by setPrefSlashSearch --></span>
+            <div id="searchPlaceholder">
+              <span id="searchPlaceholderText"><!-- populated by setPrefSlashSearch --></span>
+              <span id="searchPlaceholderTextMobile">Search</span>
+            </div>
             <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" disabled>
             <div id="dotsPopover">
               Use spaces instead of dots. See $resource for more info.
diff --git a/lib/docs/main.js b/lib/docs/main.js
@@ -80,6 +80,7 @@ var scrollHistory = {};
   const domSearchKeys = document.getElementById("searchKeys");
   const domPrefsModal = document.getElementById("prefsModal");
   const domSearchPlaceholder = document.getElementById("searchPlaceholder");
+  const domSearchPlaceholderText = document.getElementById("searchPlaceholderText");
   const sourceFileUrlTemplate = "src/{{mod}}/{{file}}.html#L{{line}}"
   const domLangRefLink = document.getElementById("langRefLink");
 
@@ -4739,7 +4740,7 @@ Happy writing!
     domPrefSlashSearch.checked = enabled;
     const searchKeys = enabled ? "<kbd>/</kbd> or <kbd>s</kbd>" : "<kbd>s</kbd>";
     domSearchKeys.innerHTML = searchKeys;
-    domSearchPlaceholder.innerHTML = searchKeys + " to search, <kbd>?</kbd> for more options";
+    domSearchPlaceholderText.innerHTML = searchKeys + " to search, <kbd>?</kbd> for more options";
   }
 })();