diff options
| author | Ned Batchelder <ned@nedbatchelder.com> | 2021-10-20 20:43:38 -0400 |
|---|---|---|
| committer | Ned Batchelder <ned@nedbatchelder.com> | 2021-10-20 20:43:38 -0400 |
| commit | e2281bc901150bafb6f64e62807b32abf22520a7 (patch) | |
| tree | d897c559f570938d35720232f86a4cabd6286004 /coverage/htmlfiles | |
| parent | afe6cf34d022e8dbbaa47826c487a98ca6832721 (diff) | |
| download | python-coveragepy-git-e2281bc901150bafb6f64e62807b32abf22520a7.tar.gz | |
fix(html): scrolling to an anchor ensures the line is visible
The sticky header was hiding the line scrolled to the top of the window.
Along the way, also changed to use classes on <body> to control the
sticky header, and moved the header code into a function.
Diffstat (limited to 'coverage/htmlfiles')
| -rw-r--r-- | coverage/htmlfiles/coverage_html.js | 43 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.css | 6 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.scss | 9 |
3 files changed, 34 insertions, 24 deletions
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js index 514103c7..182e518c 100644 --- a/coverage/htmlfiles/coverage_html.js +++ b/coverage/htmlfiles/coverage_html.js @@ -277,25 +277,7 @@ coverage.pyfile_ready = function ($) { coverage.assign_shortkeys(); coverage.wire_up_help_panel(); coverage.init_scroll_markers(); - - const sticky = document.querySelector('#sticky_header'); - const header = document.querySelector('header'); - const header_bottom = document.querySelector('header .content .stats').getBoundingClientRect().top; - - function updateHeader() { - if (window.scrollY > header_bottom) { - sticky.classList.add('visible'); - header.classList.add('hidden'); - } else { - sticky.classList.remove('visible'); - header.classList.remove('hidden'); - } - } - - updateHeader(); - window.addEventListener('scroll', function() { - updateHeader(); - }); + coverage.wire_up_sticky_header(); // Rebuild scroll markers when the window height changes. $(window).resize(coverage.build_scroll_markers); @@ -627,3 +609,26 @@ coverage.build_scroll_markers = function () { previous_line = line_number; }); }; + +coverage.wire_up_sticky_header = function () { + const body = document.querySelector('body'); + const header_bottom = ( + document.querySelector('header .content .stats').getBoundingClientRect().top - + document.querySelector('header').getBoundingClientRect().top + ); + + function updateHeader() { + if (window.scrollY > header_bottom) { + body.classList.remove('bighead'); + body.classList.add('littlehead'); + } else { + body.classList.add('bighead'); + body.classList.remove('littlehead'); + } + } + + updateHeader(); + window.addEventListener('scroll', function() { + updateHeader(); + }); +}; diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css index aa7341b5..245aa83d 100644 --- a/coverage/htmlfiles/style.css +++ b/coverage/htmlfiles/style.css @@ -36,7 +36,7 @@ header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; } header .content { padding: 1rem 3.5rem; } -header.hidden { visibility: hidden; } +.littlehead header { visibility: hidden; } main { position: relative; z-index: 1; } @@ -56,7 +56,7 @@ footer .content { padding: 0; color: #666; font-style: italic; } #sticky_header .content p { font-size: 1em; } -#sticky_header.visible { display: block; } +.littlehead #sticky_header { display: block; } h1 { font-size: 1.25em; display: inline-block; } @@ -134,7 +134,7 @@ h2.stats { margin-top: .5em; font-size: 1em; } #source { padding: 1em 0 1em 3.5rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; } -#source p { position: relative; white-space: pre; } +#source p { margin-top: -4em; padding-top: 4em; position: relative; white-space: pre; } #source p * { box-sizing: border-box; } diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss index 0c83d746..b6a7a155 100644 --- a/coverage/htmlfiles/style.scss +++ b/coverage/htmlfiles/style.scss @@ -168,7 +168,7 @@ header { padding: 1rem $left-gutter; } - &.hidden { + .littlehead & { visibility: hidden; } } @@ -213,7 +213,7 @@ footer .content { } } - &.visible { + .littlehead & { display: block; } } @@ -381,6 +381,11 @@ $border-indicator-width: .2em; font-family: $font-code; p { + // These two lines make anchors to the line scroll the line to be + // visible beneath the fixed-position header. + margin-top: -4em; + padding-top: 4em; + // position relative makes position:absolute pop-ups appear in the right place. position: relative; white-space: pre; |