Rollup merge of #85551 - GuillaumeGomez:fix-search-result-overflow, r=jsha

Fix search results display

Fixes https://github.com/rust-lang/rust/issues/85544.

cc `@dns2utf8`

r? `@jsha`
This commit is contained in:
Guillaume Gomez 2021-05-24 18:53:35 +02:00 committed by GitHub
commit 30f4486ee4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 7 deletions

View File

@ -759,25 +759,40 @@ a {
.search-results.active {
display: block;
/* prevent overhanging tabs from moving the first result */
clear: both;
}
.search-results .desc {
.search-results .desc > span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.search-results a {
.search-results > a {
display: block;
width: 100%;
/* A little margin ensures the browser's outlining of focused links has room to display. */
margin-left: 2px;
margin-right: 2px;
display: block;
border-bottom: 1px solid #aaa3;
}
.result-name {
.search-results > a > div {
display: flex;
flex-flow: row wrap;
}
.search-results .result-name, .search-results div.desc, .search-results .result-description {
width: 50%;
float: left;
}
.search-results .result-name {
padding-right: 1em;
}
.search-results .result-name > span {
display: inline-block;
}
.result-name span.primitive::after {
@ -1733,6 +1748,18 @@ details.undocumented[open] > summary::before {
.search-container > div {
width: calc(100% - 32px);
}
/* Display an alternating layout on tablets and phones */
.search-results > a {
border-bottom: 1px solid #aaa9;
padding: 5px 0px;
}
.search-results .result-name, .search-results div.desc, .search-results .result-description {
width: 100%;
}
.search-results div.desc, .search-results .result-description {
padding-left: 2em;
}
}
@media print {

View File

@ -994,8 +994,8 @@ window.initSearch = function(rawSearchIndex) {
("<span class=\"alias\"><b>" + item.alias + " </b></span><span " +
"class=\"grey\"><i>&nbsp;- see&nbsp;</i></span>") : "") +
item.displayPath + "<span class=\"" + type + "\">" +
name + "</span></div><div>" +
"<span class=\"desc\">" + item.desc +
name + "</span></div><div class=\"desc\">" +
"<span>" + item.desc +
"&nbsp;</span></div></div></a>";
});
output += "</div>";

View File

@ -0,0 +1,12 @@
goto: file://|DOC_PATH|/test_docs/index.html
size: (900, 1000)
write: (".search-input", "test")
// Waiting for the search results to appear...
wait-for: "#titles"
// The width is returned by "getComputedStyle" which returns the exact number instead of the
// CSS rule which is "50%"...
assert: (".search-results div.desc", {"width": "320px"})
size: (600, 100)
// As counter-intuitive as it may seem, in this width, the width is "100%", which is why
// when computed it's larger.
assert: (".search-results div.desc", {"width": "570px"})