diff options
| author | Ned Batchelder <ned@nedbatchelder.com> | 2021-10-16 20:27:10 -0400 |
|---|---|---|
| committer | Ned Batchelder <ned@nedbatchelder.com> | 2021-10-17 11:05:45 -0400 |
| commit | b2ca5af1e1811d2ac00a552df4703e8f318582b8 (patch) | |
| tree | 3ab5141576774065b67090fe7039ae91eab39c06 /coverage | |
| parent | e0775064500aad4a8b51e50db80587be62607e3d (diff) | |
| download | python-coveragepy-git-b2ca5af1e1811d2ac00a552df4703e8f318582b8.tar.gz | |
feat(html): sticky header on pyfile
Diffstat (limited to 'coverage')
| -rw-r--r-- | coverage/htmlfiles/coverage_html.js | 20 | ||||
| -rw-r--r-- | coverage/htmlfiles/pyfile.html | 15 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.css | 20 | ||||
| -rw-r--r-- | coverage/htmlfiles/style.scss | 43 |
4 files changed, 85 insertions, 13 deletions
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js index 30d3a067..514103c7 100644 --- a/coverage/htmlfiles/coverage_html.js +++ b/coverage/htmlfiles/coverage_html.js @@ -276,9 +276,27 @@ 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(); + }); + // Rebuild scroll markers when the window height changes. $(window).resize(coverage.build_scroll_markers); }; diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html index 33cab95a..55194612 100644 --- a/coverage/htmlfiles/pyfile.html +++ b/coverage/htmlfiles/pyfile.html @@ -24,6 +24,20 @@ </head> <body class="pyfile"> +<aside id="sticky_header"> + <div class="content stats"> + <p><b>{{relative_filename|escape}}</b> : {{nums.pc_covered_str}}% + <button type="button" class="{{category.run}} button_toggle_run" title="Toggle lines run">{{nums.n_executed}}</button> + <button type="button" class="{{category.mis}} button_toggle_mis" title="Toggle lines missing">{{nums.n_missing}}</button> + <button type="button" class="{{category.exc}} button_toggle_exc" title="Toggle lines excluded">{{nums.n_excluded}}</button> + {% if has_arcs %} + <button type="button" class="{{category.par}} button_toggle_par" title="Toggle lines partially run">{{nums.n_partial_branches}}</button> + {% endif %} + <img id="keyboard_icon" src="keybd_closed.png" alt="Show keyboard shortcuts" /> + </p> + </div> +</aside> + <header> <div class="content"> <h1>Coverage for <b>{{relative_filename|escape}}</b> : @@ -37,7 +51,6 @@ <button type="button" class="{{category.run}} shortkey_r button_toggle_run" title="Toggle lines run">{{nums.n_executed}} run</button> <button type="button" class="{{category.mis}} shortkey_m button_toggle_mis" title="Toggle lines missing">{{nums.n_missing}} missing</button> <button type="button" class="{{category.exc}} shortkey_x button_toggle_exc" title="Toggle lines excluded">{{nums.n_excluded}} excluded</button> - {% if has_arcs %} <button type="button" class="{{category.par}} shortkey_p button_toggle_par" title="Toggle lines partially run">{{nums.n_partial_branches}} partial</button> {% endif %} diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css index 8c9100c1..365d024e 100644 --- a/coverage/htmlfiles/style.css +++ b/coverage/htmlfiles/style.css @@ -28,12 +28,18 @@ a.nav { text-decoration: none; color: inherit; } a.nav:hover { text-decoration: underline; color: inherit; } -header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #eee; } +header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; } @media (prefers-color-scheme: dark) { header { background: black; } } @media (prefers-color-scheme: dark) { header { border-color: #333; } } +header .content { padding: 1rem 3.5rem; } + +header.hidden { visibility: hidden; } + +main { position: relative; z-index: 1; } + .indexfile footer { margin: 1rem 3.5rem; } .pyfile footer { margin: 1rem 1rem; } @@ -44,7 +50,13 @@ footer .content { padding: 0; color: #666; font-style: italic; } #index { margin: 1rem 0 0 3.5rem; } -header .content { padding: 1rem 3.5rem; } +#sticky_header { display: none; position: fixed; z-index: 2; left: 0; right: 0; background: #f8f8f8; border-bottom: 1px solid #ccc; } + +#sticky_header .content { padding: 0.5rem 3.5rem; } + +#sticky_header .content p { font-size: 1em; } + +#sticky_header.visible { display: block; } h1 { font-size: 1.25em; display: inline-block; } @@ -68,8 +80,6 @@ h2.stats { margin-top: .5em; font-size: 1em; } .stats button:active, .stats button:focus { outline: 2px dashed #007acc; } -.stats button:active, .stats button:focus { outline: 2px dashed #007acc; } - .stats button.run { background: #eeffee; } @media (prefers-color-scheme: dark) { .stats button.run { background: #373d29; } } @@ -280,7 +290,7 @@ h2.stats { margin-top: .5em; font-size: 1em; } #index tr.file:hover td.name { text-decoration: underline; color: inherit; } -#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: #fff; border-left: 1px solid #eee; will-change: transform; } +#scroll_marker { position: fixed; z-index: 3; right: 0; top: 0; width: 16px; height: 100%; background: #fff; border-left: 1px solid #eee; will-change: transform; } @media (prefers-color-scheme: dark) { #scroll_marker { background: #1e1e1e; } } diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss index fd6394e2..c8c16bb3 100644 --- a/coverage/htmlfiles/style.scss +++ b/coverage/htmlfiles/style.scss @@ -73,6 +73,7 @@ $dark-context-bg-color: #056; // // Mixins and utilities // + @mixin background-dark($color) { @media (prefers-color-scheme: dark) { background: $color; @@ -161,8 +162,21 @@ header { background: $light-gray1; @include background-dark(black); width: 100%; - border-bottom: 1px solid $light-gray2; + border-bottom: 1px solid $light-gray3; @include border-color-dark($dark-gray2); + + .content { + padding: 1rem $left-gutter; + } + + &.hidden { + visibility: hidden; + } +} + +main { + position: relative; + z-index: 1; } .indexfile footer { @@ -184,11 +198,29 @@ footer .content { margin: 1rem 0 0 $left-gutter; } -// Header styles -header .content { - padding: 1rem $left-gutter; +#sticky_header { + display: none; + position: fixed; + z-index: 2; + left: 0; + right: 0; + background: $light-gray1; + border-bottom: 1px solid $light-gray3; + + .content { + padding: .5rem $left-gutter; + p { + font-size: 1em; + } + } + + &.visible { + display: block; + } } +// Header styles + h1 { font-size: 1.25em; display: inline-block; @@ -230,8 +262,6 @@ h2.stats { @include border-color-dark($dark-gray3); @include focus-border; - @include focus-border; - &.run { background: mix($light-run-bg, $light-bg, $off-button-lighten); @include background-dark($dark-run-bg); @@ -640,6 +670,7 @@ $border-indicator-width: .2em; // scroll marker styles #scroll_marker { position: fixed; + z-index: 3; right: 0; top: 0; width: 16px; |