bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

rustdoc: simplify search results CSS and DOM

Browse source 
There is a layout change caused by this commit, but it's subtle. You won't
notice it unless you're looking for it.
This commit is contained in:
Michael Howell 2022-11-04 12:34:24 -07:00
parent 6330c27ae2
commit b30c4d1932
3 changed files with 9 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/librustdoc/html/static/css/rustdoc.css
View file

@ -889,23 +889,17 @@ so that we can apply CSS-filters to change the arrow color in themes */
}
.search-results > a {
display: block;
display: flex;
/* A little margin ensures the browser's outlining of focused links has room to display. */
margin-left: 2px;
margin-right: 2px;
border-bottom: 1px solid var(--border-color);
gap: 1em;
}
.search-results > a > div {
display: flex;
flex-flow: row wrap;
}
.search-results .result-name, .search-results div.desc {
width: 50%;
}
.search-results .result-name {
padding-right: 1em;
flex: 1;
overflow: hidden;
}
.search-results a:hover,
@ -1867,7 +1861,8 @@ in storage.js
}
/* Display an alternating layout on tablets and phones */
.item-table, .item-row, .item-left, .item-right {
.item-table, .item-row, .item-left, .item-right,
.search-results > a, .search-results > a > div {
display: block;
}
@ -1875,9 +1870,6 @@ in storage.js
.search-results > a {
padding: 5px 0px;
}
.search-results .result-name, .search-results div.desc {
width: 100%;
}
.search-results div.desc, .item-right {
padding-left: 2em;
}

6
src/librustdoc/html/static/js/search.js
View file

@ -1593,7 +1593,6 @@ function initSearch(rawSearchIndex) {
link.className = "result-" + type;
link.href = item.href;
const wrapper = document.createElement("div");
const resultName = document.createElement("div");
resultName.className = "result-name";
@ -1614,7 +1613,7 @@ function initSearch(rawSearchIndex) {
resultName.insertAdjacentHTML(
"beforeend",
item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
wrapper.appendChild(resultName);
link.appendChild(resultName);
const description = document.createElement("div");
description.className = "desc";
@ -1622,8 +1621,7 @@ function initSearch(rawSearchIndex) {
spanDesc.insertAdjacentHTML("beforeend", item.desc);
description.appendChild(spanDesc);
wrapper.appendChild(description);
link.appendChild(wrapper);
link.appendChild(description);
output.appendChild(link);
});
} else if (query.error === null) {

2
src/test/rustdoc-gui/search-result-display.goml
View file

@ -7,7 +7,7 @@ press-key: 'Enter'
wait-for: "#crate-search"
// The width is returned by "getComputedStyle" which returns the exact number instead of the
// CSS rule which is "50%"...
assert-css: (".search-results div.desc", {"width": "318px"})
assert-css: (".search-results div.desc", {"width": "310px"})
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.