Commit d2014fe971

Ian Johnson <ian@ianjohnson.dev>
2023-09-09 18:58:53
Autodoc: simplify search text on mobile
This prevents the placeholder text from spilling out of the search bar on smaller screens.
1 parent 51d7700
Changed files (2)
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.
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";
   }
 })();