diff --git a/js/src/index.js b/js/src/index.js index 7432cc8..594cac3 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -44,6 +44,7 @@ window.addEventListener('DOMContentLoaded', (_) => { // updateScrollPaddingTop(); resizeAsides(); // Resize just after DOM content is loaded. + // And register the function for every height change of the body. const resize_observer = new ResizeObserver(entries => resizeAsides()); resize_observer.observe(document.body); diff --git a/js/src/tocresize.js b/js/src/tocresize.js index 58f749d..da4f5d3 100644 --- a/js/src/tocresize.js +++ b/js/src/tocresize.js @@ -1,7 +1,10 @@ export function resizeAsides() { let height = ""; + + const nftt_layout = document.querySelector(".nftt-layout"); const nftt_content = document.querySelector(".nftt-content"); const nftt_sidebar = document.querySelector(".nftt-sidebar"); + const nftt_sidebar_content = document.querySelector(".nftt-sidebar-content"); const nftt_toc = document.querySelector(".nftt-toc"); if (nftt_content != undefined) { @@ -10,6 +13,7 @@ export function resizeAsides() { : `height: ${nftt_content.clientHeight}px`; } + // Height for nftt-sidebar. // Apply style attribute to nftt-sidebar (when min-width >= 1200px). if (window.matchMedia('(min-width: 1200px)').matches == false) { nftt_sidebar?.setAttribute("style", ""); @@ -17,6 +21,7 @@ export function resizeAsides() { nftt_sidebar?.setAttribute("style", height); } + // Height for nftt-toc. // Apply style attribute to nftt-toc (when min-width >= 992px). if (window.matchMedia('(min-width: 992px)').matches == false) { nftt_toc?.setAttribute("style", ""); @@ -25,7 +30,21 @@ export function resizeAsides() { nftt_toc?.setAttribute("style", height); } - return height; + // Compute new 'grid-template-columns' for nftt-layout. + const max = (window.innerWidth - nftt_content.offsetWidth); + const newmax = nftt_toc + ? Math.floor(max / 2) + : ( + nftt_sidebar_content + ? Math.floor((max + nftt_sidebar_content.offsetWidth) / 2) + : undefined + ); + if (newmax) { + const newgtcols = `minmax(300px, ${newmax}px) 5fr`; + nftt_layout?.setAttribute("style", `grid-template-columns: ${newgtcols}`); + } + + return [height, newmax]; } diff --git a/js/tests/unit/tocresize.spec.js b/js/tests/unit/tocresize.spec.js index 3f09cb1..c0539f0 100644 --- a/js/tests/unit/tocresize.spec.js +++ b/js/tests/unit/tocresize.spec.js @@ -70,8 +70,8 @@ describe('resize', () => { } ); - const resulting_height = resizeAsides(); - expect(resulting_height).toEqual("height: calc(100vh - 7rem)"); + const results = resizeAsides(); + expect(results[0]).toEqual("height: calc(100vh - 7rem)"); }); it('checks resizeAsides when nftt_content shorter than body', () => { @@ -90,7 +90,7 @@ describe('resize', () => { } ); - const resulting_height = resizeAsides(); - expect(resulting_height).toEqual(expected_height); + const results = resizeAsides(); + expect(results[0]).toEqual(expected_height); }); }); \ No newline at end of file diff --git a/scss/_layout.scss b/scss/_layout.scss index 7bc8489..793a911 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -31,8 +31,8 @@ body { @include media-breakpoint-up(xl) { display: grid; grid-template-areas: "sidebar main"; - grid-template-columns: minmax(300px 2fr) 5fr; - gap: 1.5rem; + grid-template-columns: minmax(300px, 1.5fr) 5fr; + gap: 25px; } } @@ -63,10 +63,12 @@ body { display: grid; grid-area: main; grid-template-areas: "content"; + grid-template-columns: minmax(570px, 860px); padding-right: 48px; @include media-breakpoint-down(xl) { padding-right: 0; + grid-template-columns: none; } } @@ -86,7 +88,7 @@ body { @include media-breakpoint-up(lg) { grid-template-areas: "content toc"; - grid-template-columns: minmax(570px, 790px) minmax(190px, 1.3fr); + grid-template-columns: minmax(570px, 760px) minmax(190px, 1.3fr); } } @@ -107,6 +109,11 @@ body { font-family: var(--#{$prefix}documentation-font); font-size: var(--#{$prefix}documentation-font-size); + @include media-breakpoint-down(xl) { + padding-left: 2rem; + padding-right: 2rem; + } + h1, h2, h3, diff --git a/scss/components/_toc.scss b/scss/components/_toc.scss index a8347b9..5f0fa5b 100644 --- a/scss/components/_toc.scss +++ b/scss/components/_toc.scss @@ -140,6 +140,8 @@ z-index: 2; padding-right: .25rem; overflow-y: auto; + // overflow-x: auto; + // white-space: nowrap; @include scrollbars(); } diff --git a/site/index.html b/site/index.html index c90620b..9f9d3ce 100644 --- a/site/index.html +++ b/site/index.html @@ -32,14 +32,14 @@ -
+
Skip to docs navigation Skip to main content
-
-
+ +
@@ -547,14 +551,13 @@

6. Footer links
- -
+
  On this page
-