refactor(html): a one-header sticky header

author: Ned Batchelder <ned@nedbatchelder.com> 2021-10-22 22:30:08 -0400
committer: Ned Batchelder <ned@nedbatchelder.com> 2021-10-23 07:26:44 -0400
commit: 5da82cc579a69b5a53f9c15dfce28e37917d1579 (patch)
tree: 4cca28877e06a7c7816049f5d98bc85d3ebdc629
parent: e2281bc901150bafb6f64e62807b32abf22520a7 (diff)
download: python-coveragepy-git-5da82cc579a69b5a53f9c15dfce28e37917d1579.tar.gz
5 files changed, 113 insertions, 121 deletions
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 182e518c..cba668a8 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -611,24 +611,20 @@ coverage.build_scroll_markers = function () {
 };
 
 coverage.wire_up_sticky_header = function () {
-    const body = document.querySelector('body');
+    const header = document.querySelector('header');
     const header_bottom = (
-        document.querySelector('header .content .stats').getBoundingClientRect().top -
-        document.querySelector('header').getBoundingClientRect().top
+        header.querySelector('.content h2').getBoundingClientRect().top -
+        header.getBoundingClientRect().top
     );
 
     function updateHeader() {
         if (window.scrollY > header_bottom) {
-            body.classList.remove('bighead');
-            body.classList.add('littlehead');
+            header.classList.add('sticky');
         } else {
-            body.classList.add('bighead');
-            body.classList.remove('littlehead');
+            header.classList.remove('sticky');
         }
     }
 
+    window.addEventListener('scroll', updateHeader);
     updateHeader();
-    window.addEventListener('scroll', function() {
-        updateHeader();
-    });
 };
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 55194612..54e21708 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -24,35 +24,22 @@
 </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> :
+        <h1>
+            <span class="text">Coverage for </span><b>{{relative_filename|escape}}</b> :
             <span class="pc_cov">{{nums.pc_covered_str}}%</span>
         </h1>
 
         <img id="keyboard_icon" src="keybd_closed.png" alt="Show keyboard shortcuts" />
 
-        <h2 class="stats">
-            {{nums.n_statements}} statements &nbsp;
-            <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>
+        <h2>
+            <span class="text">{{nums.n_statements}} statements &nbsp;</span>
+            <button type="button" class="{{category.run}} shortkey_r button_toggle_run" title="Toggle lines run">{{nums.n_executed}}<span class="text"> run</span></button>
+            <button type="button" class="{{category.mis}} shortkey_m button_toggle_mis" title="Toggle lines missing">{{nums.n_missing}}<span class="text"> missing</span></button>
+            <button type="button" class="{{category.exc}} shortkey_x button_toggle_exc" title="Toggle lines excluded">{{nums.n_excluded}}<span class="text"> excluded</span></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>
+            <button type="button" class="{{category.par}} shortkey_p button_toggle_par" title="Toggle lines partially run">{{nums.n_partial_branches}}<span class="text"> partial</span></button>
             {% endif %}
         </h2>
     </div>
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index 245aa83d..793f0bd2 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -28,7 +28,7 @@ a.nav { text-decoration: none; color: inherit; }
 
 a.nav:hover { text-decoration: underline; color: inherit; }
 
-header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; }
+header { background: #f8f8f8; width: 100%; z-index: 2; border-bottom: 1px solid #ccc; }
 
 @media (prefers-color-scheme: dark) { header { background: black; } }
 
@@ -36,7 +36,19 @@ header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; }
 
 header .content { padding: 1rem 3.5rem; }
 
-.littlehead header { visibility: hidden; }
+header h2 { margin-top: .5em; font-size: 1em; }
+
+header.sticky { position: fixed; left: 0; right: 0; height: 2.5em; }
+
+header.sticky .text { display: none; }
+
+header.sticky h1, header.sticky h2 { font-size: 1em; margin-top: 0; display: inline-block; }
+
+header.sticky .content { padding: 0.5rem 3.5rem; }
+
+header.sticky .content p { font-size: 1em; }
+
+header.sticky ~ #source { padding-top: 6.5em; }
 
 main { position: relative; z-index: 1; }
 
@@ -50,14 +62,6 @@ footer .content { padding: 0; color: #666; font-style: italic; }
 
 #index { margin: 1rem 0 0 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; }
-
-.littlehead #sticky_header { display: block; }
-
 h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container { float: right; margin: 0 2em 0 0; }
@@ -72,45 +76,43 @@ h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container input:focus { border-color: #007acc; }
 
-h2.stats { margin-top: .5em; font-size: 1em; }
-
-.stats button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; }
+header button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; }
 
-@media (prefers-color-scheme: dark) { .stats button { border-color: #444; } }
+@media (prefers-color-scheme: dark) { header button { border-color: #444; } }
 
-.stats button:active, .stats button:focus { outline: 2px dashed #007acc; }
+header button:active, header button:focus { outline: 2px dashed #007acc; }
 
-.stats button.run { background: #eeffee; }
+header button.run { background: #eeffee; }
 
-@media (prefers-color-scheme: dark) { .stats button.run { background: #373d29; } }
+@media (prefers-color-scheme: dark) { header button.run { background: #373d29; } }
 
-.stats button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; }
+header button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.run.show_run { background: #373d29; } }
+@media (prefers-color-scheme: dark) { header button.run.show_run { background: #373d29; } }
 
-.stats button.mis { background: #ffeeee; }
+header button.mis { background: #ffeeee; }
 
-@media (prefers-color-scheme: dark) { .stats button.mis { background: #4b1818; } }
+@media (prefers-color-scheme: dark) { header button.mis { background: #4b1818; } }
 
-.stats button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; }
+header button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.mis.show_mis { background: #4b1818; } }
+@media (prefers-color-scheme: dark) { header button.mis.show_mis { background: #4b1818; } }
 
-.stats button.exc { background: #f7f7f7; }
+header button.exc { background: #f7f7f7; }
 
-@media (prefers-color-scheme: dark) { .stats button.exc { background: #333; } }
+@media (prefers-color-scheme: dark) { header button.exc { background: #333; } }
 
-.stats button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; }
+header button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.exc.show_exc { background: #333; } }
+@media (prefers-color-scheme: dark) { header button.exc.show_exc { background: #333; } }
 
-.stats button.par { background: #ffffd5; }
+header button.par { background: #ffffd5; }
 
-@media (prefers-color-scheme: dark) { .stats button.par { background: #650; } }
+@media (prefers-color-scheme: dark) { header button.par { background: #650; } }
 
-.stats button.par.show_par { background: #ffa; border: 2px solid #bbbb00; margin: 0 .1em; }
+header button.par.show_par { background: #ffa; border: 2px solid #bbbb00; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.par.show_par { background: #650; } }
+@media (prefers-color-scheme: dark) { header button.par.show_par { background: #650; } }
 
 .help_panel, #source p .annotate.long { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; color: #333; padding: .25em .5em; }
 
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index b6a7a155..95511e70 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -161,6 +161,7 @@ header {
     background: $light-gray1;
     @include background-dark(black);
     width: 100%;
+    z-index: 2;
     border-bottom: 1px solid $light-gray3;
     @include border-color-dark($dark-gray2);
 
@@ -168,8 +169,37 @@ header {
         padding: 1rem $left-gutter;
     }
 
-    .littlehead & {
-        visibility: hidden;
+    h2 {
+        margin-top: .5em;
+        font-size: 1em;
+    }
+
+    &.sticky {
+        position: fixed;
+        left: 0;
+        right: 0;
+        height: 2.5em;
+
+        .text {
+            display: none;
+        }
+
+        h1, h2 {
+            font-size: 1em;
+            margin-top: 0;
+            display: inline-block;
+        }
+
+        .content {
+            padding: .5rem $left-gutter;
+            p {
+                font-size: 1em;
+            }
+        }
+
+        & ~ #source {
+            padding-top: 6.5em;
+        }
     }
 }
 
@@ -197,27 +227,6 @@ footer .content {
     margin: 1rem 0 0 $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;
-        }
-    }
-
-    .littlehead & {
-        display: block;
-    }
-}
-
 // Header styles
 
 h1 {
@@ -244,11 +253,7 @@ h1 {
     }
 }
 
-h2.stats {
-    margin-top: .5em;
-    font-size: 1em;
-}
-.stats button {
+header button {
     font-family: inherit;
     font-size: inherit;
     border: 1px solid;
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index 245aa83d..793f0bd2 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -28,7 +28,7 @@ a.nav { text-decoration: none; color: inherit; }
 
 a.nav:hover { text-decoration: underline; color: inherit; }
 
-header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; }
+header { background: #f8f8f8; width: 100%; z-index: 2; border-bottom: 1px solid #ccc; }
 
 @media (prefers-color-scheme: dark) { header { background: black; } }
 
@@ -36,7 +36,19 @@ header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #ccc; }
 
 header .content { padding: 1rem 3.5rem; }
 
-.littlehead header { visibility: hidden; }
+header h2 { margin-top: .5em; font-size: 1em; }
+
+header.sticky { position: fixed; left: 0; right: 0; height: 2.5em; }
+
+header.sticky .text { display: none; }
+
+header.sticky h1, header.sticky h2 { font-size: 1em; margin-top: 0; display: inline-block; }
+
+header.sticky .content { padding: 0.5rem 3.5rem; }
+
+header.sticky .content p { font-size: 1em; }
+
+header.sticky ~ #source { padding-top: 6.5em; }
 
 main { position: relative; z-index: 1; }
 
@@ -50,14 +62,6 @@ footer .content { padding: 0; color: #666; font-style: italic; }
 
 #index { margin: 1rem 0 0 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; }
-
-.littlehead #sticky_header { display: block; }
-
 h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container { float: right; margin: 0 2em 0 0; }
@@ -72,45 +76,43 @@ h1 { font-size: 1.25em; display: inline-block; }
 
 #filter_container input:focus { border-color: #007acc; }
 
-h2.stats { margin-top: .5em; font-size: 1em; }
-
-.stats button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; }
+header button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; }
 
-@media (prefers-color-scheme: dark) { .stats button { border-color: #444; } }
+@media (prefers-color-scheme: dark) { header button { border-color: #444; } }
 
-.stats button:active, .stats button:focus { outline: 2px dashed #007acc; }
+header button:active, header button:focus { outline: 2px dashed #007acc; }
 
-.stats button.run { background: #eeffee; }
+header button.run { background: #eeffee; }
 
-@media (prefers-color-scheme: dark) { .stats button.run { background: #373d29; } }
+@media (prefers-color-scheme: dark) { header button.run { background: #373d29; } }
 
-.stats button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; }
+header button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.run.show_run { background: #373d29; } }
+@media (prefers-color-scheme: dark) { header button.run.show_run { background: #373d29; } }
 
-.stats button.mis { background: #ffeeee; }
+header button.mis { background: #ffeeee; }
 
-@media (prefers-color-scheme: dark) { .stats button.mis { background: #4b1818; } }
+@media (prefers-color-scheme: dark) { header button.mis { background: #4b1818; } }
 
-.stats button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; }
+header button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.mis.show_mis { background: #4b1818; } }
+@media (prefers-color-scheme: dark) { header button.mis.show_mis { background: #4b1818; } }
 
-.stats button.exc { background: #f7f7f7; }
+header button.exc { background: #f7f7f7; }
 
-@media (prefers-color-scheme: dark) { .stats button.exc { background: #333; } }
+@media (prefers-color-scheme: dark) { header button.exc { background: #333; } }
 
-.stats button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; }
+header button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.exc.show_exc { background: #333; } }
+@media (prefers-color-scheme: dark) { header button.exc.show_exc { background: #333; } }
 
-.stats button.par { background: #ffffd5; }
+header button.par { background: #ffffd5; }
 
-@media (prefers-color-scheme: dark) { .stats button.par { background: #650; } }
+@media (prefers-color-scheme: dark) { header button.par { background: #650; } }
 
-.stats button.par.show_par { background: #ffa; border: 2px solid #bbbb00; margin: 0 .1em; }
+header button.par.show_par { background: #ffa; border: 2px solid #bbbb00; margin: 0 .1em; }
 
-@media (prefers-color-scheme: dark) { .stats button.par.show_par { background: #650; } }
+@media (prefers-color-scheme: dark) { header button.par.show_par { background: #650; } }
 
 .help_panel, #source p .annotate.long { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; color: #333; padding: .25em .5em; }
author	Ned Batchelder <ned@nedbatchelder.com>	2021-10-22 22:30:08 -0400
committer	Ned Batchelder <ned@nedbatchelder.com>	2021-10-23 07:26:44 -0400
commit	5da82cc579a69b5a53f9c15dfce28e37917d1579 (patch)
tree	4cca28877e06a7c7816049f5d98bc85d3ebdc629
parent	e2281bc901150bafb6f64e62807b32abf22520a7 (diff)
download	python-coveragepy-git-5da82cc579a69b5a53f9c15dfce28e37917d1579.tar.gz