Skip to content

Commit

Permalink
rustdoc: simplify search results CSS and DOM
Browse files Browse the repository at this point in the history
There is a layout change caused by this commit, but it's subtle. You won't
notice it unless you're looking for it.
  • Loading branch information
notriddle committed Nov 4, 2022
1 parent 6330c27 commit b30c4d1
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 19 deletions.
20 changes: 6 additions & 14 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -1867,17 +1861,15 @@ 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;
}

/* Display an alternating layout on tablets and phones */
.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;
}
Expand Down
6 changes: 2 additions & 4 deletions src/librustdoc/html/static/js/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -1614,16 +1613,15 @@ 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";
const spanDesc = document.createElement("span");
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) {
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/search-result-display.goml
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit b30c4d1

Please sign in to comment.