diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index d9491c7c18..a1f0a82043 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -20,6 +20,8 @@ This document shows you what's new in the latest release and flags it with one o ## 5.27.0.beta (XXXX-XX-XX) {#5270} +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can scroll forward and backward thru all headings of a page by using `ALT + 🡑` and `ALT + 🡓`. This also works for the `PRINT` output format + - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The breadcrumbs used in the topbar, search results and the taxonomy term lists are now using the pages frontmatter `linktitle` instead of `title` if set. --- diff --git a/static/css/theme.css b/static/css/theme.css index e0e8bcbcff..d9dc64ad3c 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -485,16 +485,16 @@ body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper { } body:not(.print) #R-body-inner.narrow { - padding: 2rem 9.75rem; + padding: 0 9.75rem 2rem 9.75rem; } @media screen and (max-width: 59.999rem) { body:not(.print) #R-body-inner.narrow { - padding: 1rem 6.5rem; + padding: 0 6.5rem 1rem 6.5rem; } } @media screen and (max-width: 47.999rem) { body:not(.print) #R-body-inner.narrow { - padding: .375rem 3.25rem; + padding: 0 3.25rem .375rem 3.25rem; } } @@ -504,6 +504,19 @@ body:not(.print) #R-body-inner.narrow { margin-top: 0; text-align: center; } +body:not(.print) #R-body-inner.narrow div.article-subheading{ + margin-top: 2rem; +} +@media screen and (max-width: 59.999rem) { + body:not(.print) #R-body-inner.narrow div.article-subheading{ + margin-top: 1rem; + } +} +@media screen and (max-width: 47.999rem) { + body:not(.print) #R-body-inner.narrow div.article-subheading{ + margin-top: .375rem; + } +} body:not(.print) #R-body-inner.narrow p { font-size: 1.2rem; diff --git a/static/js/theme.js b/static/js/theme.js index 5ac91acc08..775842fe8f 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -703,7 +703,57 @@ function initChroma( update ){ link.setAttribute( 'href', new_path ); } -function initArrowNav(){ +function initArrowVerticalNav(){ + var topMain = 0; + if( !isPrint ){ + topMain = document.querySelector("main").getClientRects()[0].top; + } + + document.addEventListener('keydown', function(event){ + var elems = Array.from( document.querySelectorAll( `main :not(.include.hide-first-heading) > :where( + .article-subheading, + :not(.article-subheading) + h1:not(.a11y-only), + h1:not(.a11y-only):first-child, + h2, h3, h4, h5, h6 + ), + main .include.hide-first-heading > :where( h1, h2, h3, h4, h5, h6 ) ~ :where( h1, h2, h3, h4, h5, h6 ) + ` )); + if( !event.shiftKey && !event.ctrlKey && event.altKey && !event.metaKey ){ + if( event.which == 38 ){ // up + var target = isPrint ? document.querySelector( '#R-body' ) : document.querySelector( '.flex-block-wrapper' ); + elems.some( function( elem, i ){ + var top = elem.getBoundingClientRect().top; + var topBoundary = top - topMain; + if( topBoundary > -1 ){ + target.scrollIntoView(); + return true; + } + target = elem + }) + } + else if( event.which == 40 ){ // down + elems.some( function( elem, i ){ + var top = elem.getBoundingClientRect().top; + var topBoundary = top - topMain; + if( topBoundary > -1 && topBoundary < 1 ){ + if( i+1 < elems.length ){ + var target = elems[ i+1 ]; + target.scrollIntoView(); + } + return true; + } + if( topBoundary >= 1 ){ + var target = elem; + target.scrollIntoView(); + return true; + } + }) + } + } + }); +} + +function initArrowHorizontalNav(){ if( isPrint ){ return; } @@ -1546,7 +1596,8 @@ if( window.themeUseOpenapi ){ } ready( function(){ - initArrowNav(); + initArrowVerticalNav(); + initArrowHorizontalNav(); initMermaid(); initOpenapi(); initMenuScrollbar();