Autodoc: simplify search text on mobile

This prevents the placeholder text from spilling out of the search bar
on smaller screens.
This commit is contained in:
Ian Johnson 2023-09-09 12:58:53 -04:00 committed by Loris Cro
parent 51d7700c8c
commit d2014fe971
2 changed files with 20 additions and 4 deletions

View File

@ -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.

View File

@ -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";
}
})();