Rollup merge of #97249 - GuillaumeGomez:details-summary-fixes, r=notriddle

`<details>`/`<summary>` UI fixes

With images it's easier to understand:

![Screenshot from 2022-05-21 14-10-42](https://user-images.githubusercontent.com/3050060/169653038-9c58de67-589a-4986-a8ff-dbdddaf136a4.png)
![Screenshot from 2022-05-21 14-08-49](https://user-images.githubusercontent.com/3050060/169653042-56e87258-13fe-4f80-9858-4e15c318c3fb.png)

The headings in `<summary>` should not have bottom border so I removed it as well alongside the other fixes.

r? `@jsha`
This commit is contained in:
Guillaume Gomez 2022-07-01 23:39:07 +02:00 committed by GitHub
commit 194764fdc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 2 deletions

View File

@ -158,8 +158,8 @@ h1.fqn {
Underlines elsewhere in the documentation break up visual flow and tend to invert
section hierarchies. */
h2,
.top-doc h3,
.top-doc h4 {
.top-doc .docblock > h3,
.top-doc .docblock > h4 {
border-bottom: 1px solid;
}
h3.code-header {
@ -1681,6 +1681,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
content: "Collapse";
}
/* This is needed in docblocks to have the "▶" element to be on the same line. */
.docblock summary > * {
display: inline-block;
}
/* Media Queries */
@media (min-width: 701px) {

View File

@ -0,0 +1,23 @@
// This ensures that the `<details>`/`<summary>` elements are displayed as expected.
goto: file://|DOC_PATH|/test_docs/details/struct.Details.html
show-text: true
local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
reload:
// We first check that the headers in the `.top-doc` doc block still have their
// bottom border.
assert-text: (".top-doc .docblock > h3", "Hello")
assert-css: (
".top-doc .docblock > h3",
{"border-bottom": "1px solid rgb(221, 221, 221)"},
)
// We now check that the `<summary>` doesn't have a bottom border and has the correct display.
assert-css: (
".top-doc .docblock summary h4",
{"border-bottom": "0px none rgb(221, 221, 221)"},
)
// This allows to ensure that summary is on one line only!
assert-property: (".top-doc .docblock summary h4", {"offsetHeight": "33"})
assert-css: (".top-doc .docblock summary h4", {"margin-top": "15px", "margin-bottom": "5px"})
// So `33 + 15 + 5` == `53`
assert-property: (".top-doc .docblock summary", {"offsetHeight": "53"})

View File

@ -277,3 +277,15 @@ pub use macros::*;
#[doc(alias = "AliasForTheStdReexport")]
pub use ::std as TheStdReexport;
pub mod details {
/// We check the appearance of the `<details>`/`<summary>` in here.
///
/// ## Hello
///
/// <details>
/// <summary><h4>I'm a summary</h4></summary>
/// <div>I'm the content of the details!</div>
/// </details>
pub struct Details;
}