summaryrefslogtreecommitdiff
path: root/coverage/htmlfiles
diff options
context:
space:
mode:
authorNed Batchelder <ned@nedbatchelder.com>2021-10-16 20:27:10 -0400
committerNed Batchelder <ned@nedbatchelder.com>2021-10-17 11:05:45 -0400
commitb2ca5af1e1811d2ac00a552df4703e8f318582b8 (patch)
tree3ab5141576774065b67090fe7039ae91eab39c06 /coverage/htmlfiles
parente0775064500aad4a8b51e50db80587be62607e3d (diff)
downloadpython-coveragepy-git-b2ca5af1e1811d2ac00a552df4703e8f318582b8.tar.gz
feat(html): sticky header on pyfile
Diffstat (limited to 'coverage/htmlfiles')
-rw-r--r--coverage/htmlfiles/coverage_html.js20
-rw-r--r--coverage/htmlfiles/pyfile.html15
-rw-r--r--coverage/htmlfiles/style.css20
-rw-r--r--coverage/htmlfiles/style.scss43
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}}%&nbsp;&nbsp;
+ <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;
View Lorry Controller Status