| author |  Ian Johnson <ian@ianjohnson.dev> 2023-09-09 12:58:53-04:00 |
| committer |  Loris Cro <kappaloris@gmail.com> 2023-09-09 19:48:18+02:00 |
| log | d2014fe9713794f6cc0830301a1110d5e92d0ff0 |
| tree | b3b5318157fb17843b75f6a94f3aae73e0fac7e3 |
| parent | 51d7700c8c8e81706e0d0313d853b8e989f8a4da |
Autodoc: simplify search text on mobile
This prevents the placeholder text from spilling out of the search bar
on smaller screens.2 files changed, 20 insertions(+), 4 deletions(-)
lib
lib/docs/index.html+18-3
| ... | @@ -307,8 +307,14 @@ | ... | @@ -307,8 +307,14 @@ |
| 307 | #searchPlaceholder { | 307 | #searchPlaceholder { |
| 308 | position: absolute; | 308 | position: absolute; |
| 309 | pointer-events: none; | 309 | pointer-events: none; |
| 310 | top: 5px; | 310 | height: 100%; |
| 311 | left: 5px; | 311 | display: flex; |
| 312 | align-items: center; | ||
| 313 | padding-left: 5px; | ||
| 314 | } | ||
| 315 | |||
| 316 | #searchPlaceholderTextMobile { | ||
| 317 | display: none; | ||
| 312 | } | 318 | } |
| 313 | 319 | ||
| 314 | #dotsPopover:before { | 320 | #dotsPopover:before { |
| ... | @@ -797,6 +803,12 @@ | ... | @@ -797,6 +803,12 @@ |
| 797 | display: inline-block; | 803 | display: inline-block; |
| 798 | min-width: calc(100% - 2.8rem); | 804 | min-width: calc(100% - 2.8rem); |
| 799 | } | 805 | } |
| 806 | #searchPlaceholderText { | ||
| 807 | display: none; | ||
| 808 | } | ||
| 809 | #searchPlaceholderTextMobile { | ||
| 810 | display: inline; | ||
| 811 | } | ||
| 800 | } | 812 | } |
| 801 | .banner { | 813 | .banner { |
| 802 | background-color: orange; | 814 | background-color: orange; |
| ... | @@ -994,7 +1006,10 @@ | ... | @@ -994,7 +1006,10 @@ |
| 994 | </div> | 1006 | </div> |
| 995 | <div class="flex-right" style="padding-top: 0.5rem;overflow:visible;"> | 1007 | <div class="flex-right" style="padding-top: 0.5rem;overflow:visible;"> |
| 996 | <div class="search-container" style="position:relative;"> | 1008 | <div class="search-container" style="position:relative;"> |
| 997 | <span id="searchPlaceholder"><!-- populated by setPrefSlashSearch --></span> | 1009 | <div id="searchPlaceholder"> |
| 1010 | <span id="searchPlaceholderText"><!-- populated by setPrefSlashSearch --></span> | ||
| 1011 | <span id="searchPlaceholderTextMobile">Search</span> | ||
| 1012 | </div> | ||
| 998 | <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" disabled> | 1013 | <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" disabled> |
| 999 | <div id="dotsPopover"> | 1014 | <div id="dotsPopover"> |
| 1000 | Use spaces instead of dots. See $resource for more info. | 1015 | Use spaces instead of dots. See $resource for more info. |
lib/docs/main.js+2-1
| ... | @@ -80,6 +80,7 @@ var scrollHistory = {}; | ... | @@ -80,6 +80,7 @@ var scrollHistory = {}; |
| 80 | const domSearchKeys = document.getElementById("searchKeys"); | 80 | const domSearchKeys = document.getElementById("searchKeys"); |
| 81 | const domPrefsModal = document.getElementById("prefsModal"); | 81 | const domPrefsModal = document.getElementById("prefsModal"); |
| 82 | const domSearchPlaceholder = document.getElementById("searchPlaceholder"); | 82 | const domSearchPlaceholder = document.getElementById("searchPlaceholder"); |
| 83 | const domSearchPlaceholderText = document.getElementById("searchPlaceholderText"); | ||
| 83 | const sourceFileUrlTemplate = "src/{{mod}}/{{file}}.html#L{{line}}" | 84 | const sourceFileUrlTemplate = "src/{{mod}}/{{file}}.html#L{{line}}" |
| 84 | const domLangRefLink = document.getElementById("langRefLink"); | 85 | const domLangRefLink = document.getElementById("langRefLink"); |
| 85 | 86 | ||
| ... | @@ -4739,7 +4740,7 @@ Happy writing! | ... | @@ -4739,7 +4740,7 @@ Happy writing! |
| 4739 | domPrefSlashSearch.checked = enabled; | 4740 | domPrefSlashSearch.checked = enabled; |
| 4740 | const searchKeys = enabled ? "<kbd>/</kbd> or <kbd>s</kbd>" : "<kbd>s</kbd>"; | 4741 | const searchKeys = enabled ? "<kbd>/</kbd> or <kbd>s</kbd>" : "<kbd>s</kbd>"; |
| 4741 | domSearchKeys.innerHTML = searchKeys; | 4742 | domSearchKeys.innerHTML = searchKeys; |
| 4742 | domSearchPlaceholder.innerHTML = searchKeys + " to search, <kbd>?</kbd> for more options"; | 4743 | domSearchPlaceholderText.innerHTML = searchKeys + " to search, <kbd>?</kbd> for more options"; |
| 4743 | } | 4744 | } |
| 4744 | })(); | 4745 | })(); |
| 4745 | 4746 |