4de47fbd87
1) Place the dive profile below the synoptic info for the dive.
2) Re-arrange the synoptic info items.
3) In the synoptic info, replace air temperature info with
gas and cylinder info.
4) If any items among the the synoptic data take more than one line,
the the alignment of cells in the synoptic info table is
maintained. In the previous version this caused a ragged bottom
edge of the synoptic info table.
Signed-off-by: Willem Ferguson <willemferguson@zoology.up.ac.za>
254 lines
4.9 KiB
HTML
254 lines
4.9 KiB
HTML
<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 {
|
|
font-size: {{ template_options.font_size }}vw;
|
|
}
|
|
|
|
p {
|
|
font-size: {{ template_options.font_size }}vw;
|
|
}
|
|
|
|
table {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-width: {{ template_options.borderwidth }}px;
|
|
border-style:solid;
|
|
border-color: {{ template_options.color6 }};
|
|
border-collapse: separate;
|
|
}
|
|
|
|
tr {
|
|
height: 4vh;
|
|
}
|
|
|
|
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%;
|
|
border-width: 1px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.innerContainer {
|
|
width: 99%;
|
|
height: 99%;
|
|
padding-top: 0%;
|
|
}
|
|
|
|
.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: o$ 1% 0% 1%;
|
|
}
|
|
|
|
.table_class {
|
|
margin: 0%;
|
|
width: 100%;
|
|
}
|
|
|
|
td.insert_column_inner {
|
|
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 }};
|
|
}
|
|
|
|
.notes_table_class {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 0.0% 0% 0% 0%;
|
|
max-height: 35%;
|
|
}
|
|
|
|
.notes_table_class td.fieldTitle {
|
|
max-height: 0.15vh;
|
|
}
|
|
|
|
.textArea {
|
|
line-height: {{ template_options.line_spacing }};
|
|
color: {{ template_options.color5 }};
|
|
font-size: {{ template_options.font_size }}vw;
|
|
padding: 1%;
|
|
}
|
|
|
|
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 class="fieldTitle">
|
|
<b> Date </b>
|
|
</td>
|
|
<td class="fieldData">
|
|
<p> {{ dive.date }} </p>
|
|
</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">
|
|
<p> {{ dive.notes|safe }} </p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- notesSection -->
|
|
|
|
</div> <!-- innerContainer -->
|
|
</div> <!-- mainContainer -->
|
|
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
</div> <!-- Body_div -->
|
|
|
|
</body>
|
|
</html>
|