minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-08-08 01:43:18 +03:00
Code Activity

Fix sidebar scroll and menu z-index (#587)

Browse Source
This commit is contained in:
Rushan
2022-09-29 23:04:21 +04:00
committed by GitHub
parent c3a1e501d9
commit 373fde9ca2
6 changed files with 37 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,16 +21,26 @@ window.addEventListener("DOMContentLoaded", (event) => {
const sidebarEl = document.querySelector(".sidebar");
const headerEl = document.querySelector(".header");
const activeDocEl = document.querySelector(".docs a.current");
const tocEl = document.querySelector(".content__toc");
function setSidebarHeight() {
function setSidebarHeight() { //TODO: Clean this up
var headerViewHeight = headerEl.clientHeight - root.scrollTop;
var sidebarHeight = headerViewHeight > 0 ? `calc(100vh - ${headerViewHeight}px)` : "100vh";
var sidebarReadModeHeight = window.innerWidth > 991 ? sidebarHeight : "100vh";
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);
tocEl.style.setProperty("height", sidebarHeight);
}
else {
sidebarEl.style.removeProperty("height");
sidebarEl.style.setProperty("height", sidebarReadModeHeight);
if(window.innerWidth > 991) {
tocEl.style.setProperty("height", sidebarReadModeHeight);
}
else {
tocEl.style.removeProperty("height");
}
}
}

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

@@ -12,7 +12,7 @@ div.sidebar {
transition: opacity 400ms, transform 300ms;
padding: var(--content-padding);
overflow-y: auto;
height: calc(100vh - 6.0625rem); // 6.0625rem = header height
height: 100vh;
z-index: $z-index-header - 2;
margin: 0;
border: none;

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

@@ -2,9 +2,15 @@
// Custom scrollbar
// ----------------------
.scrollbar {
scrollbar-color: var(--scrollbar-bg) transparent;
scrollbar-width: thin;
&:not(.scrollbar--hover) {
scrollbar-color: var(--scrollbar-bg) transparent;
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-bg);
}
}
&:hover {
scrollbar-color: var(--scrollbar-hover-bg) transparent;
@@ -24,7 +30,6 @@
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-bg);
border-radius: 1rem;
border: 3px solid transparent;
background-clip: content-box;
@@ -35,6 +40,10 @@
}
}
.scrollbar--hover {
scrollbar-color: transparent transparent;
}
// ----------------------
// Buttons icons

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

@@ -371,25 +371,24 @@
// ----------------------
// Content nav
// Platform nav
// ----------------------
.platform-nav {
background-color: var(--content-nav-bg);
font-size: $font-size-md;
z-index: 10;
position: relative;
box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.15);
.container {
& > .container {
white-space: nowrap;
overflow-x: auto;
display: flex;
@include hide-scrollbars();
}
&:after {
background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%);
}
&:after {
background-image: linear-gradient(270deg, var(--content-nav-bg) 0%, var(--content-nav-bg) 10%, transparent 100%);
}
}
}
:root {
@@ -472,10 +471,9 @@
};
.platform-nav__dropdown {
z-index: 1;
background-color: var(--content-nav-sub-bg);
font-size: $font-size-sm;
&:after {
background-image: linear-gradient(270deg, var(--content-nav-sub-bg) 0%, var(--content-nav-sub-bg) 10%, transparent 100%);
}
@@ -511,7 +509,7 @@
}
}
.platform-nav,
.platform-nav > .container,
.platform-nav__dropdown {
position: relative;
@@ -523,7 +521,7 @@
width: 3rem;
height: 100%;
z-index: 1;
height: 2.8125rem;
height: 100%;
pointer-events: none;
}
}