815072d2ae
Add special data attribute 'data-numberofdives' in the template <body> with the number of dives per page. This is standard HTML5 specification so it won't corrupt the template file. Any template that will be used for printing must contain this attribute to assure correct output. Signed-off-by: Gehad elrobey <gehadelrobey@gmail.com> Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>
222 lines
4.1 KiB
HTML
222 lines
4.1 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: white;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
font-size: {{ template_options.font_size }}vw;
|
|
line-height: {{ template_options.line_spacing }};
|
|
font-family: {{ template_options.font }};
|
|
}
|
|
|
|
h1 {
|
|
font-size: {{ template_options.font_size }}vw;
|
|
float: left;
|
|
}
|
|
|
|
.mainContainer {
|
|
width: 96%;
|
|
height: 50%;
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.innerContainer {
|
|
height: 85%;
|
|
padding: 0.5%;
|
|
margin-top: 1%;
|
|
margin-bottom: 1%;
|
|
overflow: hidden;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border:max(0.1vw, 1px);
|
|
border-style:solid;
|
|
}
|
|
|
|
.table_class {
|
|
overflow: hidden;
|
|
max-width: 25%;
|
|
min-width: 25%;
|
|
margin: 1.5%;
|
|
float: left;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border:max(0.1vw, 1px);
|
|
border-style:solid;
|
|
}
|
|
|
|
.notes_table_class {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
min-width: 100%;
|
|
margin: 1.5%;
|
|
float: left;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border:max(0.1vw, 1px);
|
|
border-style:solid;
|
|
}
|
|
|
|
.fieldTitle {
|
|
background-color: #CfC7C5;
|
|
overflow: hidden;
|
|
padding:0;
|
|
}
|
|
|
|
.diveProfile {
|
|
width: 37%;
|
|
height: 95%;
|
|
margin: 1.5%;
|
|
float: right;
|
|
}
|
|
|
|
.diveDetails {
|
|
width: 92%;
|
|
float: left;
|
|
}
|
|
|
|
.dataPart {
|
|
height: 45%;
|
|
max-height: 60%;
|
|
}
|
|
|
|
.notesPart {
|
|
height: 35%;
|
|
}
|
|
|
|
.textArea {
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis;
|
|
max-height: 10.3vw;
|
|
line-height: {{ template_options.line_spacing }};
|
|
}
|
|
|
|
#footer {
|
|
width: 96%;
|
|
height: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-numberofdives = 2>
|
|
{% block main_rows %}
|
|
{% for dive in dives %}
|
|
<div class="mainContainer">
|
|
<div class="innerContainer">
|
|
<div class="diveDetails">
|
|
<div class="dataPart">
|
|
<table class="table_class">
|
|
<tbody><tr>
|
|
<td class="fieldTitle">
|
|
<h1> Dive No. </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.number }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Date </h1>
|
|
</td>
|
|
<td><h1> {{ dive.date }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Location </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.location }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Max depth </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.depth }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Duration </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.duration }} </h1>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
<table class="table_class">
|
|
<tbody><tr>
|
|
<td class="fieldTitle">
|
|
<h1> Time. </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.time }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Air Temp. </h1>
|
|
</td>
|
|
<td><h1> {{ dive.airTemp }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Water Temp. </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.waterTemp }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Buddy </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.buddy }} </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fieldTitle">
|
|
<h1> Dive Master </h1>
|
|
</td>
|
|
<td>
|
|
<h1> {{ dive.divemaster }} </h1>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
<div class="diveProfile" id="dive_{{ dive.number }}">
|
|
</div>
|
|
</div>
|
|
<div class="notesPart">
|
|
<table class="notes_table_class">
|
|
<tbody><tr>
|
|
<td class="fieldTitle">
|
|
<h1> Notes </h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="textArea">
|
|
<h1> {{ dive.notes }} </h1>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
<div id="footer">
|
|
<div>
|
|
</body>
|
|
</html>
|