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) => {
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");
});
}
})();
});

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

@ -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 {

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}
}
}

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)) {
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;
}
}
}

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

@ -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;

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

@ -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 {

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

@ -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 {

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

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

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

@ -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,

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

@ -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);
}

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

@ -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;

16
source/_templates/footer.html
View File

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

2
source/_templates/header.html
View File

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

36
source/_templates/layout.html
View File

@ -105,32 +105,28 @@
{%- block content %}
<section class="content">
{%- include "content-navigation.html" %}
<div class="container">
<div class="content__inner">
<div class="sidebar scrollbar">
<div class="hide-aside visible-rm">
<button type="button" class="icon">
{%- include "icons/close.html" %}
Close Doc Navigation
</button>
</div>
<a class="sidebar__title" href="{{ pathto('index') }}">{{ shorttitle}}</a>
{{ miniosidebar() }}
<div class="sidebar inactive scrollbar">
<div class="hide-aside visible-rm">
<button type="button" class="icon">
{%- include "icons/close.html" %}
Close Doc Navigation
</button>
</div>
{%- include "toc.html" %}
<a class="sidebar__title" href="{{ pathto('index') }}">{{ shorttitle}}</a>
{{ miniosidebar() }}
</div>
<div class="content__main">
{% block body %} {% endblock %}
</div>
{%- include "toc.html" %}
<div class="content__main">
{% block body %} {% endblock %}
{%- include "footer.html" %}
</div>
</div>
{%- include "footer.html" %}
</section>
{%- 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">
<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' }}">
<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" />
@ -39,7 +39,7 @@
</div>
<!--
<div class="content__nav__dropdown">
<div class="platform-nav__dropdown">
<div class="container">
<nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}">
<a href="">Upstream</a>