From 791b3ec1720b16e583dc5f55fe2e121a2199c680 Mon Sep 17 00:00:00 2001 From: woclass Date: Tue, 28 Mar 2023 06:58:32 +0800 Subject: [PATCH] Move Hamburger to left in mobile layout (#2076) --- CHANGELOG.md | 2 ++ assets/html/scss/documenter/layout/_main.scss | 16 ++++++++++++---- assets/html/themes/documenter-dark.css | 13 +++++++++---- assets/html/themes/documenter-light.css | 13 +++++++++---- src/html/HTMLWriter.jl | 15 ++++++++------- 5 files changed, 40 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f30c42474..2ce6d01231 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -75,6 +75,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - jquery has been updated from `v3.6.0` to `v3.6.4`. - MathJax 2 has been updated from `v2.7.7` to `v2.7.9`. +* Move the mobile layout sidebar toggle (hamburger) from the right side to the left side. (#1312, #2076) + ### Fixed * Documenter now generates the correct source URLs for docstrings from other packages when the `repo` argument to `makedocs` is set (note: the source links to such docstrings only work if the external package is cloned from GitHub and added as a dev-dependency). However, this change **breaks** the case where the `repo` argument is used to override the main package/repository URL, assuming the repository is cloned from GitHub. (#1808) diff --git a/assets/html/scss/documenter/layout/_main.scss b/assets/html/scss/documenter/layout/_main.scss index 365e1611af..7ae3fe99c5 100644 --- a/assets/html/scss/documenter/layout/_main.scss +++ b/assets/html/scss/documenter/layout/_main.scss @@ -51,11 +51,22 @@ display: flex; .breadcrumb { flex-grow: 1; + padding-left: 0.5rem; + } + + .docs-left { + // Manually align with the center line of H + padding-top: 2px; + padding-right: 0.5rem; + .docs-sidebar-button { + display: inline-block; + font-size: 1.5rem; + } } .docs-right { display: flex; - .docs-icon, .docs-label, .docs-sidebar-button { + .docs-icon, .docs-label { display: inline-block; } white-space: nowrap; @@ -63,9 +74,6 @@ padding: 0; margin-left: 0.3em; } - .docs-sidebar-button { - font-size: 1.5rem; - } .docs-navbar-link { margin: auto 0.5rem auto 0.5rem; } diff --git a/assets/html/themes/documenter-dark.css b/assets/html/themes/documenter-dark.css index d37acf0748..2eea77fa79 100644 --- a/assets/html/themes/documenter-dark.css +++ b/assets/html/themes/documenter-dark.css @@ -8232,17 +8232,22 @@ html.theme--documenter-dark { margin-bottom: 1rem; display: flex; } html.theme--documenter-dark #documenter .docs-main header.docs-navbar .breadcrumb { - flex-grow: 1; } + flex-grow: 1; + padding-left: 0.5rem; } + html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-left { + padding-top: 2px; + padding-right: 0.5rem; } + html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-left .docs-sidebar-button { + display: inline-block; + font-size: 1.5rem; } html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right { display: flex; white-space: nowrap; } - html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-icon, html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-label, html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-sidebar-button { + html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-icon, html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-label { display: inline-block; } html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-label { padding: 0; margin-left: 0.3em; } - html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-sidebar-button { - font-size: 1.5rem; } html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-right .docs-navbar-link { margin: auto 0.5rem auto 0.5rem; } @media screen and (max-width: 1055px) { diff --git a/assets/html/themes/documenter-light.css b/assets/html/themes/documenter-light.css index 78650ea5a9..aa48cb8cd9 100644 --- a/assets/html/themes/documenter-light.css +++ b/assets/html/themes/documenter-light.css @@ -8199,17 +8199,22 @@ li.no-marker { margin-bottom: 1rem; display: flex; } #documenter .docs-main header.docs-navbar .breadcrumb { - flex-grow: 1; } + flex-grow: 1; + padding-left: 0.5rem; } + #documenter .docs-main header.docs-navbar .docs-left { + padding-top: 2px; + padding-right: 0.5rem; } + #documenter .docs-main header.docs-navbar .docs-left .docs-sidebar-button { + display: inline-block; + font-size: 1.5rem; } #documenter .docs-main header.docs-navbar .docs-right { display: flex; white-space: nowrap; } - #documenter .docs-main header.docs-navbar .docs-right .docs-icon, #documenter .docs-main header.docs-navbar .docs-right .docs-label, #documenter .docs-main header.docs-navbar .docs-right .docs-sidebar-button { + #documenter .docs-main header.docs-navbar .docs-right .docs-icon, #documenter .docs-main header.docs-navbar .docs-right .docs-label { display: inline-block; } #documenter .docs-main header.docs-navbar .docs-right .docs-label { padding: 0; margin-left: 0.3em; } - #documenter .docs-main header.docs-navbar .docs-right .docs-sidebar-button { - font-size: 1.5rem; } #documenter .docs-main header.docs-navbar .docs-right .docs-navbar-link { margin: auto 0.5rem auto 0.5rem; } @media screen and (max-width: 1055px) { diff --git a/src/html/HTMLWriter.jl b/src/html/HTMLWriter.jl index 08af613ba6..679ead36e2 100644 --- a/src/html/HTMLWriter.jl +++ b/src/html/HTMLWriter.jl @@ -1162,6 +1162,13 @@ end function render_navbar(ctx, navnode, edit_page_link::Bool) @tags div header nav ul li a span + + navbar_left = div[".docs-left"] + # Hamburger on mobile + push!(navbar_left.nodes, a[ + "#documenter-sidebar-button.docs-sidebar-button.docs-navbar-link.fa-solid.fa-bars.is-hidden-desktop", + :href => "#", + ]) # The breadcrumb (navigation links on top) navpath = Documenter.navpath(navnode) @@ -1218,14 +1225,8 @@ function render_navbar(ctx, navnode, edit_page_link::Bool) :href => "#", :title => "Settings", ]) - # Hamburger on mobile - push!(navbar_right.nodes, a[ - "#documenter-sidebar-button.docs-sidebar-button.docs-navbar-link.fa-solid.fa-bars.is-hidden-desktop", - :href => "#", - ]) - # Construct the main
node that should be the first element in div.docs-main - header[".docs-navbar"](breadcrumb, navbar_right) + header[".docs-navbar"](navbar_left, breadcrumb, navbar_right) end """