From 5a3625d426bbd143e8178ae76e4d7939c6c96024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20St=C3=A5hl?= Date: Thu, 25 Apr 2019 19:06:04 +0200 Subject: [PATCH 1/4] Explicitly set height on rust logo element in docs The layout of the left side menu in docs reflows when navigating between pages because of missing height on the element of rust logo. Setting height='100' tells the browser to reserve that vertical space, leading to a less janky experience. --- src/librustdoc/html/layout.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index acf019fd225..7453c90bf96 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -183,13 +183,13 @@ pub fn render( if layout.logo.is_empty() { format!("\ logo", + alt='logo' width='100' height='100'>", path=p, static_root_path=static_root_path, suffix=page.resource_suffix) } else { format!("\ - logo", + logo", p, layout.logo) } From f998182fb40cace8de8981bd641a8fb93632a4a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20St=C3=A5hl?= Date: Thu, 25 Apr 2019 19:06:04 +0200 Subject: [PATCH 2/4] Revert "Explicitly set height on rust logo element in docs" This reverts commit d79a01b72f4722611cb21b719e6243aad3e7ec3c. --- src/librustdoc/html/layout.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index 7453c90bf96..acf019fd225 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -183,13 +183,13 @@ pub fn render( if layout.logo.is_empty() { format!("\ logo", + alt='logo' width='100'>", path=p, static_root_path=static_root_path, suffix=page.resource_suffix) } else { format!("\ - logo", + logo", p, layout.logo) } From 184e3a3f92295fad81460ca13f9e845a2a5ff74a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20St=C3=A5hl?= Date: Sat, 27 Apr 2019 15:09:57 +0200 Subject: [PATCH 3/4] Wrap logo in container to prevent layout reflow --- src/librustdoc/html/layout.rs | 6 ++++-- src/librustdoc/html/static/rustdoc.css | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index acf019fd225..7176abc3db8 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -182,14 +182,16 @@ pub fn render( let p = SlashChecker(&p); if layout.logo.is_empty() { format!("\ +
\ logo", + alt='logo' width='100'>
", path=p, static_root_path=static_root_path, suffix=page.resource_suffix) } else { format!("\ - logo", +
\ + logo
", p, layout.logo) } diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 53b08cf5697..66236d7cb45 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -182,6 +182,11 @@ nav.sub { display: none !important; } +.logo-container { + height: 0; + padding-bottom: 50%; +} + .sidebar img { margin: 20px auto; display: block; From 9db0fd7fd6a09969c3f3a0018599cef9e12b4ba9 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 29 Apr 2019 11:45:06 +0200 Subject: [PATCH 4/4] Fix image position and display --- src/librustdoc/html/layout.rs | 6 ++---- src/librustdoc/html/static/rustdoc.css | 26 ++++++++++++++++++++------ 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index 7176abc3db8..ae0bd1aafa8 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -183,15 +183,13 @@ pub fn render( if layout.logo.is_empty() { format!("\
\ - logo
", + logo", path=p, static_root_path=static_root_path, suffix=page.resource_suffix) } else { format!("\ -
\ - logo
", +
logo
", p, layout.logo) } diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 66236d7cb45..f9d00cad717 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -183,16 +183,24 @@ nav.sub { } .logo-container { - height: 0; - padding-bottom: 50%; -} - -.sidebar img { + height: 100px; + width: 100px; + position: relative; margin: 20px auto; display: block; margin-top: 10px; } +.logo-container > img { + max-width: 100px; + max-height: 100px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; +} + .sidebar .location { border: 1px solid; font-size: 17px; @@ -1035,14 +1043,20 @@ span.since { padding: 0; } - .sidebar img { + .sidebar .logo-container { width: 35px; + height: 35px; margin-top: 5px; margin-bottom: 5px; float: left; margin-left: 50px; } + .sidebar .logo-container > img { + max-width: 35px; + max-height: 35px; + } + .sidebar-menu { position: fixed; z-index: 10;