Skip to content

Commit 7c3872e

Browse files
borsbors
committed
Auto merge of #85651 - dns2utf8:rustdoc_flexbox, r=GuillaumeGomez
rustdoc: staggered layout for module contents on mobile This PR adds the container `<item-table>` with its two children `<item-left>` and `<item-right>`. It uses grid-layout on desktop and flexbox on mobile to make better use of the available space. Additionally it allows to share parts of the CSS with the search function. * Demo: https://data.estada.ch/rustdoc-nightly_126561cb3_2021-05-25/generic_array/index.html * Related: #85540 ## Desktop ![grafik](https://user-images.githubusercontent.com/739070/119416896-2be62300-bce4-11eb-9555-792b859ab611.png) ## Mobile ![grafik](https://user-images.githubusercontent.com/739070/119416934-44563d80-bce4-11eb-9e77-70a72edcc487.png) r? `@GuillaumeGomez` `@jsha`
2 parents cbeda5c + 94c84bd commit 7c3872e

16 files changed

+129
-76
lines changed

‎src/librustdoc/html/render/mod.rs

+1
Original file line numberDiff line numberDiff line change
@@ -1694,6 +1694,7 @@ fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) {
16941694
write!(
16951695
buffer,
16961696
"<div class=\"block version\">\
1697+
<div class=\"narrow-helper\"></div>\
16971698
<p>Version {}</p>\
16981699
</div>",
16991700
Escape(version),

‎src/librustdoc/html/render/print_item.rs

+19-15
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ use crate::html::highlight;
2929
use crate::html::layout::Page;
3030
use crate::html::markdown::MarkdownSummaryLine;
3131

32+
const ITEM_TABLE_OPEN: &'static str = "<div class=\"item-table\">";
33+
const ITEM_TABLE_CLOSE: &'static str = "</div>";
34+
3235
pub(super) fn print_item(cx: &Context<'_>, item: &clean::Item, buf: &mut Buffer, page: &Page<'_>) {
3336
debug_assert!(!item.is_stripped());
3437
// Write the breadcrumb trail header for the top
@@ -263,14 +266,15 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
263266
curty = myty;
264267
} else if myty != curty {
265268
if curty.is_some() {
266-
w.write_str("</table>");
269+
w.write_str(ITEM_TABLE_CLOSE);
267270
}
268271
curty = myty;
269272
let (short, name) = item_ty_to_strs(myty.unwrap());
270273
write!(
271274
w,
272275
"<h2 id=\"{id}\" class=\"section-header\">\
273-
<a href=\"#{id}\">{name}</a></h2>\n<table>",
276+
<a href=\"#{id}\">{name}</a></h2>\n{}",
277+
ITEM_TABLE_OPEN,
274278
id = cx.derive_id(short.to_owned()),
275279
name = name
276280
);
@@ -283,14 +287,14 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
283287
match *src {
284288
Some(ref src) => write!(
285289
w,
286-
"<tr><td><code>{}extern crate {} as {};",
290+
"<div class=\"item-left\"><code>{}extern crate {} as {};",
287291
myitem.visibility.print_with_space(myitem.def_id, cx),
288292
anchor(myitem.def_id.expect_real(), &*src.as_str(), cx),
289293
myitem.name.as_ref().unwrap(),
290294
),
291295
None => write!(
292296
w,
293-
"<tr><td><code>{}extern crate {};",
297+
"<div class=\"item-left\"><code>{}extern crate {};",
294298
myitem.visibility.print_with_space(myitem.def_id, cx),
295299
anchor(
296300
myitem.def_id.expect_real(),
@@ -299,7 +303,7 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
299303
),
300304
),
301305
}
302-
w.write_str("</code></td></tr>");
306+
w.write_str("</code></div>");
303307
}
304308

305309
clean::ImportItem(ref import) => {
@@ -326,10 +330,10 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
326330

327331
write!(
328332
w,
329-
"<tr class=\"{stab}{add}import-item\">\
330-
<td><code>{vis}{imp}</code></td>\
331-
<td class=\"docblock-short\">{stab_tags}</td>\
332-
</tr>",
333+
"<div class=\"item-left {stab}{add}import-item\">\
334+
<code>{vis}{imp}</code>\
335+
</div>\
336+
<div class=\"item-right docblock-short\">{stab_tags}</div>",
333337
stab = stab.unwrap_or_default(),
334338
add = add,
335339
vis = myitem.visibility.print_with_space(myitem.def_id, cx),
@@ -358,11 +362,11 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
358362
let doc_value = myitem.doc_value().unwrap_or_default();
359363
write!(
360364
w,
361-
"<tr class=\"{stab}{add}module-item\">\
362-
<td><a class=\"{class}\" href=\"{href}\" \
363-
title=\"{title}\">{name}</a>{unsafety_flag}</td>\
364-
<td class=\"docblock-short\">{stab_tags}{docs}</td>\
365-
</tr>",
365+
"<div class=\"item-left {stab}{add}module-item\">\
366+
<a class=\"{class}\" href=\"{href}\" \
367+
title=\"{title}\">{name}</a>{unsafety_flag}\
368+
</div>\
369+
<div class=\"item-right docblock-short\">{stab_tags}{docs}</div>",
366370
name = *myitem.name.as_ref().unwrap(),
367371
stab_tags = extra_info_tags(myitem, item, cx.tcx()),
368372
docs = MarkdownSummaryLine(&doc_value, &myitem.links(cx)).into_string(),
@@ -382,7 +386,7 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
382386
}
383387

384388
if curty.is_some() {
385-
w.write_str("</table>");
389+
w.write_str(ITEM_TABLE_CLOSE);
386390
}
387391
}
388392

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

+48-2
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ div.impl-items > div {
169169
h1, h2, h3, h4,
170170
.sidebar, a.source, .search-input, .search-results .result-name,
171171
.content table td:first-child > a,
172+
.item-left > a,
172173
div.item-list .out-of-band, span.since,
173174
#source-sidebar, #sidebar-toggle,
174175
details.rustdoc-toggle > summary::before,
@@ -710,6 +711,25 @@ a {
710711

711712
.block a.current.crate { font-weight: 500; }
712713

714+
.item-table {
715+
display: grid;
716+
column-gap: 1.2rem;
717+
row-gap: 0.0rem;
718+
grid-template-columns: auto 1fr;
719+
/* align content left */
720+
justify-items: start;
721+
}
722+
723+
.item-left, .item-right {
724+
display: block;
725+
}
726+
.item-left {
727+
grid-column: 1;
728+
}
729+
.item-right {
730+
grid-column: 2;
731+
}
732+
713733
.search-container {
714734
position: relative;
715735
}
@@ -1599,9 +1619,25 @@ details.undocumented[open] > summary::before {
15991619
}
16001620

16011621
.sidebar > .block.version {
1622+
overflow: hidden;
16021623
border-bottom: none;
1603-
margin-top: 12px;
16041624
margin-bottom: 0;
1625+
height: 100%;
1626+
padding-left: 12px;
1627+
}
1628+
.sidebar > .block.version > div.narrow-helper {
1629+
float: left;
1630+
width: 1px;
1631+
height: 100%;
1632+
}
1633+
.sidebar > .block.version > p {
1634+
/* hide Version text if too narrow */
1635+
margin: 0;
1636+
min-width: 55px;
1637+
/* vertically center */
1638+
display: flex;
1639+
align-items: center;
1640+
height: 100%;
16051641
}
16061642

16071643
nav.sub {
@@ -1737,6 +1773,16 @@ details.undocumented[open] > summary::before {
17371773
#help-button {
17381774
display: none;
17391775
}
1776+
1777+
/* Display an alternating layout on tablets and phones */
1778+
.item-table {
1779+
display: flex;
1780+
flex-flow: column wrap;
1781+
}
1782+
.item-left, .item-right {
1783+
width: 100%;
1784+
}
1785+
17401786
.search-container > div {
17411787
width: calc(100% - 32px);
17421788
}
@@ -1749,7 +1795,7 @@ details.undocumented[open] > summary::before {
17491795
.search-results .result-name, .search-results div.desc, .search-results .result-description {
17501796
width: 100%;
17511797
}
1752-
.search-results div.desc, .search-results .result-description {
1798+
.search-results div.desc, .search-results .result-description, .item-right {
17531799
padding-left: 2em;
17541800
}
17551801
}

‎src/test/rustdoc-gui/sidebar.goml

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ assert-text: (".sidebar-elems > .items > ul > li:nth-child(4)", "Traits")
1313
assert-text: (".sidebar-elems > .items > ul > li:nth-child(5)", "Functions")
1414
assert-text: (".sidebar-elems > .items > ul > li:nth-child(6)", "Type Definitions")
1515
assert-text: (".sidebar-elems > .items > ul > li:nth-child(7)", "Keywords")
16-
assert-text: ("#structs + table td > a", "Foo")
17-
click: "#structs + table td > a"
16+
assert-text: ("#structs + .item-table .item-left > a", "Foo")
17+
click: "#structs + .item-table .item-left > a"
1818

1919
// PAGE: struct.Foo.html
2020
assert-count: (".sidebar .location", 2)
@@ -35,8 +35,8 @@ assert-text: (".sidebar-elems > .items > ul > li:nth-child(2)", "Structs")
3535
assert-text: (".sidebar-elems > .items > ul > li:nth-child(3)", "Traits")
3636
assert-text: (".sidebar-elems > .items > ul > li:nth-child(4)", "Functions")
3737
assert-text: (".sidebar-elems > .items > ul > li:nth-child(5)", "Type Definitions")
38-
assert-text: ("#functions + table td > a", "foobar")
39-
click: "#functions + table td > a"
38+
assert-text: ("#functions + .item-table .item-left > a", "foobar")
39+
click: "#functions + .item-table .item-left > a"
4040

4141
// PAGE: fn.foobar.html
4242
// In items containing no items (like functions or constants) and in modules, we have one
@@ -57,4 +57,4 @@ assert-text: (".sidebar > .location", "Module sub_sub_module")
5757
// We check that we don't have the crate list.
5858
assert-false: ".sidebar-elems > .crate"
5959
assert-text: (".sidebar-elems > .items > ul > li:nth-child(1)", "Functions")
60-
assert-text: ("#functions + table td > a", "foo")
60+
assert-text: ("#functions + .item-table .item-left > a", "foo")

‎src/test/rustdoc/deprecated.rs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
// @has deprecated/index.html '//*[@class="docblock-short"]/span[@class="stab deprecated"]' \
1+
// @has deprecated/index.html '//*[@class="item-right docblock-short"]/span[@class="stab deprecated"]' \
22
// 'Deprecated'
3-
// @has - '//*[@class="docblock-short"]' 'Deprecated docs'
3+
// @has - '//*[@class="item-right docblock-short"]' 'Deprecated docs'
44

55
// @has deprecated/struct.S.html '//*[@class="stab deprecated"]' \
66
// 'Deprecated since 1.0.0: text'
77
/// Deprecated docs
88
#[deprecated(since = "1.0.0", note = "text")]
99
pub struct S;
1010

11-
// @matches deprecated/index.html '//*[@class="docblock-short"]' '^Docs'
11+
// @matches deprecated/index.html '//*[@class="item-right docblock-short"]' '^Docs'
1212
/// Docs
1313
pub struct T;
1414

‎src/test/rustdoc/doc-cfg.rs

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ pub struct Portable;
1212
// @has doc_cfg/unix_only/index.html \
1313
// '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
1414
// 'This is supported on Unix only.'
15-
// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\AARM\Z'
15+
// @matches - '//*[@class="item-right docblock-short"]//*[@class="stab portability"]' '\AARM\Z'
1616
// @count - '//*[@class="stab portability"]' 2
1717
#[doc(cfg(unix))]
1818
pub mod unix_only {
@@ -42,7 +42,7 @@ pub mod unix_only {
4242
// @has doc_cfg/wasi_only/index.html \
4343
// '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
4444
// 'This is supported on WASI only.'
45-
// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\AWebAssembly\Z'
45+
// @matches - '//*[@class="item-right docblock-short"]//*[@class="stab portability"]' '\AWebAssembly\Z'
4646
// @count - '//*[@class="stab portability"]' 2
4747
#[doc(cfg(target_os = "wasi"))]
4848
pub mod wasi_only {
@@ -74,7 +74,7 @@ pub mod wasi_only {
7474

7575
// the portability header is different on the module view versus the full view
7676
// @has doc_cfg/index.html
77-
// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\Aavx\Z'
77+
// @matches - '//*[@class="item-right docblock-short"]//*[@class="stab portability"]' '\Aavx\Z'
7878

7979
// @has doc_cfg/fn.uses_target_feature.html
8080
// @has - '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \

‎src/test/rustdoc/duplicate-cfg.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
#![feature(doc_cfg)]
33

44
// @has 'foo/index.html'
5-
// @matches '-' '//*[@class="module-item"]//*[@class="stab portability"]' '^sync$'
6-
// @has '-' '//*[@class="module-item"]//*[@class="stab portability"]/@title' 'This is supported on crate feature `sync` only'
5+
// @matches '-' '//*[@class="item-right docblock-short"]//*[@class="stab portability"]' '^sync$'
6+
// @has '-' '//*[@class="item-right docblock-short"]//*[@class="stab portability"]/@title' 'This is supported on crate feature `sync` only'
77

88
// @has 'foo/struct.Foo.html'
99
// @has '-' '//*[@class="stab portability"]' 'sync'

‎src/test/rustdoc/inline_cross/macros.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
extern crate macros;
99

10-
// @has foo/index.html '//*[@class="docblock-short"]/span[@class="stab deprecated"]' Deprecated
11-
// @has - '//*[@class="docblock-short"]/span[@class="stab unstable"]' Experimental
10+
// @has foo/index.html '//*[@class="item-right docblock-short"]/span[@class="stab deprecated"]' Deprecated
11+
// @has - '//*[@class="item-right docblock-short"]/span[@class="stab unstable"]' Experimental
1212

1313
// @has foo/macro.my_macro.html
1414
// @has - '//*[@class="docblock"]' 'docs for my_macro'

‎src/test/rustdoc/internal.rs

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22

33
// Check that the unstable marker is not added for "rustc_private".
44

5-
// @!matches internal/index.html '//*[@class="docblock-short"]/span[@class="stab unstable"]'
6-
// @!matches internal/index.html '//*[@class="docblock-short"]/span[@class="stab internal"]'
7-
// @matches - '//*[@class="docblock-short"]' 'Docs'
5+
// @!matches internal/index.html \
6+
// '//*[@class="item-right docblock-short"]/span[@class="stab unstable"]'
7+
// @!matches internal/index.html \
8+
// '//*[@class="item-right docblock-short"]/span[@class="stab internal"]'
9+
// @matches - '//*[@class="item-right docblock-short"]' 'Docs'
810

911
// @!has internal/struct.S.html '//*[@class="stab unstable"]'
1012
// @!has internal/struct.S.html '//*[@class="stab internal"]'

‎src/test/rustdoc/issue-32374.rs

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
#![feature(staged_api)]
2-
#![doc(issue_tracker_base_url = "http://issue_url/")]
2+
#![doc(issue_tracker_base_url = "https://issue_url/")]
33

44
#![unstable(feature="test", issue = "32374")]
55

6-
// @matches issue_32374/index.html '//*[@class="docblock-short"]/span[@class="stab deprecated"]' \
6+
// @matches issue_32374/index.html '//*[@class="item-right docblock-short"]/span[@class="stab deprecated"]' \
77
// 'Deprecated'
8-
// @matches issue_32374/index.html '//*[@class="docblock-short"]/span[@class="stab unstable"]' \
8+
// @matches issue_32374/index.html '//*[@class="item-right docblock-short"]/span[@class="stab unstable"]' \
99
// 'Experimental'
10-
// @matches issue_32374/index.html '//*[@class="docblock-short"]/text()' 'Docs'
10+
// @matches issue_32374/index.html '//*[@class="item-right docblock-short"]/text()' 'Docs'
1111

1212
// @has issue_32374/struct.T.html '//*[@class="stab deprecated"]' \
1313
// '👎 Deprecated since 1.0.0: text'
14-
// @has - '<code>test</code>&nbsp;<a href="http://issue_url/32374">#32374</a>'
14+
// @has - '<code>test</code>&nbsp;<a href="https://issue_url/32374">#32374</a>'
1515
// @matches issue_32374/struct.T.html '//*[@class="stab unstable"]' \
1616
// '🔬 This is a nightly-only experimental API. \(test\s#32374\)$'
1717
/// Docs

‎src/test/rustdoc/issue-46377.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
// @has 'issue_46377/index.html' '//*[@class="docblock-short"]' 'Check out this struct!'
1+
// @has 'issue_46377/index.html' '//*[@class="item-right docblock-short"]' 'Check out this struct!'
22
/// # Check out this struct!
33
pub struct SomeStruct;

‎src/test/rustdoc/issue-55364.rs

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ pub mod subone {
2929
// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
3030
// @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
3131
// Though there should be such links later
32-
// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.foo.html"]' 'foo'
33-
// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.bar.html"]' 'bar'
32+
// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.foo.html"]' 'foo'
33+
// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-left module-item"]/a[@class="fn"][@href="fn.bar.html"]' 'bar'
3434
/// See either [foo] or [bar].
3535
pub mod subtwo {
3636

@@ -68,8 +68,8 @@ pub mod subthree {
6868
// Next we go *deeper* - In order to ensure it's not just "this or parent"
6969
// we test `crate::` and a `super::super::...` chain
7070
// @has issue_55364/subfour/subfive/subsix/subseven/subeight/index.html
71-
// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td[@class="docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
72-
// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td[@class="docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
71+
// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
72+
// @has - '//section[@id="main"]/div[@class="item-table"]//div[@class="item-right docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
7373
pub mod subfour {
7474
pub mod subfive {
7575
pub mod subsix {

‎src/test/rustdoc/reexport-check.rs

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
extern crate reexport_check;
55

66
// @!has 'foo/index.html' '//code' 'pub use self::i32;'
7-
// @has 'foo/index.html' '//tr[@class="deprecated module-item"]' 'i32'
7+
// @has 'foo/index.html' '//div[@class="item-left deprecated module-item"]' 'i32'
88
// @has 'foo/i32/index.html'
99
#[allow(deprecated, deprecated_in_future)]
1010
pub use std::i32;
1111
// @!has 'foo/index.html' '//code' 'pub use self::string::String;'
12-
// @has 'foo/index.html' '//tr[@class="module-item"]' 'String'
12+
// @has 'foo/index.html' '//div[@class="item-left module-item"]' 'String'
1313
pub use std::string::String;
1414

15-
// @has 'foo/index.html' '//td[@class="docblock-short"]' 'Docs in original'
15+
// @has 'foo/index.html' '//div[@class="item-right docblock-short"]' 'Docs in original'
1616
// this is a no-op, but shows what happens if there's an attribute that isn't a doc-comment
1717
#[doc(inline)]
1818
pub use reexport_check::S;

‎src/test/rustdoc/short-docblock-codeblock.rs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
#![crate_name = "foo"]
22

3-
// @has foo/index.html '//*[@class="module-item"]//td[@class="docblock-short"]' ""
4-
// @!has foo/index.html '//*[@id="module-item"]//td[@class="docblock-short"]' "Some text."
5-
// @!has foo/index.html '//*[@id="module-item"]//td[@class="docblock-short"]' "let x = 12;"
3+
// @has foo/index.html '//*[@class="item-right docblock-short"]' ""
4+
// @!has foo/index.html '//*[@class="item-right docblock-short"]' "Some text."
5+
// @!has foo/index.html '//*[@class="item-right docblock-short"]' "let x = 12;"
66

77
/// ```
88
/// let x = 12;

0 commit comments

Comments
 (0)