<html>
<head>
<style>
body {
{{ print_options.grayscale }};
padding: 0;
margin: 0 0 0 6%; <!-- Provide LH margin for binding the page -->
font-size: {{ template_options.font_size }}vw;
line-height: {{ template_options.line_spacing }};
font-family: {{ template_options.font }};
}
h1 {
//float: left;
font-size: {{ template_options.font_size }}vw;
}
p {
//float: left;
font-size: {{ template_options.font_size }}vw;
}
table {
-webkit-box-sizing: border-box;
box-sizing: border-box;
//border-width: {{ template_options.borderwidth }}px;
border-width: 2px;
border-style:solid;
border-color: {{ template_options.color6 }};
border-spacing: 2px;
border-collapse: separate;
}
tr {
height: 40px;
}
td {
padding: 0;
margin: 0;
padding-left: 1%;
}
#body_div {
background-color: {{ template_options.color1 }};
}
.mainContainer {
width: 97%;
height: 100%;
margin-left: 0%;
margin-right: 1%;
margin-top: 0%;
margin-bottom: 0%;
//overflow: hidden;
border-width: 1px;
page-break-inside: avoid;
}
.innerContainer {
width: 99%;
height: 99%;
padding-top: 0%;
//overflow: hidden;
}
.diveDetails {
width: 100%;
margin: 0.0%;
}
.dataSection {
width: 100%;
margin: 0.0% 0% 0% 0%;
}
.diveProfile {
width: 99.5%;
height: 45%;
margin: 0.2% 0% 0.5% 0.5%;
}
.notesSection {
width: 100%;
margin: 0.0%;
min-height: 35%;
}
.fieldTitle {
background-color: {{ template_options.color2 }};
overflow: hidden;
color: {{ template_options.color4 }};
width: 7%;
padding-left:5px;
}
.fieldData {
background-color: {{ template_options.color3 }};
color: {{ template_options.color5 }};
width: 13%;
padding: 0px 5px 0px 5px;
}
.table_class {
//float: left;
margin: 0px;
width: 100%;
}
td.insert_column_inner {
//border-left-width: {{ template_options.borderwidth }}px;
//border-left-width: 4px;
border-left-style:solid;
border-left-color: {{ template_options.color6 }};
background-color: {{ template_options.color2 }};
color: {{ template_options.color4 }};
border: 5px solid black;
}
td.insert_column_outer {
background-color: {{ template_options.color2 }};
color: {{ template_options.color4 }};
//border: 5px purple solid;
}
.notes_table_class {
overflow: hidden;
width: 100%;
margin: 0.0% 0% 0% 0%;
max-height: 35%;
}
.notes_table_class td.fieldTitle {
max-height: 20px;
}
.textArea {
line-height: {{ template_options.line_spacing }};
color: {{ template_options.color5 }};
font-size: 2vh;
padding: 3px;
//overflow: visible;
}
td.fieldTitle b {
font-size: {{ template_options.font_size }}vw;
}
.hidden_div {
display: none;
}
</style>
</head>
<body data-numberofdives = 1>
<div id="body_div">
{% block main_rows %}
{% for dive in dives %}
<div class="mainContainer">
<div class="innerContainer">
<div class="dataSection">
<table class="table_class">
<tr>
<!-- <td rowspan="5" class="insert_column_outer"> </td> -->
<td class="fieldTitle">
<b> Date </b>
</td>
<td class="fieldData">
<p> {{ dive.date }} </p>
</td>
<!-- <td rowspan="5" class="insert_column_inner"> </td> -->
<td class="fieldTitle">
<b> Dive No. </b>
</td>
<td class="fieldData">
<p> {{ dive.number }} </p>
</td>
</tr>
<tr>
<td class="fieldTitle">
<b> Time </b>
</td>
<td class="fieldData">
<p> {{ dive.time }} </p>
</td>
<td class="fieldTitle">
<b> Gases </b>
</td>
<td class="fieldData">
<p> {{ dive.gas }} </p>
</td>
</tr>
<tr>
<td class="fieldTitle">
<b> Location </b>
</td>
<td class="fieldData">
<p> {{ dive.location }} </p>
</td>
<td class="fieldTitle">
<b> Water Temp. </b>
</td>
<td class="fieldData">
<p> {{ dive.waterTemp }} </p>
</td>
</tr>
<tr>
<td class="fieldTitle">
<b> Max Depth </b>
</td>
<td class="fieldData">
<p> {{ dive.depth }} </p>
</td>
<td class="fieldTitle">
<b> Buddy </b>
</td>
<td class="fieldData">
<p> {{ dive.buddy }} </p>
</td>
</tr>
<tr>
<td class="fieldTitle">
<b> Duration </b>
</td>
<td class="fieldData">
<p> {{ dive.duration }} </p>
</td>
<td class="fieldTitle">
<b> Dive Master </b>
</td>
<td class="fieldData">
<p> {{ dive.divemaster }} </p>
</td>
</tr>
</table>
</div>
<div class="diveProfile" id="dive_{{ dive.id }}">
</div>
<div class="notesSection">
<table class="notes_table_class">
<tbody>
<tr>
<td class="fieldTitle">
<b> Notes </b>
</td>
</tr>
<tr>
<td class="fieldData">
<input type="hidden" id="dive_notes_hidden" name="dive_notes_hidden" value="{{ dive.notes|safe }}" />
<div class="textArea" id="dive_notes_display" >
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- notesSection -->
<script>
var textStr = document.getElementById('dive_notes_hidden').value;
var x, h, tf, y;
x = textStr.length; // number of characters in the string
y = 0;
if ((x < 2800) & (x > 1400)) y = 0.0023 * (x-1400)/1400;
if (x > 2800) y = 0.0024;
h = (0.0000015*x*x) - (0.014-y)*x + 31;
h = Math.floor(h);
tf = 9 * {{template_options.font_size}};
if (h > tf) h = tf; // Set template-options fontsize as maximum for notes
if (h < 9) h = 9; // Set minimum font size for notes = 9px.
// document.getElementById('dive_notes_display').innerHTML = "x="+x+"tf="+tf+"y="+y+"ch="+h+": "+textStr;
document.getElementById('dive_notes_display').innerHTML = textStr;
document.getElementById('dive_notes_display').style.fontSize = h;
</script>
</div> <!-- innerContainer -->
</div> <!-- mainContainer -->
{% endfor %}
{% endblock %}
</div> <!-- Body_div -->
</body>
</html>