From 5fc30b857c326dfdb6de7be952ad42192f890b93 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 1 Jul 2024 17:08:49 -0700 Subject: rustdoc: click target for sidebar items flush left --- src/librustdoc/html/static/css/rustdoc.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 4c0ba75d261..940f444dde1 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -15,6 +15,7 @@ --desktop-sidebar-width: 200px; --src-sidebar-width: 300px; --desktop-sidebar-z-index: 100; + --sidebar-elems-left-padding: 24px; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -559,8 +560,11 @@ ul.block, .block li { .sidebar > h2 a { display: block; padding: 0.25rem; /* 4px */ - margin-left: -0.25rem; margin-right: 0.25rem; + /* extend click target to far edge of screen (mile wide bar) */ + border-left: solid var(--sidebar-elems-left-padding) transparent; + margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding)); + background-clip: padding-box; } .sidebar h2 { @@ -578,7 +582,7 @@ ul.block, .block li { .sidebar-elems, .sidebar > .version, .sidebar > h2 { - padding-left: 24px; + padding-left: var(--sidebar-elems-left-padding); } .sidebar a { @@ -632,13 +636,17 @@ ul.block, .block li { .sidebar-crate .logo-container { /* The logo is expected to have 8px "slop" along its edges, so we can optically center it. */ - margin: 0 -16px 0 -16px; + margin: 0 calc(-16px - var(--sidebar-elems-left-padding)); + padding: 0 var(--sidebar-elems-left-padding); text-align: center; } .sidebar-crate h2 a { display: block; - margin: 0 calc(-24px + 0.25rem) 0 -0.2rem; + /* extend click target to far edge of screen (mile wide bar) */ + border-left: solid var(--sidebar-elems-left-padding) transparent; + background-clip: padding-box; + margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); /* Align the sidebar crate link with the search bar, which have different font sizes. -- cgit 1.4.1-3-g733a5 From 3924493a1070b5407a2203e99e4856af7e37f7d5 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 15 Jul 2024 16:20:37 -0700 Subject: rustdoc: make sidebar highlight cover whole click target --- src/librustdoc/html/static/css/rustdoc.css | 43 ++++++++++++++++++++++++++++-- tests/rustdoc-gui/huge-logo.goml | 4 +-- 2 files changed, 43 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 940f444dde1..cb8b82e8bde 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -564,7 +564,7 @@ ul.block, .block li { /* extend click target to far edge of screen (mile wide bar) */ border-left: solid var(--sidebar-elems-left-padding) transparent; margin-left: calc(-0.25rem - var(--sidebar-elems-left-padding)); - background-clip: padding-box; + background-clip: border-box; } .sidebar h2 { @@ -641,11 +641,50 @@ ul.block, .block li { text-align: center; } +.sidebar-crate .logo-container img { + /* When in a horizontal logo lockup, the highlight color of the crate name menu item + extends underneath the actual logo (in a vertical lockup, that background highlight + extends to the left edge of the screen). + + To prevent a weird-looking colored band from appearing under the logo, cover it up + with the sidebar's background. Additionally, the crate name extends slightly above + the logo, so that its highlight has a bit of space to let the ascenders breath while + also having those ascenders meet exactly with the top of the logo. + + In ANSI art, make it look like this: + | ┌─────┐ + | (R) │ std │ + | └─────┘ + + Not like this (which would happen without the z-index): + | ┌────────┐ + | (│ std │ + | └────────┘ + + Not like this (which would happen without the background): + | ┌────────┐ + | (R) std │ + | └────────┘ + + Nor like this (which would happen without the negative margin): + | ─────────┐ + | (R) │ std │ + | └─────┘ + */ + margin-top: -16px; + border-top: solid 16px transparent; + box-sizing: content-box; + position: relative; + background-color: var(--sidebar-background-color); + background-clip: border-box; + z-index: 1; +} + .sidebar-crate h2 a { display: block; /* extend click target to far edge of screen (mile wide bar) */ border-left: solid var(--sidebar-elems-left-padding) transparent; - background-clip: padding-box; + background-clip: border-box; margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); /* Align the sidebar crate link with the search bar, which have different font sizes. diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index 6fc45ede181..01999401e60 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -5,8 +5,8 @@ go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html" set-window-size: (1280, 1024) // offsetWidth = width of sidebar + left and right margins assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offsetHeight": 48}) -// offsetWidth = width of sidebar -assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48}) +// offsetWidth = width of sidebar, offsetHeight = height + top padding +assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64}) set-window-size: (400, 600) // offset = size + margin -- cgit 1.4.1-3-g733a5