Skip to content

Commit

Permalink
refactor(html): a one-header sticky header
Browse files Browse the repository at this point in the history
  • Loading branch information
@nedbat
nedbat committed Oct 23, 2021
1 parent e2281bc commit 5da82cc
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 121 deletions.
16 changes: 6 additions & 10 deletions coverage/htmlfiles/coverage_html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
};
29 changes: 8 additions & 21 deletions coverage/htmlfiles/pyfile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
64 changes: 33 additions & 31 deletions coverage/htmlfiles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,27 @@ 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; } }

@media (prefers-color-scheme: dark) { header { border-color: #333; } }

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; }

Expand All @@ -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; }
Expand All @@ -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; }

Expand Down
61 changes: 33 additions & 28 deletions coverage/htmlfiles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,45 @@ 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);

.content {
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;
}
}
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
64 changes: 33 additions & 31 deletions tests/gold/html/styled/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,27 @@ 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; } }

@media (prefers-color-scheme: dark) { header { border-color: #333; } }

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; }

Expand All @@ -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; }
Expand All @@ -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; }

Expand Down

0 comments on commit 5da82cc

Please sign in to comment.