Skip to content

Commit b30c4d1

Browse files
committed
rustdoc: simplify search results CSS and DOM
There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.
1 parent 6330c27 commit b30c4d1

File tree

3 files changed

+9
-19
lines changed

3 files changed

+9
-19
lines changed

src/librustdoc/html/static/css/rustdoc.css

+6-14
Original file line numberDiff line numberDiff line change
@@ -889,23 +889,17 @@ so that we can apply CSS-filters to change the arrow color in themes */
889889
}
890890

891891
.search-results > a {
892-
display: block;
892+
display: flex;
893893
/* A little margin ensures the browser's outlining of focused links has room to display. */
894894
margin-left: 2px;
895895
margin-right: 2px;
896896
border-bottom: 1px solid var(--border-color);
897+
gap: 1em;
897898
}
898899

899900
.search-results > a > div {
900-
display: flex;
901-
flex-flow: row wrap;
902-
}
903-
904-
.search-results .result-name, .search-results div.desc {
905-
width: 50%;
906-
}
907-
.search-results .result-name {
908-
padding-right: 1em;
901+
flex: 1;
902+
overflow: hidden;
909903
}
910904

911905
.search-results a:hover,
@@ -1867,17 +1861,15 @@ in storage.js
18671861
}
18681862

18691863
/* Display an alternating layout on tablets and phones */
1870-
.item-table, .item-row, .item-left, .item-right {
1864+
.item-table, .item-row, .item-left, .item-right,
1865+
.search-results > a, .search-results > a > div {
18711866
display: block;
18721867
}
18731868

18741869
/* Display an alternating layout on tablets and phones */
18751870
.search-results > a {
18761871
padding: 5px 0px;
18771872
}
1878-
.search-results .result-name, .search-results div.desc {
1879-
width: 100%;
1880-
}
18811873
.search-results div.desc, .item-right {
18821874
padding-left: 2em;
18831875
}

src/librustdoc/html/static/js/search.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1593,7 +1593,6 @@ function initSearch(rawSearchIndex) {
15931593
link.className = "result-" + type;
15941594
link.href = item.href;
15951595

1596-
const wrapper = document.createElement("div");
15971596
const resultName = document.createElement("div");
15981597
resultName.className = "result-name";
15991598

@@ -1614,16 +1613,15 @@ function initSearch(rawSearchIndex) {
16141613
resultName.insertAdjacentHTML(
16151614
"beforeend",
16161615
item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
1617-
wrapper.appendChild(resultName);
1616+
link.appendChild(resultName);
16181617

16191618
const description = document.createElement("div");
16201619
description.className = "desc";
16211620
const spanDesc = document.createElement("span");
16221621
spanDesc.insertAdjacentHTML("beforeend", item.desc);
16231622

16241623
description.appendChild(spanDesc);
1625-
wrapper.appendChild(description);
1626-
link.appendChild(wrapper);
1624+
link.appendChild(description);
16271625
output.appendChild(link);
16281626
});
16291627
} else if (query.error === null) {

src/test/rustdoc-gui/search-result-display.goml

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ press-key: 'Enter'
77
wait-for: "#crate-search"
88
// The width is returned by "getComputedStyle" which returns the exact number instead of the
99
// CSS rule which is "50%"...
10-
assert-css: (".search-results div.desc", {"width": "318px"})
10+
assert-css: (".search-results div.desc", {"width": "310px"})
1111
size: (600, 100)
1212
// As counter-intuitive as it may seem, in this width, the width is "100%", which is why
1313
// when computed it's larger.

0 commit comments

Comments
 (0)