minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-28 19:42:10 +03:00
Code Activity

UI Enhancements: scroll, component naming, and more (#582)

Browse Source 
- 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.
This commit is contained in:
Rushan
2022-09-27 18:31:41 +04:00
committed by GitHub
parent aaa74a8ee7
commit 51da56df3c
17 changed files with 162 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
source/_static/js/main.js
View File

@ -1,5 +1,6 @@
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
const tocMenuEl = document.querySelector("#table-of-contents > ul.simple"); const tocMenuEl = document.querySelector("#table-of-contents > ul.simple");
const root = document.documentElement;
var readModeLs = localStorage.getItem("read-mode"); 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 // Read mode
@ -34,6 +71,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
readModeEl.addEventListener("click", (event) => { readModeEl.addEventListener("click", (event) => {
document.documentElement.classList.toggle("read-mode"); document.documentElement.classList.toggle("read-mode");
// Re-calculate sidebar height
setSidebarHeight();
if (document.documentElement.classList.contains("read-mode")) { if (document.documentElement.classList.contains("read-mode")) {
localStorage.setItem("read-mode", "true"); localStorage.setItem("read-mode", "true");
} else { } else {
@ -55,6 +95,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
document.documentElement.classList.remove("read-mode"); document.documentElement.classList.remove("read-mode");
} }
} }
// Re-calculate sidebar height
setSidebarHeight();
} }
var resizeTimer; var resizeTimer;
@ -149,10 +192,10 @@ window.addEventListener("DOMContentLoaded", (event) => {
var target = nav.getAttribute("data-content-nav"); var target = nav.getAttribute("data-content-nav");
document document
.querySelector(".content__nav__inner a.active") .querySelector(".platform-nav__inner a.active")
.classList.remove("active"); .classList.remove("active");
document document
.querySelector(".content__nav__dropdown nav.active") .querySelector(".platform-nav__dropdown nav.active")
.classList.remove("active"); .classList.remove("active");
document.getElementById(target).classList.add("active"); document.getElementById(target).classList.add("active");
nav.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");
});
}
})();
}); });

13
source/_static/scss/includes/_aside.scss
View File

@ -2,18 +2,27 @@
// Sidebar // Sidebar
// ---------------------- // ----------------------
div.sidebar { div.sidebar {
--scrollbar-bg: var(--sidebar-scrollbar-bg);
--scrollbar-hover-bg: var(--sidebar-scrollbar-hover-bg);
width: $sidebar-width; width: $sidebar-width;
position: sticky; position: sticky;
left: 0;
top: 0; top: 0;
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
transition: opacity 400ms, transform 300ms; transition: opacity 400ms, transform 300ms;
padding: var(--content-padding); padding: var(--content-padding);
overflow-y: auto; overflow-y: auto;
height: 100vh; height: calc(100vh - 6.0625rem); // 6.0625rem = header height
z-index: $z-index-header - 2; z-index: $z-index-header - 2;
margin: 0; margin: 0;
border: none; 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)) { @include breakpoint-min(breakpoints(lg)) {
.hide-aside { .hide-aside {

11
source/_static/scss/includes/_base.scss
View File

@ -13,6 +13,15 @@ html {
font-size: $root-font-size; font-size: $root-font-size;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding: 1rem; scroll-padding: 1rem;
@include breakpoint-min(breakpoints(lg)) {
&.read-mode {
body {
height: 100vh;
overflow: hidden;
}
}
}
} }
body { body {
@ -23,4 +32,6 @@ body {
color: var(--text-color); color: var(--text-color);
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
background-color: var(--body-bg); background-color: var(--body-bg);
display: flex;
flex-direction: column;
} }

28
source/_static/scss/includes/_footer.scss
View File

@ -1,11 +1,15 @@
div.footer { div.footer {
all: revert; all: revert;
background-color: var(--footer-bg);
width: 100%; 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 { &, a {
color: var(--footer-color); color: var(--text-muted-color);
} }
a { a {
@ -17,20 +21,4 @@ div.footer {
p { p {
margin: 0; 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;
} }

4
source/_static/scss/includes/_header.scss
View File

@ -106,10 +106,10 @@
padding: 3rem 0 2rem; padding: 3rem 0 2rem;
& > h2 { & > h2 {
font-size: 3rem; font-size: 2.5rem;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: var(--header-headings-color); color: var(--header-headings-color);
margin: 0 0 2rem; margin: 0 0 0.75rem;
} }
} }
} }

23
source/_static/scss/includes/_layout.scss
View File

@ -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)) { @include breakpoint-min(breakpoints(lg)) {
display: flex; & > .container {
display: flex;
}
} }
} }
@ -25,8 +38,12 @@
&.read-mode { &.read-mode {
.content { .content {
@include breakpoint-min(breakpoints(lg)) {
overflow: auto;
}
& > .container { & > .container {
padding: 0; padding-inline: 0;
} }
} }
} }

10
source/_static/scss/includes/_misc.scss
View File

@ -2,12 +2,12 @@
// Custom scrollbar // Custom scrollbar
// ---------------------- // ----------------------
.scrollbar { .scrollbar {
scrollbar-color: transparent transparent; scrollbar-color: var(--scrollbar-bg) transparent;
scrollbar-width: thin; scrollbar-width: thin;
&:hover { &:hover {
scrollbar-color: var(--scrollbar-bg) transparent; scrollbar-color: var(--scrollbar-hover-bg) transparent;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-bg); background-color: var(--scrollbar-bg);
@ -15,8 +15,8 @@
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 12px; width: 11px;
height: 12px; height: 11px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -24,7 +24,7 @@
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: transparent; background-color: var(--scrollbar-bg);
border-radius: 1rem; border-radius: 1rem;
border: 3px solid transparent; border: 3px solid transparent;
background-clip: content-box; background-clip: content-box;

15
source/_static/scss/includes/_nav.scss
View File

@ -149,7 +149,6 @@
padding: 0.5rem 0 0.6rem; padding: 0.5rem 0 0.6rem;
cursor: pointer; cursor: pointer;
color: var(--nav-text-color); color: var(--nav-text-color);
transition: color 300ms;
&:hover { &:hover {
color: $white; color: $white;
@ -374,7 +373,7 @@
// ---------------------- // ----------------------
// Content nav // Content nav
// ---------------------- // ----------------------
.content__nav { .platform-nav {
background-color: var(--content-nav-bg); background-color: var(--content-nav-bg);
font-size: $font-size-md; font-size: $font-size-md;
z-index: 10; z-index: 10;
@ -395,7 +394,7 @@
:root { :root {
&:not(.dark-mode):not(.read-mode) { &:not(.dark-mode):not(.read-mode) {
.content__nav__inner { .platform-nav__inner {
& > a.active { & > a.active {
& > img { & > img {
&:first-child { &:first-child {
@ -411,7 +410,7 @@
} }
} }
.content__nav__inner { .platform-nav__inner {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@ -429,7 +428,7 @@
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.85rem 0 0.7rem; padding: 0.75rem 0 0.7rem;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: color 300ms; transition: color 300ms;
@ -472,7 +471,7 @@
} }
}; };
.content__nav__dropdown { .platform-nav__dropdown {
z-index: 1; z-index: 1;
background-color: var(--content-nav-sub-bg); background-color: var(--content-nav-sub-bg);
font-size: $font-size-sm; font-size: $font-size-sm;
@ -512,8 +511,8 @@
} }
} }
.content__nav, .platform-nav,
.content__nav__dropdown { .platform-nav__dropdown {
position: relative; position: relative;
&:after { &:after {

5
source/_static/scss/includes/_reset.scss
View File

@ -100,6 +100,9 @@ tt.xref, code.xref,
code, code,
pre, pre,
div.highlight { div.highlight {
--scrollbar-bg: var(--pre-scrollbar-bg);
--scrollbar-hover-bg: var(--pre-scrollbar-hover-bg);
font-family: $font-family-mono; font-family: $font-family-mono;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
background-color: var(--code-bg); background-color: var(--code-bg);
@ -289,7 +292,7 @@ dl {
} }
ul, ol { ul, ol {
margin-left: 1rem; margin-left: 1.25rem;
} }
ul { ul {

1
source/_static/scss/includes/_search.scss
View File

@ -78,7 +78,6 @@
.DocSearch-Modal { .DocSearch-Modal {
overflow: hidden; overflow: hidden;
backdrop-filter: blur(1rem);
} }
.DocSearch-Form { .DocSearch-Form {

16
source/_static/scss/includes/_theme.scss
View File

@ -45,15 +45,17 @@ $theme-properties: (
--sidebar-bg: $light-100 $dark-100, --sidebar-bg: $light-100 $dark-100,
--sidebar-hide-bg: $light-500 $dark-400, --sidebar-hide-bg: $light-500 $dark-400,
--sidebar-hide-hover-bg: #c2c9d1 $dark-500, --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
--docs-nav-active-color: $theme-red $headings-dark-color, --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, --docs-nav-group-border-color: $light-300 $dark-300,
// Scrollbar // Scrollbar
--scrollbar-bg: #e5e5e5 #2e3747, --scrollbar-bg: $light-500 $dark-200,
--scrollbar-hover-bg: #dddddd #364052, --scrollbar-hover-bg: darken($light-500, 5%) $dark-300,
// Table // Table
--table-border-color: $light-300 $dark-200, --table-border-color: $light-300 $dark-200,
@ -64,6 +66,8 @@ $theme-properties: (
--code-color: $black $dark-0, --code-color: $black $dark-0,
--code-link-color: #006DA0 #12243c, --code-link-color: #006DA0 #12243c,
--code-link-bg: #cde4ff #71a7ed, --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
--tab-active-border-color: $theme-red $dark-500, --tab-active-border-color: $theme-red $dark-500,
@ -84,10 +88,6 @@ $theme-properties: (
--nav-download-border-color: $theme-red $dark-500, --nav-download-border-color: $theme-red $dark-500,
--nav-download-hover-bg: $theme-red $dark-200, --nav-download-hover-bg: $theme-red $dark-200,
// Footer
--footer-bg: #1D1D1D #151c24,
--footer-color: $white $text-dark-color,
// Icon // Icon
--icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200, --icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200,
--icon-search-toggle-hover-bg: darken($light-100, 5%) $dark-300, --icon-search-toggle-hover-bg: darken($light-100, 5%) $dark-300,
@ -112,7 +112,7 @@ $theme-properties: (
--alert-warning-link-decoration-color: #e3c3c6 #54141a, --alert-warning-link-decoration-color: #e3c3c6 #54141a,
// Doc Search // 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), --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-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3),
--ds-search-bg: $white $dark-100, --ds-search-bg: $white $dark-100,

4
source/_static/scss/includes/_toc.scss
View File

@ -10,7 +10,7 @@ div.topic {
flex-shrink: 0; flex-shrink: 0;
order: 2; order: 2;
width: 14rem; width: 14rem;
height: 100vh; height: calc(100vh - 6.0625rem); // 6.0625rem = header height
padding: var(--content-padding) var(--content-padding) var(--content-padding) 0; padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
overflow-y: auto; overflow-y: auto;
@ -119,7 +119,7 @@ div.topic {
width: 2px; width: 2px;
height: calc(100% - 0.8rem); height: calc(100% - 0.8rem);
position: absolute; position: absolute;
left: 0; left: 0.2rem;
top: 0.5rem; top: 0.5rem;
background-color: var(--theme-light-bg); background-color: var(--theme-light-bg);
} }

9
source/_static/scss/includes/_variables.scss
View File

@ -49,15 +49,6 @@ $font-size-md: 0.9375rem;
// Layout // Layout
$container-width: 1400px; $container-width: 1400px;
:root {
--content-padding: 1.75rem;
@include breakpoint-max(breakpoints(lg)) {
--content-padding: 1.25rem;
}
}
// Font weight // Font weight
$font-weight-normal: 400; $font-weight-normal: 400;
$font-weight-medium: 500; $font-weight-medium: 500;

16
source/_templates/footer.html
View File

@ -1,12 +1,8 @@
<div class="footer"> <div class="footer">
<div class="container"> This work is licensed under a
<div class="footer__credit"> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License.</a>
This work is licensed under a {{ copyright }}
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License.</a> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
{{ copyright }} <img height="10" alt="Creative Commons License" src="https://i.creativecommons.org/l/by/4.0/80x15.png" />
<a class="footer__license" rel="license" href="http://creativecommons.org/licenses/by/4.0/"> </a>
<img alt="Creative Commons License" src="https://i.creativecommons.org/l/by/4.0/80x15.png" />
</a>
</div>
</div>
</div> </div>

2
source/_templates/header.html
View File

@ -51,4 +51,6 @@
<div id="docsearch"></div> <div id="docsearch"></div>
</div> </div>
</div> </div>
{%- include "platform-navigation.html" %}
</header> </header>

36
source/_templates/layout.html
View File

@ -105,32 +105,28 @@
{%- block content %} {%- block content %}
<section class="content"> <section class="content">
{%- include "content-navigation.html" %}
<div class="container"> <div class="container">
<div class="content__inner"> <div class="sidebar inactive scrollbar">
<div class="sidebar scrollbar"> <div class="hide-aside visible-rm">
<div class="hide-aside visible-rm"> <button type="button" class="icon">
<button type="button" class="icon"> {%- include "icons/close.html" %}
{%- include "icons/close.html" %} Close Doc Navigation
Close Doc Navigation </button>
</button>
</div>
<a class="sidebar__title" href="{{ pathto('index') }}">{{ shorttitle}}</a>
{{ miniosidebar() }}
</div> </div>
{%- include "toc.html" %} <a class="sidebar__title" href="{{ pathto('index') }}">{{ shorttitle}}</a>
{{ miniosidebar() }}
</div>
<div class="content__main"> {%- include "toc.html" %}
{% block body %} {% endblock %}
</div> <div class="content__main">
{% block body %} {% endblock %}
{%- include "footer.html" %}
</div> </div>
</div> </div>
{%- include "footer.html" %}
</section> </section>
{%- endblock %} {%- endblock %}

6
source/_templates/content-navigation.html → source/_templates/platform-navigation.html
View File

@ -1,6 +1,6 @@
<div class="content__nav"> <div class="platform-nav">
<div class="container"> <div class="container">
<nav class="content__nav__inner"> <nav class="platform-nav__inner">
<a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'kubernetes' }}"> <a rel="noreferrer" href="/docs/minio/kubernetes/upstream/index.html" class="{{ 'active' if doc_platform == 'kubernetes' }}">
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" /> <img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" />
<img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" /> <img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" />
@ -39,7 +39,7 @@
</div> </div>
<!-- <!--
<div class="content__nav__dropdown"> <div class="platform-nav__dropdown">
<div class="container"> <div class="container">
<nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}"> <nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}">
<a href="">Upstream</a> <a href="">Upstream</a>