Skip to content

Make istio.io support quality print output. #1163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 11, 2018
+152 −53
Merged

Make istio.io support quality print output. #1163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b8fffd
Make istio.io support quality print output.
Apr 7, 2018
a58259e
- Ensure that PRE blocks are fully expanded when printing instead of
Apr 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="footer">
<div class="footer d-print-none">
<footer>
<div class="container-fluid">
<div class="row">
Expand Down
2 changes: 1 addition & 1 deletion _includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

{% include home.html %}

<nav class="sidebar">
<nav class="sidebar d-print-none">
<div class="spacer"></div>
<div class="directory" role="tablist">

Expand Down
9 changes: 7 additions & 2 deletions _layouts/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<h1 id="title">{{page.title}}</h1>

{% if needTOC %}
<nav class="toc-inlined d-lg-none">
<nav class="toc-inlined d-lg-none d-print-none">
<div class="directory" role="directory">
{{ toc }}
</div>
Expand All @@ -41,10 +41,15 @@ <h1 id="title">{{page.title}}</h1>

{{ content}}
</main>

<div class="d-none d-print-block">
<h2>Links</h2>
<ol id="endnotes"></ol>
</div>
</div>

{% if needTOC %}
<div class="col-12 col-md-2 d-none d-lg-block">
<div class="col-12 col-md-2 d-none d-lg-block d-print-none">
<nav class="toc">
<div class="spacer"></div>
<div class="directory" role="directory">
Expand Down
2 changes: 1 addition & 1 deletion _layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
<body class="language-unknown theme-unknown">
{{ content }}

<div class="d-lg-none">
<div class="d-lg-none d-print-none">
<button id="scroll-to-top" aria-hidden="true" onclick="scrollToTop()" title="Back to top"><i class="fa fa-lg fa-arrow-up"></i></button>
</div>

Expand Down
15 changes: 11 additions & 4 deletions _layouts/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1 id="title">{{page.title}}</h1>
{% endif %}

{% if needTOC %}
<nav class="toc-inlined d-lg-none">
<nav class="toc-inlined d-lg-none d-print-none">
<div class="directory" role="directory">
{{ toc }}
</div>
Expand All @@ -59,8 +59,9 @@ <h1 id="title">{{page.title}}</h1>

{% include blog_post_nav.html %}

<br/><hr/><br/>
<div class="container-fluid">
<div class="container-fluid d-print-none">
<br/><hr/><br/>

<div class="row">
<div class="col-6">
{% if prev_post_url %}
Expand All @@ -74,10 +75,16 @@ <h1 id="title">{{page.title}}</h1>
</div>
</div>
</div>


<div class="d-none d-print-block">
<h2>Links</h2>
<ol id="endnotes"></ol>
</div>
</div>

{% if needTOC %}
<div class="col-12 col-md-2 d-none d-lg-block">
<div class="col-12 col-md-2 d-none d-lg-block d-print-none">
<nav class="toc">
<div class="spacer"></div>
<div class="directory" role="directory">
Expand Down
9 changes: 7 additions & 2 deletions _layouts/docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<h1 id="title">{{page.title}}</h1>

{% if needTOC %}
<nav class="toc-inlined d-lg-none">
<nav class="toc-inlined d-lg-none d-print-none">
<div class="directory" role="directory">
{{ toc }}
</div>
Expand All @@ -41,10 +41,15 @@ <h1 id="title">{{page.title}}</h1>

{{content}}
</main>

<div class="d-none d-print-block">
<h2>Links</h2>
<ol id="endnotes"></ol>
</div>
</div>

{% if needTOC %}
<div class="col-12 col-md-2 d-none d-lg-block">
<div class="col-12 col-md-2 d-none d-lg-block d-print-none">
<nav class="toc">
<div class="spacer"></div>
<div class="directory" role="directory">
Expand Down
7 changes: 6 additions & 1 deletion _layouts/help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,15 @@ <h1 id="title">{{page.title}}</h1>

{{ content}}
</main>

<div class="d-none d-print-block">
<h2>Links</h2>
<ol id="endnotes"></ol>
</div>
</div>

{% if needTOC %}
<div class="col-12 col-md-3 d-none d-lg-block">
<div class="col-12 col-md-3 d-none d-lg-block d-print-none">
<nav class="toc">
<div class="spacer"></div>
<div class="directory" role="directory">
Expand Down
98 changes: 72 additions & 26 deletions _sass/base/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
// This is a hack such that when we link to a fragment on a page, the page
// scrolls correctly in relation to the fixed header. Without this hack, the
// page scrolls with the fragment at the top of the page, below the header!
*[id]:before {
display: block;
content: ' ';
margin-top: -1.8em;
height: 1.8em;
visibility: hidden;
}
@media screen {
// This is a hack such that when we link to a fragment on a page, the page
// scrolls correctly in relation to the fixed header. Without this hack, the
// page scrolls with the fragment at the top of the page, below the header!
*[id]:before {
display: block;
content: ' ';
margin-top: -1.8em;
height: 1.8em;
visibility: hidden;
}

// This is here to undo the effect of the above for table rows. Otherwise,
// table rows with ids don't render properly
tr[id]:before {
content: normal;
}
// This is here to undo the effect of the above for table rows. Otherwise,
// table rows with ids don't render properly
tr[id]:before {
content: normal;
}

html {
overflow-y: scroll;
position: relative;
min-height: 100%;
}
html {
overflow-y: scroll;
position: relative;
min-height: 100%;
}

body {
padding-top: $headerHeight;
margin-bottom: $footerHeight;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: $textColor;
background-color: $backgroundColor;
body {
padding-top: $headerHeight;
margin-bottom: $footerHeight;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: $textColor;
background-color: $backgroundColor;
}
}

a {
Expand Down Expand Up @@ -147,6 +149,10 @@ pre {
display: block;
padding: .5em;
}

@media print {
max-height: unset;
}
}

div.highlight {
Expand Down Expand Up @@ -289,6 +295,12 @@ dt:hover .header-link {
opacity: 1;
}

@media print {
.header-link {
display: none;
}
}

em {
font-style: italic;
}
Expand Down Expand Up @@ -358,3 +370,37 @@ code {
color: $textBrandHighlightColor;
}
}

@media screen {
.endnote-ref {
display: none;
}
}

@media print {
// Soak up space used up by the TOC when printing
.col-md-9, .col-lg-7, .col-xl-8 {
max-width: 83.2%;
flex: 0 0 83.2%;
}

// Soak up space used up by the TOC when printing
.col-12 {
max-width: 100%;
flex: 0 0 100%;
}

h1, h2, h3 {
color: #000;
background: none;
page-break-after: avoid;
}

img {
max-width: 100% !important;
}

pre, blockquote, img {
page-break-inside: avoid;
}
}
20 changes: 6 additions & 14 deletions _sass/modules/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
@media screen and (max-width: 767px) {
@media screen and (max-width: 767px), print {
.row-offcanvas {
position: relative;
transition: all .25s ease-out;
}

.row-offcanvas-right {
right: 0;
}

.row-offcanvas-left {
left: 0;
}

.row-offcanvas-right .sidebar-offcanvas {
.sidebar-offcanvas {
right: -100%; /* 12 columns */
}

.row-offcanvas-right.active .sidebar-offcanvas {
right: -50%; /* 6 columns */
}

.row-offcanvas-left .sidebar-offcanvas {
left: -100%; /* 12 columns */
}
Expand All @@ -28,10 +20,6 @@
left: -50%; /* 6 columns */
}

.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}

.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
Expand Down Expand Up @@ -161,6 +149,10 @@
color: $togglerColor;
border: 1px solid $togglerColor;
border-radius: 0 10px 10px 0;

@media print {
display: none;
}
}

.sidebar-toggler:hover {
Expand Down
39 changes: 39 additions & 0 deletions js/misc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,11 +224,50 @@ function patchDOM() {
}
}

function createEndnotes() {
var notes = document.getElementById("endnotes");
if (notes == undefined) {
return;
}

// look for anchors in the main section of the doc only (skip headers, footers, tocs, nav bars, etc)
var main = document.getElementsByTagName("main")[0];
var links = main.getElementsByTagName("a");
var count = 1;
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.pathname == location.pathname) {
// skip links on the current page
continue;
}

if (link.pathname.endsWith("/") && link.hash != "") {
// skip links on the current page
continue;
}

if (link.parentElement.tagName == "FIGURE") {
// skip links inside figures
continue;
}

// add the superscript reference
link.insertAdjacentHTML("afterend", "<sup class='endnote-ref'>" + count + "</sup>");

// and add a list entry for the link
var li = document.createElement("li");
li.innerText = link.href;
notes.appendChild(li);
count++;
}
}

attachCopyButtons();
attachLinksToHeaders();
attachLinksToDefinedTerms();
makeOutsideLinksOpenInTabs();
loadExternalPreBlocks();
createEndnotes();
}

// Based on the scroll position, make the "scroll to top" button visible or not
Expand Down
2 changes: 1 addition & 1 deletion js/misc.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.