mathieu/os-rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stop using the trigram of heaven as a hamburger button

Browse source 
It doesn't look quite right, because the lines are too far apart,
and it's not going to be announced by screenreaders as a menu button,
since that's not what the symbol means.

This adds a real tooltip and uses a better drawing of the icon.
This commit is contained in:
Michael Howell 2023-12-18 13:30:47 -07:00
parent bd14fb68da
commit c3e29ea5e9
6 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/librustdoc/html/static/css/noscript.css
View file

@ -54,6 +54,7 @@ nav.sub {
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
--mobile-sidebar-menu-filter: none;
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
@ -159,6 +160,7 @@ nav.sub {
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--mobile-sidebar-menu-filter: invert(100%);
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);

27
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1548,6 +1548,7 @@ a.tooltip:hover::after {
}
#sidebar-button {
display: none;
line-height: 0;
}
.hide-sidebar #sidebar-button,
.src #sidebar-button {
@ -1925,11 +1926,8 @@ in src-script.js and main.js
.sidebar-menu-toggle {
width: 45px;
/* Rare exception to specifying font sizes in rem. Since this is acting
as an icon, it's okay to specify its sizes in pixels. */
font-size: 32px;
border: none;
color: var(--main-color);
line-height: 0;
}
.hide-sidebar .sidebar-menu-toggle {
@ -1964,13 +1962,25 @@ in src-script.js and main.js
width: 22px;
height: 22px;
}
.sidebar-menu-toggle:before {
filter: var(--mobile-sidebar-menu-filter);
}
.sidebar-menu-toggle:hover {
background: var(--main-background-color);
}
/* src sidebar button opens modal
/* sidebar button opens modal
use hamburger button */
.src #sidebar-button > a:before {
.src #sidebar-button > a:before, .sidebar-menu-toggle:before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="3"/></svg>');
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
opacity: 0.75;
}
.src #sidebar-button > a:hover:before, .sidebar-menu-toggle:hover:before,
.src #sidebar-button > a:active:before, .sidebar-menu-toggle:active:before,
.src #sidebar-button > a:focus:before, .sidebar-menu-toggle:focus:before {
opacity: 1;
}
/* Display an alternating layout on tablets and phones */
@ -2303,6 +2313,7 @@ in src-script.js and main.js
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
--mobile-sidebar-menu-filter: none;
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
@ -2407,6 +2418,7 @@ in src-script.js and main.js
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--mobile-sidebar-menu-filter: invert(100%);
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
@ -2518,6 +2530,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--mobile-sidebar-menu-filter: invert(100%);
--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
--copy-path-button-color: #fff;
--copy-path-img-filter: invert(70%);

2
src/librustdoc/html/templates/page.html
View file

@ -77,7 +77,7 @@
{{ layout.external_html.before_content|safe }}
{% if page.css_class != "src" %}
<nav class="mobile-topbar"> {# #}
<button class="sidebar-menu-toggle">&#9776;</button> {# #}
<button class="sidebar-menu-toggle" title="show sidebar"></button> {# #}
{% if !layout.logo.is_empty() || page.rust_logo %}
<a class="logo-container" href="{{page.root_path|safe}}{{display_krate_with_trailing_slash|safe}}index.html"> {# #}
{% if page.rust_logo %}

4
tests/rustdoc-gui/sidebar-source-code-display.goml
View file

@ -130,7 +130,7 @@ call-function: ("check-colors", {
set-window-size: (500, 700)
reload:
// Waiting for the sidebar to be displayed...
wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
// We now check it takes the full size of the display.
assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
@ -138,7 +138,7 @@ assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
// We now check that the scroll position is kept when opening the sidebar.
click: "#sidebar-button"
wait-for-css: (".sidebar", {"position": "absolute", "left": "-1000px"})
wait-for-css: (".src .sidebar > *", {"visibility": "hidden"})
// We scroll to line 117 to change the scroll position.
scroll-to: '//*[@id="117"]'
assert-window-property: {"pageYOffset": "2516"}

1
tests/rustdoc/logo-class-rust.rs
View file

@ -3,5 +3,4 @@
#![doc(rust_logo)]
// Note: this test is paired with logo-class.rs and logo-class-default.rs.
// @has logo_class_rust/struct.SomeStruct.html '//*[@class="logo-container"]/img[@class="rust-logo"]' ''
// @has src/logo_class_rust/logo-class-rust.rs.html '//*[@class="sub-logo-container"]/img[@class="rust-logo"]' ''
pub struct SomeStruct;

3
tests/rustdoc/logo-class.rs
View file

@ -4,7 +4,4 @@
// @has logo_class/struct.SomeStruct.html '//*[@class="logo-container"]/img[@src="https://raw.githubusercontent.com/sagebind/isahc/master/media/isahc.svg.png"]' ''
// @!has logo_class/struct.SomeStruct.html '//*[@class="logo-container"]/img[@class="rust-logo"]' ''
//
// @has src/logo_class/logo-class.rs.html '//*[@class="sub-logo-container"]/img[@src="https://raw.githubusercontent.com/sagebind/isahc/master/media/isahc.svg.png"]' ''
// @!has src/logo_class/logo-class.rs.html '//*[@class="sub-logo-container"]/img[@class="rust-logo"]' ''
pub struct SomeStruct;