From 51da56df3ce5b3e7e8e70d2ed17d07419979d12e Mon Sep 17 00:00:00 2001 From: Rushan Date: Tue, 27 Sep 2022 18:31:41 +0400 Subject: [PATCH] UI Enhancements: scroll, component naming, and more (#582) - Fixed the sidebar scroll - with this fix, you'll be able to scroll to the end of the left sidebar at any given screen height. - Renamed content-navigation component and CSS class names for better consistency. - Changed the footer style by including it as part of the main content area. This change is required to have the scroll fix mentioned at point no. 1. - Reduced the hero height by a small margin, in order to have more sidebar scroll room on smaller devices such as 13 inch laptop and all. - Used higher contrast color on search modal's bg and scrollbar thumb to have better color consistency. - Made scrollbar thumbs visible by default. - Set sidebar scroll position to match the active doc item. - Added custom scrollbars for code blocks. --- source/_static/js/main.js | 59 ++++++++++++++++++- source/_static/scss/includes/_aside.scss | 13 +++- source/_static/scss/includes/_base.scss | 11 ++++ source/_static/scss/includes/_footer.scss | 28 +++------ source/_static/scss/includes/_header.scss | 4 +- source/_static/scss/includes/_layout.scss | 23 +++++++- source/_static/scss/includes/_misc.scss | 10 ++-- source/_static/scss/includes/_nav.scss | 15 +++-- source/_static/scss/includes/_reset.scss | 5 +- source/_static/scss/includes/_search.scss | 1 - source/_static/scss/includes/_theme.scss | 16 ++--- source/_static/scss/includes/_toc.scss | 4 +- source/_static/scss/includes/_variables.scss | 9 --- source/_templates/footer.html | 16 ++--- source/_templates/header.html | 2 + source/_templates/layout.html | 36 +++++------ ...vigation.html => platform-navigation.html} | 6 +- 17 files changed, 162 insertions(+), 96 deletions(-) rename source/_templates/{content-navigation.html => platform-navigation.html} (97%) diff --git a/source/_static/js/main.js b/source/_static/js/main.js index 8721cfc4..fbbfeea9 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -1,5 +1,6 @@ window.addEventListener("DOMContentLoaded", (event) => { const tocMenuEl = document.querySelector("#table-of-contents > ul.simple"); + const root = document.documentElement; var readModeLs = localStorage.getItem("read-mode"); // -------------------------------------------------- @@ -12,6 +13,42 @@ window.addEventListener("DOMContentLoaded", (event) => { } })(); + // -------------------------------------------------- + // Dynamic sidebar scroll on read-mode. + // This'll allow the sidebar to display all content, + // without scrolling the body. + // -------------------------------------------------- + const sidebarEl = document.querySelector(".sidebar"); + const headerEl = document.querySelector(".header"); + const activeDocEl = document.querySelector(".docs a.current"); + + function setSidebarHeight() { + if(!root.classList.contains("read-mode")) { + var headerViewHeight = headerEl.clientHeight - root.scrollTop; + var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh"; + + sidebarEl.style.setProperty("height", sidebarHeight); + } + else { + sidebarEl.style.removeProperty("height"); + } + } + + setTimeout(() => { + setSidebarHeight(); + + // Scroll sidebar to active doc items + if(activeDocEl && activeDocEl.offsetTop > 400) { + sidebarEl.scrollTop = activeDocEl.offsetTop - 40; + } + + // Make the sidebar is scrollable. + sidebarEl.classList.remove("inactive"); + }, 100); + + document.addEventListener("scroll", (e) => { + setSidebarHeight(); + }); // -------------------------------------------------- // Read mode @@ -34,6 +71,9 @@ window.addEventListener("DOMContentLoaded", (event) => { readModeEl.addEventListener("click", (event) => { document.documentElement.classList.toggle("read-mode"); + // Re-calculate sidebar height + setSidebarHeight(); + if (document.documentElement.classList.contains("read-mode")) { localStorage.setItem("read-mode", "true"); } else { @@ -55,6 +95,9 @@ window.addEventListener("DOMContentLoaded", (event) => { document.documentElement.classList.remove("read-mode"); } } + + // Re-calculate sidebar height + setSidebarHeight(); } var resizeTimer; @@ -149,10 +192,10 @@ window.addEventListener("DOMContentLoaded", (event) => { var target = nav.getAttribute("data-content-nav"); document - .querySelector(".content__nav__inner a.active") + .querySelector(".platform-nav__inner a.active") .classList.remove("active"); document - .querySelector(".content__nav__dropdown nav.active") + .querySelector(".platform-nav__dropdown nav.active") .classList.remove("active"); document.getElementById(target).classList.add("active"); nav.classList.add("active"); @@ -329,4 +372,16 @@ window.addEventListener("DOMContentLoaded", (event) => { }); } })(); + + // -------------------------------------------------- + // Custom scrollbars for `pre` code blocks + // -------------------------------------------------- + (function () { + const preEls = document.querySelectorAll(".highlight pre"); + if(preEls.length > 0) { + preEls.forEach((item) => { + item.classList.add("scrollbar"); + }); + } + })(); }); \ No newline at end of file diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index 57550a02..15512384 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/source/_static/scss/includes/_aside.scss @@ -2,18 +2,27 @@ // Sidebar // ---------------------- div.sidebar { + --scrollbar-bg: var(--sidebar-scrollbar-bg); + --scrollbar-hover-bg: var(--sidebar-scrollbar-hover-bg); + width: $sidebar-width; position: sticky; - left: 0; top: 0; background-color: var(--sidebar-bg); transition: opacity 400ms, transform 300ms; padding: var(--content-padding); overflow-y: auto; - height: 100vh; + height: calc(100vh - 6.0625rem); // 6.0625rem = header height z-index: $z-index-header - 2; margin: 0; border: none; + + // Sidebar is set to hidden by default and later shown with JS. + // This prevents the scrollbar-flicker due to + // some other related JS functions that are bind with sidebar scroll. + &.inactive { + overflow: hidden; + } @include breakpoint-min(breakpoints(lg)) { .hide-aside { diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss index 02098736..8ca3720c 100644 --- a/source/_static/scss/includes/_base.scss +++ b/source/_static/scss/includes/_base.scss @@ -13,6 +13,15 @@ html { font-size: $root-font-size; scroll-behavior: smooth; scroll-padding: 1rem; + + @include breakpoint-min(breakpoints(lg)) { + &.read-mode { + body { + height: 100vh; + overflow: hidden; + } + } + } } body { @@ -23,4 +32,6 @@ body { color: var(--text-color); font-weight: $font-weight-normal; background-color: var(--body-bg); + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/source/_static/scss/includes/_footer.scss b/source/_static/scss/includes/_footer.scss index b0c9975d..a8b136f0 100644 --- a/source/_static/scss/includes/_footer.scss +++ b/source/_static/scss/includes/_footer.scss @@ -1,11 +1,15 @@ div.footer { all: revert; - background-color: var(--footer-bg); width: 100%; - margin: 0; - + margin: 3rem 0 0 0; + font-size: $font-size-sm; + opacity: 0.75; + text-align: center; + border-top: 1px solid var(--theme-light-bg); + padding-top: 1.15rem; + &, a { - color: var(--footer-color); + color: var(--text-muted-color); } a { @@ -17,20 +21,4 @@ div.footer { p { margin: 0; } -} - -.footer__credit { - justify-content: center; - text-align: center; - display: flex; - gap: 0.2rem; - flex-wrap: wrap; - align-items: center; - padding: 1.5rem 0; - font-size: $font-size-sm; -} - -.footer__license { - display: flex; - align-items: center; } \ No newline at end of file diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index d00aaf7c..7895f585 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -106,10 +106,10 @@ padding: 3rem 0 2rem; & > h2 { - font-size: 3rem; + font-size: 2.5rem; font-weight: $font-weight-bold; color: var(--header-headings-color); - margin: 0 0 2rem; + margin: 0 0 0.75rem; } } } diff --git a/source/_static/scss/includes/_layout.scss b/source/_static/scss/includes/_layout.scss index a8229122..6e0f2894 100644 --- a/source/_static/scss/includes/_layout.scss +++ b/source/_static/scss/includes/_layout.scss @@ -1,6 +1,19 @@ -.content__inner { + +:root { + --content-padding: 1.75rem; + + @include breakpoint-max(breakpoints(lg)) { + --content-padding: 1.25rem; + } +} + +.content { + flex: 1; + @include breakpoint-min(breakpoints(lg)) { - display: flex; + & > .container { + display: flex; + } } } @@ -25,8 +38,12 @@ &.read-mode { .content { + @include breakpoint-min(breakpoints(lg)) { + overflow: auto; + } + & > .container { - padding: 0; + padding-inline: 0; } } } diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index 0d95c1fe..187ac61c 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -2,12 +2,12 @@ // Custom scrollbar // ---------------------- .scrollbar { - scrollbar-color: transparent transparent; + scrollbar-color: var(--scrollbar-bg) transparent; scrollbar-width: thin; &:hover { - scrollbar-color: var(--scrollbar-bg) transparent; + scrollbar-color: var(--scrollbar-hover-bg) transparent; &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bg); @@ -15,8 +15,8 @@ } &::-webkit-scrollbar { - width: 12px; - height: 12px; + width: 11px; + height: 11px; } &::-webkit-scrollbar-track { @@ -24,7 +24,7 @@ } &::-webkit-scrollbar-thumb { - background-color: transparent; + background-color: var(--scrollbar-bg); border-radius: 1rem; border: 3px solid transparent; background-clip: content-box; diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index 2038f561..585e4a2d 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -149,7 +149,6 @@ padding: 0.5rem 0 0.6rem; cursor: pointer; color: var(--nav-text-color); - transition: color 300ms; &:hover { color: $white; @@ -374,7 +373,7 @@ // ---------------------- // Content nav // ---------------------- -.content__nav { +.platform-nav { background-color: var(--content-nav-bg); font-size: $font-size-md; z-index: 10; @@ -395,7 +394,7 @@ :root { &:not(.dark-mode):not(.read-mode) { - .content__nav__inner { + .platform-nav__inner { & > a.active { & > img { &:first-child { @@ -411,7 +410,7 @@ } } -.content__nav__inner { +.platform-nav__inner { margin: 0; padding: 0; display: flex; @@ -429,7 +428,7 @@ font-weight: $font-weight-medium; display: flex; align-items: center; - padding: 0.85rem 0 0.7rem; + padding: 0.75rem 0 0.7rem; border-bottom: 2px solid transparent; transition: color 300ms; @@ -472,7 +471,7 @@ } }; -.content__nav__dropdown { +.platform-nav__dropdown { z-index: 1; background-color: var(--content-nav-sub-bg); font-size: $font-size-sm; @@ -512,8 +511,8 @@ } } -.content__nav, -.content__nav__dropdown { +.platform-nav, +.platform-nav__dropdown { position: relative; &:after { diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss index 71737911..fc01fdee 100644 --- a/source/_static/scss/includes/_reset.scss +++ b/source/_static/scss/includes/_reset.scss @@ -100,6 +100,9 @@ tt.xref, code.xref, code, pre, div.highlight { + --scrollbar-bg: var(--pre-scrollbar-bg); + --scrollbar-hover-bg: var(--pre-scrollbar-hover-bg); + font-family: $font-family-mono; font-weight: $font-weight-bold; background-color: var(--code-bg); @@ -289,7 +292,7 @@ dl { } ul, ol { - margin-left: 1rem; + margin-left: 1.25rem; } ul { diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index d324ef52..5231fb8e 100644 --- a/source/_static/scss/includes/_search.scss +++ b/source/_static/scss/includes/_search.scss @@ -78,7 +78,6 @@ .DocSearch-Modal { overflow: hidden; - backdrop-filter: blur(1rem); } .DocSearch-Form { diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 3552e2d2..2dd7500a 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -45,15 +45,17 @@ $theme-properties: ( --sidebar-bg: $light-100 $dark-100, --sidebar-hide-bg: $light-500 $dark-400, --sidebar-hide-hover-bg: #c2c9d1 $dark-500, + --sidebar-scrollbar-bg: darken($light-100, 8%) lighten($dark-100, 5%), + --sidebar-scrollbar-hover-bg: darken($light-100, 12%) lighten($dark-100, 7%), // Docs nav --docs-nav-active-color: $theme-red $headings-dark-color, - --docs-nav-active-code-bg: #efdde0 #2E394A, + --docs-nav-active-code-bg: #efdde0 $dark-0, --docs-nav-group-border-color: $light-300 $dark-300, // Scrollbar - --scrollbar-bg: #e5e5e5 #2e3747, - --scrollbar-hover-bg: #dddddd #364052, + --scrollbar-bg: $light-500 $dark-200, + --scrollbar-hover-bg: darken($light-500, 5%) $dark-300, // Table --table-border-color: $light-300 $dark-200, @@ -64,6 +66,8 @@ $theme-properties: ( --code-color: $black $dark-0, --code-link-color: #006DA0 #12243c, --code-link-bg: #cde4ff #71a7ed, + --pre-scrollbar-bg: darken($light-300, 8%) darken($dark-500, 10%), + --pre-scrollbar-hover-bg: darken($light-300, 12%) darken($dark-500, 14%), // Tab --tab-active-border-color: $theme-red $dark-500, @@ -84,10 +88,6 @@ $theme-properties: ( --nav-download-border-color: $theme-red $dark-500, --nav-download-hover-bg: $theme-red $dark-200, - // Footer - --footer-bg: #1D1D1D #151c24, - --footer-color: $white $text-dark-color, - // Icon --icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200, --icon-search-toggle-hover-bg: darken($light-100, 5%) $dark-300, @@ -112,7 +112,7 @@ $theme-properties: ( --alert-warning-link-decoration-color: #e3c3c6 #54141a, // Doc Search - --docsearch-modal-background: #d8dcdf #1c232d, + --docsearch-modal-background: #edf1f3 #1c232d, --docsearch-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851), --ds-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3), --ds-search-bg: $white $dark-100, diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index 8ac07e62..19e32f84 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/source/_static/scss/includes/_toc.scss @@ -10,7 +10,7 @@ div.topic { flex-shrink: 0; order: 2; width: 14rem; - height: 100vh; + height: calc(100vh - 6.0625rem); // 6.0625rem = header height padding: var(--content-padding) var(--content-padding) var(--content-padding) 0; overflow-y: auto; @@ -119,7 +119,7 @@ div.topic { width: 2px; height: calc(100% - 0.8rem); position: absolute; - left: 0; + left: 0.2rem; top: 0.5rem; background-color: var(--theme-light-bg); } diff --git a/source/_static/scss/includes/_variables.scss b/source/_static/scss/includes/_variables.scss index 9996f535..1fa2036f 100644 --- a/source/_static/scss/includes/_variables.scss +++ b/source/_static/scss/includes/_variables.scss @@ -49,15 +49,6 @@ $font-size-md: 0.9375rem; // Layout $container-width: 1400px; -:root { - --content-padding: 1.75rem; - - @include breakpoint-max(breakpoints(lg)) { - --content-padding: 1.25rem; - } -} - - // Font weight $font-weight-normal: 400; $font-weight-medium: 500; diff --git a/source/_templates/footer.html b/source/_templates/footer.html index ca914c99..c2299749 100644 --- a/source/_templates/footer.html +++ b/source/_templates/footer.html @@ -1,12 +1,8 @@
-
-
- This work is licensed under a - Creative Commons Attribution 4.0 International License. - {{ copyright }} - - Creative Commons License - -
-
+ This work is licensed under a + Creative Commons Attribution 4.0 International License. + {{ copyright }} + + Creative Commons License +
\ No newline at end of file diff --git a/source/_templates/header.html b/source/_templates/header.html index a139d645..1ec64333 100644 --- a/source/_templates/header.html +++ b/source/_templates/header.html @@ -51,4 +51,6 @@
+ + {%- include "platform-navigation.html" %} \ No newline at end of file diff --git a/source/_templates/layout.html b/source/_templates/layout.html index 6b744b6a..4b2b8e6c 100644 --- a/source/_templates/layout.html +++ b/source/_templates/layout.html @@ -105,32 +105,28 @@ {%- block content %}
- {%- include "content-navigation.html" %} -
-
-
-
- -
- - {{ shorttitle}} - - {{ miniosidebar() }} +
+
+
- {%- include "toc.html" %} + {{ shorttitle}} + + {{ miniosidebar() }} +
-
- {% block body %} {% endblock %} -
+ {%- include "toc.html" %} + +
+ {% block body %} {% endblock %} + + {%- include "footer.html" %}
- - {%- include "footer.html" %}
{%- endblock %} diff --git a/source/_templates/content-navigation.html b/source/_templates/platform-navigation.html similarity index 97% rename from source/_templates/content-navigation.html rename to source/_templates/platform-navigation.html index 546cf05c..859da7b7 100644 --- a/source/_templates/content-navigation.html +++ b/source/_templates/platform-navigation.html @@ -1,6 +1,6 @@ -
+
-