Added print button + avoid pagebreaks after titles (doesn't work on chrome, should be tested in Firefox)

This commit is contained in:
Mathieu David 2015-09-05 11:40:40 +02:00
parent 7527975b41
commit 4789073e6d
2 changed files with 19 additions and 1 deletions

View File

@ -110,6 +110,7 @@ html, body {
.menu-bar i { .menu-bar i {
position: relative; position: relative;
margin: 0 10px;
z-index: 10; z-index: 10;
line-height: 50px; line-height: 50px;
-webkit-transition: color 0.5s; /* Safari */ -webkit-transition: color 0.5s; /* Safari */
@ -118,6 +119,10 @@ html, body {
transition: color 0.5s; transition: color 0.5s;
} }
.menu-bar .right-buttons {
float: right;
}
.menu-bar :hover { .menu-bar :hover {
/* Animate color change */ /* Animate color change */
color: #333; color: #333;
@ -285,4 +290,10 @@ html, body {
color: #4183c4; color: #4183c4;
text-decoration: none; text-decoration: none;
} }
h1, h2, h3, h4, h5, h6 {
page-break-inside: avoid;
page-break-after: avoid;
/*break-after: avoid;*/
}
} }

View File

@ -22,8 +22,15 @@
<div class="page"> <div class="page">
<div id="menu-bar" class="menu-bar"> <div id="menu-bar" class="menu-bar">
<div class="left-buttons">
<i id="sidebar-toggle" class="fa fa-bars left"></i> <i id="sidebar-toggle" class="fa fa-bars left"></i>
</div>
<h1 class="menu-title">{{ title }}</h1> <h1 class="menu-title">{{ title }}</h1>
<div class="right-buttons">
<i id="print-button" class="fa fa-print" title="Print this book"></i>
</div>
</div> </div>
<div id="content" class="content"> <div id="content" class="content">