Implement Desktop and Mobile version with gridlayout

* implement sans-serif rust-lang#85621

Author: dns2utf8

src/librustdoc/html/render/print_item.rs

@@ -263,14 +263,14 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
             curty = myty;
         } else if myty != curty {
             if curty.is_some() {
-                w.write_str("</table>");
+                w.write_str("</item-table>");
             }
             curty = myty;
             let (short, name) = item_ty_to_strs(myty.unwrap());
             write!(
                 w,
                 "<h2 id=\"{id}\" class=\"section-header\">\
-                       <a href=\"#{id}\">{name}</a></h2>\n<table>",
+                       <a href=\"#{id}\">{name}</a></h2>\n<item-table>",
                 id = cx.derive_id(short.to_owned()),
                 name = name
             );
@@ -283,14 +283,14 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
                 match *src {
                     Some(ref src) => write!(
                         w,
-                        "<tr><td><code>{}extern crate {} as {};",
+                        "<item-left><code>{}extern crate {} as {};",
                         myitem.visibility.print_with_space(myitem.def_id, cx),
                         anchor(myitem.def_id.expect_real(), &*src.as_str(), cx),
                         myitem.name.as_ref().unwrap(),
                     ),
                     None => write!(
                         w,
-                        "<tr><td><code>{}extern crate {};",
+                        "<item-left><code>{}extern crate {};",
                         myitem.visibility.print_with_space(myitem.def_id, cx),
                         anchor(
                             myitem.def_id.expect_real(),
@@ -299,7 +299,7 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
                         ),
                     ),
                 }
-                w.write_str("</code></td></tr>");
+                w.write_str("</code></item-left>\n");
             }
 
             clean::ImportItem(ref import) => {
@@ -326,10 +326,10 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
 
                 write!(
                     w,
-                    "<tr class=\"{stab}{add}import-item\">\
-                         <td><code>{vis}{imp}</code></td>\
-                         <td class=\"docblock-short\">{stab_tags}</td>\
-                     </tr>",
+                    "<item-left class=\"{stab}{add}import-item\">\
+                         <code>{vis}{imp}</code>\
+                     </item-left>\
+                     <item-right class=\"docblock-short\">{stab_tags}</item-right>\n",
                     stab = stab.unwrap_or_default(),
                     add = add,
                     vis = myitem.visibility.print_with_space(myitem.def_id, cx),
@@ -358,11 +358,10 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
                 let doc_value = myitem.doc_value().unwrap_or_default();
                 write!(
                     w,
-                    "<tr class=\"{stab}{add}module-item\">\
-                         <td><a class=\"{class}\" href=\"{href}\" \
-                             title=\"{title}\">{name}</a>{unsafety_flag}</td>\
-                         <td class=\"docblock-short\">{stab_tags}{docs}</td>\
-                     </tr>",
+                    "<item-left class=\"{stab}{add}module-item\">\
+                         <a class=\"{class}\" href=\"{href}\" \
+                             title=\"{title}\">{name}</a>{unsafety_flag}</item-left>\
+                     <item-right class=\"docblock-short\">{stab_tags}{docs}</item-right>\n",
                     name = *myitem.name.as_ref().unwrap(),
                     stab_tags = extra_info_tags(myitem, item, cx.tcx()),
                     docs = MarkdownSummaryLine(&doc_value, &myitem.links(cx)).into_string(),
@@ -382,7 +381,7 @@ fn item_module(w: &mut Buffer, cx: &Context<'_>, item: &clean::Item, items: &[cl
     }
 
     if curty.is_some() {
-        w.write_str("</table>");
+        w.write_str("</item-table>\n");
     }
 }
 

src/librustdoc/html/static/rustdoc.css

@@ -169,6 +169,7 @@ div.impl-items > div {
 h1, h2, h3, h4,
 .sidebar, a.source, .search-input, .search-results .result-name,
 .content table td:first-child > a,
+item-left > a,
 div.item-list .out-of-band, span.since,
 #source-sidebar, #sidebar-toggle,
 details.rustdoc-toggle > summary::before,
@@ -710,6 +711,25 @@ a {
 
 .block a.current.crate { font-weight: 500; }
 
+item-table {
+	display: grid;
+	column-gap: 1.2rem;
+	row-gap: 0.0rem;
+	grid-template-columns: auto 1fr;
+	/* align content left */
+	justify-items: start;
+}
+
+item-left, item-right {
+	display: block;
+}
+item-left {
+	grid-column: 1;
+}
+item-right {
+	grid-column: 2;
+}
+
 .search-container {
 	position: relative;
 }
@@ -1737,6 +1757,16 @@ details.undocumented[open] > summary::before {
 	#help-button {
 		display: none;
 	}
+
+	/* Display an alternating layout on tablets and phones */
+	item-table {
+		display: flex;
+		flex-flow: column wrap;
+	}
+	item-left, item-right {
+		width: 100%;
+	}
+
 	.search-container > div {
 		width: calc(100% - 32px);
 	}
@@ -1749,7 +1779,8 @@ details.undocumented[open] > summary::before {
 	.search-results .result-name, .search-results div.desc, .search-results .result-description {
 		width: 100%;
 	}
-	.search-results div.desc, .search-results .result-description {
+	/* Display second row of staggered layouts */
+	.search-results div.desc, .search-results .result-description, item-right {
 		padding-left: 2em;
 	}
 }

src/test/rustdoc/doc-cfg.rs

@@ -12,7 +12,7 @@ pub struct Portable;
 // @has doc_cfg/unix_only/index.html \
 //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //  'This is supported on Unix only.'
-// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\AARM\Z'
+// @matches - '//*[@class="docblock-short"]//*[@class="stab portability"]' '\AARM\Z'
 // @count - '//*[@class="stab portability"]' 2
 #[doc(cfg(unix))]
 pub mod unix_only {
@@ -42,7 +42,7 @@ pub mod unix_only {
 // @has doc_cfg/wasi_only/index.html \
 //  '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \
 //  'This is supported on WASI only.'
-// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\AWebAssembly\Z'
+// @matches - '//*[@class="docblock-short"]//*[@class="stab portability"]' '\AWebAssembly\Z'
 // @count - '//*[@class="stab portability"]' 2
 #[doc(cfg(target_os = "wasi"))]
 pub mod wasi_only {
@@ -74,7 +74,7 @@ pub mod wasi_only {
 
 // the portability header is different on the module view versus the full view
 // @has doc_cfg/index.html
-// @matches - '//*[@class="module-item"]//*[@class="stab portability"]' '\Aavx\Z'
+// @matches - '//*[@class="docblock-short"]//*[@class="stab portability"]' '\Aavx\Z'
 
 // @has doc_cfg/fn.uses_target_feature.html
 // @has - '//*[@id="main"]/*[@class="item-info"]/*[@class="stab portability"]' \

src/test/rustdoc/duplicate-cfg.rs

@@ -2,8 +2,8 @@
 #![feature(doc_cfg)]
 
 // @has 'foo/index.html'
-// @matches '-' '//*[@class="module-item"]//*[@class="stab portability"]' '^sync$'
-// @has '-' '//*[@class="module-item"]//*[@class="stab portability"]/@title' 'This is supported on crate feature `sync` only'
+// @matches '-' '//*[@class="docblock-short"]//*[@class="stab portability"]' '^sync$'
+// @has '-' '//*[@class="docblock-short"]//*[@class="stab portability"]/@title' 'This is supported on crate feature `sync` only'
 
 // @has 'foo/struct.Foo.html'
 // @has '-' '//*[@class="stab portability"]' 'sync'

src/test/rustdoc/issue-55364.rs

@@ -29,8 +29,8 @@ pub mod subone {
 // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.foo.html"]' 'foo'
 // @has - '//section[@id="main"]/details/div[@class="docblock"]//a[@href="../fn.bar.html"]' 'bar'
 // Though there should be such links later
-// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.foo.html"]' 'foo'
-// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td/a[@class="fn"][@href="fn.bar.html"]' 'bar'
+// @has - '//section[@id="main"]/item-table//item-left[@class="module-item"]/a[@class="fn"][@href="fn.foo.html"]' 'foo'
+// @has - '//section[@id="main"]/item-table//item-left[@class="module-item"]/a[@class="fn"][@href="fn.bar.html"]' 'bar'
 /// See either [foo] or [bar].
 pub mod subtwo {
 
@@ -68,8 +68,8 @@ pub mod subthree {
 // Next we go *deeper* - In order to ensure it's not just "this or parent"
 // we test `crate::` and a `super::super::...` chain
 // @has issue_55364/subfour/subfive/subsix/subseven/subeight/index.html
-// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td[@class="docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
-// @has - '//section[@id="main"]/table//tr[@class="module-item"]/td[@class="docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
+// @has - '//section[@id="main"]/item-table//item-right[@class="docblock-short"]//a[@href="../../../../../subone/fn.foo.html"]' 'other foo'
+// @has - '//section[@id="main"]/item-table//item-right[@class="docblock-short"]//a[@href="../../../../../subtwo/fn.bar.html"]' 'other bar'
 pub mod subfour {
     pub mod subfive {
         pub mod subsix {

src/test/rustdoc/reexport-check.rs

@@ -4,15 +4,15 @@
 extern crate reexport_check;
 
 // @!has 'foo/index.html' '//code' 'pub use self::i32;'
-// @has 'foo/index.html' '//tr[@class="deprecated module-item"]' 'i32'
+// @has 'foo/index.html' '//item-left[@class="deprecated module-item"]' 'i32'
 // @has 'foo/i32/index.html'
 #[allow(deprecated, deprecated_in_future)]
 pub use std::i32;
 // @!has 'foo/index.html' '//code' 'pub use self::string::String;'
-// @has 'foo/index.html' '//tr[@class="module-item"]' 'String'
+// @has 'foo/index.html' '//item-left[@class="module-item"]' 'String'
 pub use std::string::String;
 
-// @has 'foo/index.html' '//td[@class="docblock-short"]' 'Docs in original'
+// @has 'foo/index.html' '//item-right[@class="docblock-short"]' 'Docs in original'
 // this is a no-op, but shows what happens if there's an attribute that isn't a doc-comment
 #[doc(inline)]
 pub use reexport_check::S;

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

@@ -1,8 +1,8 @@
 #![crate_name = "foo"]
 
-// @has foo/index.html '//*[@class="module-item"]//td[@class="docblock-short"]' ""
-// @!has foo/index.html '//*[@id="module-item"]//td[@class="docblock-short"]' "Some text."
-// @!has foo/index.html '//*[@id="module-item"]//td[@class="docblock-short"]' "let x = 12;"
+// @has foo/index.html '//*[@class="module-item"]//following-sibling::item-right[@class="docblock-short"]' ""
+// @!has foo/index.html '//*[@id="module-item"]//following-sibling::item-right[@class="docblock-short"]' "Some text."
+// @!has foo/index.html '//*[@id="module-item"]//following-sibling::item-right[@class="docblock-short"]' "let x = 12;"
 
 /// ```
 /// let x = 12;