Move type name directly into the same DOM element

This commit is contained in:
Guillaume Gomez 2023-06-03 16:22:19 +02:00
parent f92cd67711
commit de85f7ff36
6 changed files with 5 additions and 31 deletions

View File

@ -190,7 +190,6 @@ h1, h2, h3, h4, h5, h6,
.mobile-topbar,
.search-input,
.search-results .result-name,
.search-results .type-kind,
.item-name > a,
.out-of-band,
span.since,
@ -871,10 +870,6 @@ so that we can apply CSS-filters to change the arrow color in themes */
}
.search-results > a > div {
flex: 3;
}
.search-results > a > div.type-kind {
flex: 1;
}
@ -1722,14 +1717,6 @@ in source-script.js
display: block;
}
.search-results > a > .type-kind {
display: inline-block;
}
.search-results > a > .result-name {
display: inline-block;
margin-left: 7px;
}
/* Display an alternating layout on tablets and phones */
.search-results > a {
padding: 5px 0px;

View File

@ -1892,14 +1892,9 @@ function initSearch(rawSearchIndex) {
resultName.appendChild(alias);
}
const typeDisplay = document.createElement("div");
typeDisplay.innerText = typeName;
typeDisplay.className = "type-kind";
link.appendChild(typeDisplay);
resultName.insertAdjacentHTML(
"beforeend",
item.displayPath + "<span class=\"" + type + "\">" + name + "</span>");
`${typeName} ${item.displayPath}<span class="${type}">${name}</span>`);
link.appendChild(resultName);
const description = document.createElement("div");

View File

@ -14,8 +14,7 @@ assert-attribute: (
"//a[@class='result-import']",
{"href": "../test_docs/index.html#reexport.TheStdReexport"},
)
assert-text: ("a.result-import .result-name", "test_docs::TheStdReexport")
assert-text: ("a.result-import .type-kind", "re-export")
assert-text: ("a.result-import .result-name", "re-export test_docs::TheStdReexport")
click: "//a[@class='result-import']"
// We check that it has the background modified thanks to the focus.
wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgb(73, 74, 61)"})
@ -27,7 +26,7 @@ write: (".search-input", "AliasForTheStdReexport")
wait-for: "//a[@class='result-import']"
assert-text: (
"a.result-import .result-name",
"AliasForTheStdReexport - see test_docs::TheStdReexport",
"AliasForTheStdReexport - see re-export test_docs::TheStdReexport",
)
// Same thing again, we click on it to ensure the background is once again set as expected.
click: "//a[@class='result-import']"

View File

@ -5,7 +5,6 @@ define-function: (
(result_kind, color, hover_color),
block {
assert-css: (".result-" + |result_kind| + " ." + |result_kind|, {"color": |color|}, ALL)
assert-css: (".result-" + |result_kind| + " .type-kind", {"color": |entry_color|})
assert-css: (
".result-" + |result_kind|,
{"color": |entry_color|, "background-color": |background_color|},
@ -19,7 +18,6 @@ define-function: (
".result-" + |result_kind| + ":hover ." + |result_kind|,
{"color": |hover_color|},
)
assert-css: (".result-" + |result_kind| + ":hover .type-kind", {"color": |hover_entry_color|})
move-cursor-to: ".search-input"
focus: ".result-" + |result_kind|
assert-css: (

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-size: (".search-results div.desc", {"width": 259})
assert-size: (".search-results div.desc", {"width": 310})
set-window-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.

View File

@ -5,9 +5,4 @@ write: (".search-input", "CookieMonster")
press-key: 'Enter'
// Waiting for the search results to appear...
wait-for: "#search-tabs"
// Note: The two next assert commands could be merged as one but readability would be
// less good.
//
// Checking that the CSS is displaying " (keyword)" in italic.
assert-text: (".result-keyword .type-kind", "keyword")
assert-text: (".result-keyword .result-name", "CookieMonster")
assert-text: (".result-keyword .result-name", "keyword CookieMonster")