Add back the column

This commit is contained in:
Michael Howell 2023-12-18 12:11:14 -07:00
parent 859bbc5def
commit bd14fb68da
8 changed files with 33 additions and 65 deletions

View file

@ -11,7 +11,7 @@ rules.
#copy-path, #sidebar-button, .sidebar-resizer { #copy-path, #sidebar-button, .sidebar-resizer {
/* It requires JS to work so no need to display it in this case. */ /* It requires JS to work so no need to display it in this case. */
display: none; display: none !important;
} }
nav.sub { nav.sub {

View file

@ -391,6 +391,7 @@ img {
.rustdoc.src .sidebar { .rustdoc.src .sidebar {
flex-basis: 50px; flex-basis: 50px;
width: 50px;
border-right: 1px solid; border-right: 1px solid;
overflow-x: hidden; overflow-x: hidden;
/* The sidebar is by default hidden */ /* The sidebar is by default hidden */
@ -414,14 +415,14 @@ img {
} }
.rustdoc.src .sidebar-resizer { .rustdoc.src .sidebar-resizer {
/* src pages have separate closed flag */ /* when closed, place resizer glow on top of the normal src sidebar border (no need to
display: none; worry about sidebar) */
left: 49px;
} }
.src-sidebar-expanded .src .sidebar-resizer { .src-sidebar-expanded .src .sidebar-resizer {
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer /* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
to right of it */ to right of it */
display: block;
left: var(--src-sidebar-width); left: var(--src-sidebar-width);
} }
@ -437,7 +438,7 @@ img {
} }
.sidebar-resizing .sidebar { .sidebar-resizing .sidebar {
position: fixed !important; position: fixed;
z-index: 100; z-index: 100;
} }
.sidebar-resizing > body { .sidebar-resizing > body {
@ -491,21 +492,20 @@ img {
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
} }
.src .sidebar { .src .sidebar > * {
position: absolute; visibility: hidden;
top: 0;
bottom: 0;
left: -1000px;
} }
.src-sidebar-expanded .src .sidebar { .src-sidebar-expanded .src .sidebar {
position: sticky;
left: 0;
overflow-y: auto; overflow-y: auto;
flex-basis: var(--src-sidebar-width); flex-basis: var(--src-sidebar-width);
width: var(--src-sidebar-width); width: var(--src-sidebar-width);
} }
.src-sidebar-expanded .src .sidebar > * {
visibility: visible;
}
#all-types { #all-types {
margin-top: 1em; margin-top: 1em;
} }
@ -1561,15 +1561,9 @@ a.tooltip:hover::after {
z-index: 1; z-index: 1;
} }
.src #sidebar-button { .src #sidebar-button {
left: 12px; left: 8px;
z-index: 101; z-index: 101;
} }
.src .search-form {
margin-left: 40px;
}
.src-sidebar-expanded .src .search-form {
margin-left: 0;
}
#settings-menu > a, #help-button > a, #sidebar-button > a { #settings-menu > a, #help-button > a, #sidebar-button > a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1879,6 +1873,9 @@ in src-script.js and main.js
height: 100vh; height: 100vh;
border: 0; border: 0;
} }
.src .search-form {
margin-left: 40px;
}
.sidebar.shown, .sidebar.shown,
.src-sidebar-expanded .src .sidebar, .src-sidebar-expanded .src .sidebar,

View file

@ -2,7 +2,7 @@
/* global srcIndex */ /* global srcIndex */
// Local js definitions: // Local js definitions:
/* global addClass, getCurrentValue, onEachLazy, removeClass, browserSupportsHistoryApi */ /* global addClass, onEachLazy, removeClass, browserSupportsHistoryApi */
/* global updateLocalStorage, getVar */ /* global updateLocalStorage, getVar */
"use strict"; "use strict";

View file

@ -11,13 +11,3 @@ set-window-size: (400, 600)
// offset = size + margin // offset = size + margin
assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45}) assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35}) assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})
go-to: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html"
set-window-size: (1280, 1024)
assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60})
set-window-size: (400, 600)
// 43 because 35px + 8px of margin
assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 43})

View file

@ -11,12 +11,6 @@ define-function: (
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
reload: reload:
assert-css: (".rust-logo", {"filter": |filter|}) assert-css: (".rust-logo", {"filter": |filter|})
// Going to the source code page.
go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
// Changing theme (since it's local files, the local storage works by folder).
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
reload:
assert-css: (".rust-logo", {"filter": |filter|})
// Now we check that the non-rust logos don't have a CSS filter set. // Now we check that the non-rust logos don't have a CSS filter set.
go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
// Changing theme on the new page (again...). // Changing theme on the new page (again...).
@ -31,10 +25,6 @@ define-function: (
assert-false: ".rust-logo" assert-false: ".rust-logo"
assert-false: ".logo-container" assert-false: ".logo-container"
assert-false: ".sub-logo-container" assert-false: ".sub-logo-container"
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
assert-false: ".rust-logo"
assert-false: ".logo-container"
assert-false: ".sub-logo-container"
}, },
) )

View file

@ -9,10 +9,10 @@ assert-css: ("#sidebar-button", {"display": "none"})
javascript: true javascript: true
reload: reload:
wait-for: "#src-sidebar" wait-for: "#src-sidebar"
assert-css: ("#src-sidebar", {"position": "absolute", "left": "-1000px"}) assert-css: (".src .sidebar > *", {"visibility": "hidden"})
// Let's expand the sidebar now. // Let's expand the sidebar now.
click: "#src-sidebar" click: "#sidebar-button"
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"}) wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
// We now check that opening the sidebar and clicking a link will leave it open. // We now check that opening the sidebar and clicking a link will leave it open.
// The behavior here on desktop is different than the behavior on mobile, // The behavior here on desktop is different than the behavior on mobile,
@ -32,12 +32,11 @@ define-function: (
"check-colors", "check-colors",
( (
theme, color, color_hover, background, background_hover, background_toggle, theme, color, color_hover, background, background_hover, background_toggle,
background_toggle_hover,
), ),
block { block {
set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
reload: reload:
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"}) wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
assert-css: ( assert-css: (
"#src-sidebar details[open] > .files a.selected", "#src-sidebar details[open] > .files a.selected",
{"color": |color_hover|, "background-color": |background|}, {"color": |color_hover|, "background-color": |background|},
@ -108,6 +107,7 @@ call-function: ("check-colors", {
"color_hover": "#000", "color_hover": "#000",
"background": "#fff", "background": "#fff",
"background_hover": "#e0e0e0", "background_hover": "#e0e0e0",
"background_toggle": "rgba(0, 0, 0, 0)",
}) })
call-function: ("check-colors", { call-function: ("check-colors", {
"theme": "dark", "theme": "dark",
@ -115,6 +115,7 @@ call-function: ("check-colors", {
"color_hover": "#ddd", "color_hover": "#ddd",
"background": "#333", "background": "#333",
"background_hover": "#444", "background_hover": "#444",
"background_toggle": "rgba(0, 0, 0, 0)",
}) })
call-function: ("check-colors", { call-function: ("check-colors", {
"theme": "ayu", "theme": "ayu",
@ -122,6 +123,7 @@ call-function: ("check-colors", {
"color_hover": "#ffb44c", "color_hover": "#ffb44c",
"background": "#14191f", "background": "#14191f",
"background_hover": "#14191f", "background_hover": "#14191f",
"background_toggle": "rgba(0, 0, 0, 0)",
}) })
// Now checking on mobile devices. // Now checking on mobile devices.

View file

@ -52,12 +52,12 @@ wait-for: "#sidebar-button"
// We check that the sidebar isn't expanded and has the expected width. // We check that the sidebar isn't expanded and has the expected width.
assert-css: ("nav.sidebar", {"width": "50px"}) assert-css: ("nav.sidebar", {"width": "50px"})
// We now click on the button to expand the sidebar. // We now click on the button to expand the sidebar.
click: (10, 10) click: "#sidebar-button"
// We wait for the sidebar to be expanded. // We wait for the sidebar to be expanded.
wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"}) wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"}) assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"})
// We collapse the sidebar. // We collapse the sidebar.
click: (10, 10) click: "#sidebar-button"
// We ensure that the class has been removed. // We ensure that the class has been removed.
wait-for: "html:not(.src-sidebar-expanded)" wait-for: "html:not(.src-sidebar-expanded)"
assert: "nav.sidebar" assert: "nav.sidebar"
@ -65,7 +65,7 @@ assert: "nav.sidebar"
// Checking that only the path to the current file is "open". // Checking that only the path to the current file is "open".
go-to: "file://" + |DOC_PATH| + "/src/lib2/another_folder/sub_mod/mod.rs.html" go-to: "file://" + |DOC_PATH| + "/src/lib2/another_folder/sub_mod/mod.rs.html"
// First we expand the sidebar again. // First we expand the sidebar again.
click: (10, 10) click: "#sidebar-button"
// We wait for the sidebar to be expanded. // We wait for the sidebar to be expanded.
wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"}) wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
assert: "//*[@class='dir-entry' and @open]/*[text()='lib2']" assert: "//*[@class='dir-entry' and @open]/*[text()='lib2']"

View file

@ -146,14 +146,13 @@ define-function: (
) )
} }
) )
store-property: ("#src-sidebar > .title", { store-property: (".src-sidebar-title", {
"offsetHeight": source_sidebar_title_height, "offsetHeight": source_sidebar_title_height,
"offsetTop": source_sidebar_title_y, "offsetTop": source_sidebar_title_y,
}) })
call-function: ("check-sidebar-dir-entry", { call-function: ("check-sidebar-dir-entry", {
"x": 0, "x": 0,
// border + margin = 6 "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
}) })
// Check the search form // Check the search form
@ -175,13 +174,13 @@ assert-property: ("#main-content", {"offsetTop": 50})
// 8 = 50 - 34 - 8 // 8 = 50 - 34 - 8
// Check the sidebar directory entries have a marker and spacing (tablet). // Check the sidebar directory entries have a marker and spacing (tablet).
store-property: ("#src-sidebar > .title", { store-property: (".src-sidebar-title", {
"offsetHeight": source_sidebar_title_height, "offsetHeight": source_sidebar_title_height,
"offsetTop": source_sidebar_title_y, "offsetTop": source_sidebar_title_y,
}) })
call-function: ("check-sidebar-dir-entry", { call-function: ("check-sidebar-dir-entry", {
"x": 0, "x": 0,
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
}) })
// Tiny, phone mobile gets a different display where the logo is stacked on top. // Tiny, phone mobile gets a different display where the logo is stacked on top.
@ -189,21 +188,11 @@ set-window-size: (450, 700)
assert-css: ("nav.sub", {"flex-direction": "column"}) assert-css: ("nav.sub", {"flex-direction": "column"})
// Check the sidebar directory entries have a marker and spacing (phone). // Check the sidebar directory entries have a marker and spacing (phone).
store-property: ("#src-sidebar > .title", { store-property: (".src-sidebar-title", {
"offsetHeight": source_sidebar_title_height, "offsetHeight": source_sidebar_title_height,
"offsetTop": source_sidebar_title_y, "offsetTop": source_sidebar_title_y,
}) })
call-function: ("check-sidebar-dir-entry", { call-function: ("check-sidebar-dir-entry", {
"x": 0, "x": 0,
"y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
}) })
// The logo is not present on this page.
assert-false: ".sub-logo-container > img"
// Check the staged-api page instead, which does.
// Now we check that the logo has a bottom margin so it's not stuck to the search input.
go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
store-property: (".sub-logo-container", {"clientHeight": logo_height})
assert-position: (".search-form", {"y": |logo_height| + 8})