mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rollup merge of #103164 - notriddle:notriddle/media-min-width, r=GuillaumeGomez

Browse Source 
rustdoc: remove CSS `@media (min-width: 701px)`

The two rules within it can and should be done without the separate media query:

  * There ain't no rule saying a viewport can't be `700.5px` wide, since hardware pixels can be finer than CSS pixels.

    <details><summary>Screenshot</summary>

    ![image](https://user-images.githubusercontent.com/1593513/196283804-e946fbe3-d914-4819-ba2d-b4a6a07f190a.png)

    </details>

  * The rule for the first example-wrap child should probably apply on mobile.

    <details><summary>Screenshots</summary>

    ## Before

    ![rustdoc-before](https://user-images.githubusercontent.com/1593513/196282813-88b861c7-7b05-4de5-a421-914396f86a04.png)

    ## After

    ![rustdoc-after](https://user-images.githubusercontent.com/1593513/196282842-e57760c2-72d5-4dad-94f5-1d7175043326.png)

    </details>

  * The rule for the source sidebar is overriden by the mobile rule setting `max-width: 100vw`, so it can be merged with the rest of the styles.
This commit is contained in:
Matthias Krüger 2022-10-18 21:18:47 +02:00 committed by GitHub
commit 2ae06ca329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/librustdoc/html/static/css/rustdoc.css
View File

@ -437,6 +437,7 @@ img {
.source-sidebar-expanded .source .sidebar {
overflow-y: auto;
width: 300px;
}
.source-sidebar-expanded .source .sidebar > *:not(#sidebar-toggle) {
@ -1692,31 +1693,20 @@ details.rustdoc-toggle[open] > summary.hideme::after {
display: inline-block;
}
/* Media Queries */
/*
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY;
If you update this line, then you also need to update the line with the same warning
in storage.js plus the media query with (max-width: 700px)
*/
@media (min-width: 701px) {
/* In case there is no documentation before a code block, we need to add some margin at the top
to prevent an overlay between the "collapse toggle" and the information tooltip.
However, it's not needed with smaller screen width because the doc/code block is always put
"one line" below. */
.docblock > .example-wrap:first-child .tooltip {
/* In case there is no documentation before a code block, we need to add some margin at the top
to prevent an overlay between the "collapse toggle" and the information tooltip.
However, it's not needed with smaller screen width because the doc/code block is always put
"one line" below. */
.docblock > .example-wrap:first-child .tooltip {
margin-top: 16px;
}
.source-sidebar-expanded .source .sidebar {
width: 300px;
}
}
/* Media Queries */
/*
WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
If you update this line, then you also need to update the line with the same warning
in storage.js plus the media query with (min-width: 701px)
in storage.js
*/
@media (max-width: 700px) {
/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,

4
src/librustdoc/html/static/js/main.js
View File

@ -737,7 +737,7 @@ function loadCss(cssFileName) {
window.rustdocMobileScrollLock = function() {
const mobile_topbar = document.querySelector(".mobile-topbar");
if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) {
if (window.innerWidth <= window.RUSTDOC_MOBILE_BREAKPOINT) {
// This is to keep the scroll position on mobile.
oldSidebarScrollPosition = window.scrollY;
document.body.style.width = `${document.body.offsetWidth}px`;
@ -783,7 +783,7 @@ function loadCss(cssFileName) {
}
window.addEventListener("resize", () => {
if (window.innerWidth >= window.RUSTDOC_MOBILE_BREAKPOINT &&
if (window.innerWidth > window.RUSTDOC_MOBILE_BREAKPOINT &&
oldSidebarScrollPosition !== null) {
// If the user opens the sidebar in "mobile" mode, and then grows the browser window,
// we need to switch away from mobile mode and make the main content area scrollable.

4
src/librustdoc/html/static/js/storage.js
View File

@ -10,9 +10,9 @@ window.currentTheme = document.getElementById("themeStyle");
window.mainTheme = document.getElementById("mainThemeStyle");
// WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
// If you update this line, then you also need to update the two media queries with the same
// If you update this line, then you also need to update the media query with the same
// warning in rustdoc.css
window.RUSTDOC_MOBILE_BREAKPOINT = 701;
window.RUSTDOC_MOBILE_BREAKPOINT = 700;
const settingsDataset = (function() {
const settingsElement = document.getElementById("default-settings");

8
src/test/rustdoc-gui/sidebar-mobile-scroll.goml
View File

@ -1,12 +1,12 @@
// This test ensures that the mobile sidebar preserves scroll position.
goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
// Switching to "mobile view" by reducing the width to 600px.
size: (600, 600)
size: (700, 600)
assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
// Scroll down.
scroll-to: "//h2[@id='blanket-implementations']"
assert-window-property: {"pageYOffset": "651"}
assert-window-property: {"pageYOffset": "627"}
// Open the sidebar menu.
click: ".sidebar-menu-toggle"
@ -21,11 +21,11 @@ assert-window-property: {"pageYOffset": "0"}
// Close the sidebar menu. Make sure the scroll position gets restored.
click: ".sidebar-menu-toggle"
wait-for-css: (".sidebar", {"left": "-1000px"})
assert-window-property: {"pageYOffset": "651"}
assert-window-property: {"pageYOffset": "627"}
// Now test that scrollability returns when the browser window is just resized.
click: ".sidebar-menu-toggle"
wait-for-css: (".sidebar", {"left": "0px"})
assert-window-property: {"pageYOffset": "0"}
size: (900, 600)
assert-window-property: {"pageYOffset": "651"}
assert-window-property: {"pageYOffset": "627"}