Skip to content

Commit

Permalink
rustdoc: make the resize handle easier to find
Browse files Browse the repository at this point in the history
This commit makes two related changes:

* The resize handle is now a bit bigger, 10px specifically.
* A visible indicator appears when you're in the area to tell you that
  you can interact with the border.
  • Loading branch information
notriddle committed Sep 11, 2023
1 parent 4463bb3 commit aa64872
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 12 deletions.
43 changes: 31 additions & 12 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -407,22 +407,22 @@ img {
}

.sidebar-resizer {
width: 3px;
margin: 0 3px;
width: 9px;
cursor: col-resize;
z-index: 10;
position: absolute;
height: 100%;
left: var(--desktop-sidebar-width, 200px);
/* make sure there's a 1px gap between the scrollbar and resize handle */
left: calc(var(--desktop-sidebar-width, 200px) + 1px);
}

.rustdoc.src .sidebar-resizer {
left: 50px;
width: 6px;
margin: 0 3px 0 0;
/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry about sidebar) */
left: 49px;
}

.src-sidebar-expanded .rustdoc.src .sidebar-resizer {
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer to right of it */
left: var(--src-sidebar-width, 300px);
}

Expand All @@ -439,16 +439,35 @@ img {

.sidebar-resizer:hover,
.sidebar-resizer:active,
.sidebar-resizer:focus {
width: 9px;
.sidebar-resizer:focus,
.sidebar-resizer.active {
width: 10px;
margin: 0;
/* when active or hovered, place resizer glow on top of the sidebar (right next to, or even on top of, the scrollbar) */
left: var(--desktop-sidebar-width, 200px);
border-left: solid 1px var(--sidebar-resizer-hover);
}

.src-sidebar-expanded .rustdoc.src .sidebar-resizer:hover,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:active,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer:focus,
.src-sidebar-expanded .rustdoc.src .sidebar-resizer.active {
/* when active or hovered, place resizer glow on top of the normal src sidebar border */
left: calc(var(--src-sidebar-width, 300px) - 1px);
}

.sidebar-resizer.active {
/* when dragging the sidebar into nothing, make sure the items inside
don't get hovered over */
width: 141px;
margin: 0 -66px;
/* make the resize tool bigger when actually resizing, to avoid :hover styles on other stuff while resizing */
padding: 0 140px;
width: 2px;
margin-left: -140px;
border-left: none;
}
.sidebar-resizer.active:before {
border-left: solid 2px var(--sidebar-resizer-active);
display: block;
height: 100%;
content: "";
}

.sidebar, .mobile-topbar, .sidebar-menu-toggle,
Expand Down
2 changes: 2 additions & 0 deletions src/librustdoc/html/static/css/themes/ayu.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(15, 20, 25, 1);
--scrape-example-code-wrapper-background-end: rgba(15, 20, 25, 0);
--sidebar-resizer-hover: hsl(34, 50%, 33%);
--sidebar-resizer-active: hsl(34, 100%, 66%);
}

h1, h2, h3, h4,
Expand Down
2 changes: 2 additions & 0 deletions src/librustdoc/html/static/css/themes/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -99,4 +99,6 @@
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
--sidebar-resizer-hover: hsl(207, 30%, 54%);
--sidebar-resizer-active: hsl(207, 90%, 54%);
}
2 changes: 2 additions & 0 deletions src/librustdoc/html/static/css/themes/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,6 @@
--scrape-example-help-hover-color: #000;
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
--sidebar-resizer-hover: hsl(207, 90%, 66%);
--sidebar-resizer-active: hsl(207, 90%, 54%);
}

0 comments on commit aa64872

Please sign in to comment.