From 766de3a5e24bf436d74a69af652bd08f2f5a9755 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 14 May 2021 14:36:34 +0200 Subject: [PATCH 1/4] Fix toggle position on mobile --- src/librustdoc/html/static/rustdoc.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 1b7eff4604f5f..1d5ba618e5d5a 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1586,6 +1586,10 @@ h4 > .notable-traits { .docblock { margin-left: 12px; } + + details.rustdoc-toggle > summary.hideme::before { + left: -11px; + } } h3.notable { @@ -1697,6 +1701,9 @@ details.rustdoc-toggle > summary.hideme { cursor: pointer; } +details.rustdoc-toggle > summary, details.undocumented > summary { + list-style: none; +} details.rustdoc-toggle > summary::-webkit-details-marker, details.rustdoc-toggle > summary::marker, details.undocumented > summary::-webkit-details-marker, @@ -1763,7 +1770,7 @@ details.rustdoc-toggle[open] > summary.hideme > span { } details.rustdoc-toggle[open] > summary::before { - content: "[−]"; + content: "[-]"; display: inline; } From 0c02338a6034e10e7b0566b97beee3b7bd6e25d6 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 14 May 2021 19:43:08 +0200 Subject: [PATCH 2/4] Move @media rules at the end so they override the other rules --- src/librustdoc/html/static/rustdoc.css | 388 +++++++++++++------------ 1 file changed, 195 insertions(+), 193 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 1d5ba618e5d5a..405167dfd4af1 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1293,6 +1293,201 @@ h4 > .notable-traits { border-top: 1px solid; } + + +h3.notable { + margin: 0; + margin-bottom: 13px; + font-size: 19px; +} + +kbd { + display: inline-block; + padding: 3px 5px; + font: 15px monospace; + line-height: 10px; + vertical-align: middle; + border: solid 1px; + border-radius: 3px; + box-shadow: inset 0 -1px 0; + cursor: default; +} + +.hidden-by-impl-hider, +.hidden-by-usual-hider { + /* important because of conflicting rule for small screens */ + display: none !important; +} + +#implementations-list > h3 > span.in-band { + width: 100%; +} + +.table-display { + width: 100%; + border: 0; + border-collapse: collapse; + border-spacing: 0; + font-size: 16px; +} + +.table-display tr td:first-child { + padding-right: 0; +} + +.table-display tr td:last-child { + float: right; +} +.table-display .out-of-band { + position: relative; + font-size: 19px; + display: block; +} +#implementors-list > .impl-items .table-display .out-of-band { + font-size: 17px; +} + +.table-display td:hover .anchor { + display: block; + top: 2px; + left: -5px; +} + +#main > ul { + padding-left: 10px; +} +#main > ul > li { + list-style: none; +} + +.non-exhaustive { + margin-bottom: 1em; +} + +div.children { + padding-left: 27px; + display: none; +} +div.name { + cursor: pointer; + position: relative; + margin-left: 16px; +} +div.files > a { + display: block; + padding: 0 3px; +} +div.files > a:hover, div.name:hover { + background-color: #a14b4b; +} +div.name.expand + .children { + display: block; +} +div.name::before { + content: "\25B6"; + padding-left: 4px; + font-size: 0.7em; + position: absolute; + left: -16px; + top: 4px; +} +div.name.expand::before { + transform: rotate(90deg); + left: -15px; + top: 2px; +} + +/* The hideme class is used on summary tags that contain a span with + placeholder text shown only when the toggle is closed. For instance, + "Expand description" or "Show methods". */ +details.rustdoc-toggle > summary.hideme { + cursor: pointer; +} + +details.rustdoc-toggle > summary, details.undocumented > summary { + list-style: none; +} +details.rustdoc-toggle > summary::-webkit-details-marker, +details.rustdoc-toggle > summary::marker, +details.undocumented > summary::-webkit-details-marker, +details.undocumented > summary::marker { + display: none; +} + +details.rustdoc-toggle > summary.hideme > span { + margin-left: 9px; +} + +details.rustdoc-toggle > summary::before { + content: "[+]"; + font-weight: 300; + font-size: 0.8em; + letter-spacing: 1px; + cursor: pointer; +} + +details.rustdoc-toggle.top-doc > summary, +details.rustdoc-toggle.top-doc > summary::before, +details.rustdoc-toggle.non-exhaustive > summary, +details.rustdoc-toggle.non-exhaustive > summary::before { + font-family: 'Fira Sans'; + font-size: 16px; +} + +details.non-exhaustive { + margin-bottom: 8px; +} + +details.rustdoc-toggle > summary.hideme::before { + position: relative; +} + +details.rustdoc-toggle > summary:not(.hideme)::before { + position: absolute; + left: -23px; + top: initial; +} + +.impl-items > details.rustdoc-toggle > summary:not(.hideme)::before, +.undocumented > details.rustdoc-toggle > summary:not(.hideme)::before { + position: absolute; + top: 3px; + left: -2px; +} + +/* When a "hideme" summary is open and the "Expand description" or "Show + methods" text is hidden, we want the [-] toggle that remains to not + affect the layout of the items to its right. To do that, we use + absolute positioning. Note that we also set position: relative + on the parent
to make this work properly. */ +details.rustdoc-toggle[open] > summary.hideme { + position: absolute; +} + +details.rustdoc-toggle, details.undocumented { + position: relative; +} + +details.rustdoc-toggle[open] > summary.hideme > span { + display: none; +} + +details.rustdoc-toggle[open] > summary::before { + content: "[−]"; + display: inline; +} + +details.undocumented > summary::before { + content: "[+] Show hidden undocumented items"; + cursor: pointer; + font-size: 16px; + font-weight: 300; +} + +details.undocumented[open] > summary::before { + content: "[−] Hide undocumented items"; +} + /* Media Queries */ @media (min-width: 701px) { @@ -1591,196 +1786,3 @@ h4 > .notable-traits { left: -11px; } } - -h3.notable { - margin: 0; - margin-bottom: 13px; - font-size: 19px; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font: 15px monospace; - line-height: 10px; - vertical-align: middle; - border: solid 1px; - border-radius: 3px; - box-shadow: inset 0 -1px 0; - cursor: default; -} - -.hidden-by-impl-hider, -.hidden-by-usual-hider { - /* important because of conflicting rule for small screens */ - display: none !important; -} - -#implementations-list > h3 > span.in-band { - width: 100%; -} - -.table-display { - width: 100%; - border: 0; - border-collapse: collapse; - border-spacing: 0; - font-size: 16px; -} - -.table-display tr td:first-child { - padding-right: 0; -} - -.table-display tr td:last-child { - float: right; -} -.table-display .out-of-band { - position: relative; - font-size: 19px; - display: block; -} -#implementors-list > .impl-items .table-display .out-of-band { - font-size: 17px; -} - -.table-display td:hover .anchor { - display: block; - top: 2px; - left: -5px; -} - -#main > ul { - padding-left: 10px; -} -#main > ul > li { - list-style: none; -} - -.non-exhaustive { - margin-bottom: 1em; -} - -div.children { - padding-left: 27px; - display: none; -} -div.name { - cursor: pointer; - position: relative; - margin-left: 16px; -} -div.files > a { - display: block; - padding: 0 3px; -} -div.files > a:hover, div.name:hover { - background-color: #a14b4b; -} -div.name.expand + .children { - display: block; -} -div.name::before { - content: "\25B6"; - padding-left: 4px; - font-size: 0.7em; - position: absolute; - left: -16px; - top: 4px; -} -div.name.expand::before { - transform: rotate(90deg); - left: -15px; - top: 2px; -} - -/* The hideme class is used on summary tags that contain a span with - placeholder text shown only when the toggle is closed. For instance, - "Expand description" or "Show methods". */ -details.rustdoc-toggle > summary.hideme { - cursor: pointer; -} - -details.rustdoc-toggle > summary, details.undocumented > summary { - list-style: none; -} -details.rustdoc-toggle > summary::-webkit-details-marker, -details.rustdoc-toggle > summary::marker, -details.undocumented > summary::-webkit-details-marker, -details.undocumented > summary::marker { - display: none; -} - -details.rustdoc-toggle > summary.hideme > span { - margin-left: 9px; -} - -details.rustdoc-toggle > summary::before { - content: "[+]"; - font-weight: 300; - font-size: 0.8em; - letter-spacing: 1px; - cursor: pointer; -} - -details.rustdoc-toggle.top-doc > summary, -details.rustdoc-toggle.top-doc > summary::before, -details.rustdoc-toggle.non-exhaustive > summary, -details.rustdoc-toggle.non-exhaustive > summary::before { - font-family: 'Fira Sans'; - font-size: 16px; -} - -details.non-exhaustive { - margin-bottom: 8px; -} - -details.rustdoc-toggle > summary.hideme::before { - position: relative; -} - -details.rustdoc-toggle > summary:not(.hideme)::before { - position: absolute; - left: -23px; - top: initial; -} - -.impl-items > details.rustdoc-toggle > summary:not(.hideme)::before, -.undocumented > details.rustdoc-toggle > summary:not(.hideme)::before { - position: absolute; - top: 3px; - left: -2px; -} - -/* When a "hideme" summary is open and the "Expand description" or "Show - methods" text is hidden, we want the [-] toggle that remains to not - affect the layout of the items to its right. To do that, we use - absolute positioning. Note that we also set position: relative - on the parent
to make this work properly. */ -details.rustdoc-toggle[open] > summary.hideme { - position: absolute; -} - -details.rustdoc-toggle, details.undocumented { - position: relative; -} - -details.rustdoc-toggle[open] > summary.hideme > span { - display: none; -} - -details.rustdoc-toggle[open] > summary::before { - content: "[-]"; - display: inline; -} - -details.undocumented > summary::before { - content: "[+] Show hidden undocumented items"; - cursor: pointer; - font-size: 16px; - font-weight: 300; -} - -details.undocumented[open] > summary::before { - content: "[-] Hide undocumented items"; -} From 7eb95cd8e4a75598be54b24869541380e536ca55 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 14 May 2021 19:58:21 +0200 Subject: [PATCH 3/4] Unify toggle rules on smaller resolutions --- src/librustdoc/html/static/rustdoc.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 405167dfd4af1..4c8918ddb8cad 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1687,8 +1687,9 @@ details.undocumented[open] > summary::before { border-bottom: 1px solid; } - .item-list > details.rustdoc-toggle > summary:not(.hideme)::before { - left: -10px; + #main > details.rustdoc-toggle > summary::before, + #main > div > details.rustdoc-toggle > summary::before { + left: -11px; } #all-types { @@ -1781,8 +1782,4 @@ details.undocumented[open] > summary::before { .docblock { margin-left: 12px; } - - details.rustdoc-toggle > summary.hideme::before { - left: -11px; - } } From dfc8b6094e8dc96b8dcbde8d2d11e3a1cbab294a Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Fri, 14 May 2021 15:16:16 +0200 Subject: [PATCH 4/4] Add test for toggle on mobile size --- src/test/rustdoc-gui/toggle-docs-mobile.goml | 21 ++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/test/rustdoc-gui/toggle-docs-mobile.goml diff --git a/src/test/rustdoc-gui/toggle-docs-mobile.goml b/src/test/rustdoc-gui/toggle-docs-mobile.goml new file mode 100644 index 0000000000000..fcdfc0344db80 --- /dev/null +++ b/src/test/rustdoc-gui/toggle-docs-mobile.goml @@ -0,0 +1,21 @@ +goto: file://|DOC_PATH|/test_docs/struct.Foo.html +size: (433, 600) +assert: (".top-doc", "open", "") +click: (4, 280) // This is the position of the top doc comment toggle +assert-false: (".top-doc", "open", "") +click: (4, 280) +assert: (".top-doc", "open", "") +// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked. +click: (3, 280) +assert: (".top-doc", "open", "") + +// Now we do the same but with a little bigger width +size: (600, 600) +assert: (".top-doc", "open", "") +click: (4, 240) // New Y position since all search elements are back on one line. +assert-false: (".top-doc", "open", "") +click: (4, 240) +assert: (".top-doc", "open", "") +// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked. +click: (3, 240) +assert: (".top-doc", "open", "")