Fix github release page TOC compatibility (#214)

This commit is contained in:
Folyd 2022-11-18 12:17:05 +08:00 committed by GitHub
parent 93e54515a0
commit ef7ac618ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 10 deletions

View file

@ -24,20 +24,15 @@
}
@media screen and (min-width: 1280px) {
.rse-fix-readme {
display: flex;
padding-right: 0 !important;
}
.rse-version-list {
box-sizing: content-box;
min-width: 200px;
border-left: var(--color-border-secondary) solid 1px;
border-left: var(--color-border-muted) solid 1px;
margin-left: 1.5rem;
max-height: 100vh;
position: sticky;
/* 50px to fix compatibility of Github markdown file's sticky header*/
top: 50px;
/* 90px to fix compatibility of Github markdown file's sticky header*/
top: 90px;
overflow: scroll !important;
font-size: 13px;
list-style: none;

View file

@ -47,13 +47,55 @@ document.addEventListener("DOMContentLoaded", () => {
ul.appendChild(item);
});
let readme = document.querySelector(".readme");
readme.classList.add("rse-fix-readme");
let markdownBody = document.querySelector("article.markdown-body");
let readme = markdownBody.parentElement;
readme.setAttribute("style", "display: flex; padding-right: 0px !important");
readme.appendChild(ul);
setTimeout(() => {
fixStickyNotWorking();
fixGithubTocCompatibility();
});
highlight();
});
// https://michaelmovsesov.com/articles/fix-css-position-sticky-not-working
function fixStickyNotWorking() {
let parent = document.querySelector('.rse-version-list').parentElement;
while (parent) {
const overflow = getComputedStyle(parent).overflow;
if (overflow !== 'visible') {
console.log(overflow, parent);
break;
}
parent = parent.parentElement;
}
if (parent) {
parent.setAttribute("style", "position:relative; z-index:0; overflow: visible");
}
}
// https://web.dev/resize-observer/
function fixGithubTocCompatibility() {
let tocStickyHeader = document.querySelector("#repos-sticky-header");
if (tocStickyHeader) {
let toc = document.querySelector('.rse-version-list');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Hide our TOC if we have no enough space.
if (entry.contentRect.width <= 1040) {
toc.style.display = "none";
} else {
toc.style.display = "block";
}
}
});
observer.observe(tocStickyHeader);
}
}
function scrollToVersion(version) {
let versionElements = Array.from(document.querySelectorAll('.markdown-body>h1'));