diff options
| author | Michael Howell <michael@notriddle.com> | 2024-07-01 17:08:49 -0700 |
|---|---|---|
| committer | Michael Howell <michael@notriddle.com> | 2024-07-01 18:03:58 -0700 |
| commit | 5fc30b857c326dfdb6de7be952ad42192f890b93 (patch) | |
| tree | 31c9a158a97bb952ba11703449166dce464ad009 | |
| parent | cf2df68d1f5e56803c97d91e2b1a9f1c9923c533 (diff) | |
| download | rust-5fc30b857c326dfdb6de7be952ad42192f890b93.tar.gz rust-5fc30b857c326dfdb6de7be952ad42192f890b93.zip | |
rustdoc: click target for sidebar items flush left
| -rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 16 | ||||
| -rw-r--r-- | tests/rustdoc-gui/huge-logo.goml | 3 |
2 files changed, 14 insertions, 5 deletions
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. diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml index e4e5cb1ec74..6fc45ede181 100644 --- a/tests/rustdoc-gui/huge-logo.goml +++ b/tests/rustdoc-gui/huge-logo.goml @@ -3,8 +3,9 @@ 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", {"offsetWidth": "48", "offsetHeight": 48}) assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 48}) set-window-size: (400, 600) |