PATCH: Update the single-dive per page print template

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>

1 files changed, 109 insertions, 83 deletions

diff --git a/printing_templates/One Dive.html b/printing_templates/One Dive.html
index 7f7945396..7192610d4 100644
--- a/printing_templates/One Dive.html
+++ b/printing_templates/One Dive.html
@@ -4,19 +4,17 @@
 		body {
 			{{ print_options.grayscale }};
 			padding: 0;
-			margin: 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;
 		}
 
@@ -26,11 +24,17 @@
 			border-width: {{ template_options.borderwidth }}px;
 			border-style:solid;
 			border-color: {{ template_options.color6 }};
+			border-collapse: separate;
+		}
+
+		tr {
+			height: 4vh;
 		}
 
 		td {
-			padding-left: 0.5vw;
-			padding-right: 0.5vw;
+			padding: 0;
+			margin: 0;
+			padding-left: 1%;
 		}
 
 		#body_div {
@@ -38,70 +42,101 @@
 		}
 
 		.mainContainer {
-			width: 98%;
+			width: 97%;
 			height: 100%;
-			margin-left: 1%;
+			margin-left: 0%;
 			margin-right: 1%;
 			margin-top: 0%;
 			margin-bottom: 0%;
-			overflow: hidden;
-			border-width: 0;
+			border-width: 1px;
 			page-break-inside: avoid;
 		}
 
 		.innerContainer {
-			width: 100%;
+			width: 99%;
 			height: 99%;
-			padding-top: 1%;
-			overflow: hidden;
+			padding-top: 0%;
 		}
 
 		.diveDetails {
 			width: 100%;
-			height: 98%;
-			float: left;
+			margin: 0.0%;
+		}
+		
+		.dataSection {
+			width: 100%;
+			margin: 0.0% 0% 0% 0%;
 		}
 
 		.diveProfile {
-			width: 99%;
-			height: 40%;
-			margin: 0.5%;
+			width: 99.5%;
+			height: 45%;
+			margin: 0.2% 0% 0.5% 0.5%;
 		}
 
-		.dataSection {
+		.notesSection {
 			width: 100%;
-			height: 40%;
-			margin: 0%;
+			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 {
-			float: left;
-			margin: 0.5%;
-			width: 49%;
+			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: 99%;
-			margin: 0.5%;
+			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 }};
-			max-height: 19vh;
-			overflow: hidden;
+			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>
@@ -111,80 +146,59 @@
 	{% for dive in dives %}
 		<div class="mainContainer">
 			<div class="innerContainer">
-				<div class="diveDetails">
-					<div class="diveProfile" id="dive_{{ dive.id }}">
-					</div>
-					<div class="dataSection">
+				<div class="dataSection">
 						<table class="table_class">
-							<tbody><tr>
-								<td class="fieldTitle">
-									<h1> Dive No. </h1>
-								</td>
-								<td class="fieldData">
-									<p> {{ dive.number }} </p>
-								</td>
-							</tr>
 							<tr>
 								<td class="fieldTitle">
-									<h1> Date </h1>
+									<b> Date </b>
 								</td>
 								<td class="fieldData">
 									<p> {{ dive.date }} </p>
 								</td>
-							</tr>
-							<tr>
 								<td class="fieldTitle">
-									<h1> Location </h1>
+									<b> Dive No. </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.location }} </p>
+									<p> {{ dive.number }} </p>
 								</td>
 							</tr>
 							<tr>
 								<td class="fieldTitle">
-									<h1> Max. depth </h1>
+									<b> Time </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.depth }} </p>
+									<p> {{ dive.time }} </p>
 								</td>
-							</tr>
-							<tr>
 								<td class="fieldTitle">
-									<h1> Duration </h1>
+									<b> Gases </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.duration }} </p>
+									<p> {{ dive.gas }} </p>
 								</td>
 							</tr>
-						</tbody></table>
-						<table class="table_class">
-							<tbody><tr>
+							<tr>
 								<td class="fieldTitle">
-									<h1> Time. </h1>
+									<b> Location </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.time }} </p>
+									<p> {{ dive.location }} </p>
 								</td>
-							</tr>
-							<tr>
 								<td class="fieldTitle">
-									<h1> Air Temp. </h1>
+									<b> Water Temp. </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.airTemp }} </p>
+									<p> {{ dive.waterTemp }} </p>
 								</td>
 							</tr>
 							<tr>
 								<td class="fieldTitle">
-									<h1> Water Temp. </h1>
+									<b> Max Depth </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.waterTemp }} </p>
+									<p> {{ dive.depth }} </p>
 								</td>
-							</tr>
-							<tr>
 								<td class="fieldTitle">
-									<h1> Buddy </h1>
+									<b> Buddy </b>
 								</td>
 								<td class="fieldData">
 									<p> {{ dive.buddy }} </p>
@@ -192,36 +206,48 @@
 							</tr>
 							<tr>
 								<td class="fieldTitle">
-									<h1> Divemaster </h1>
+									 <b> Duration </b>
 								</td>
 								<td class="fieldData">
-									<p> {{ dive.divemaster }} </p>
+									<p> {{ dive.duration }} </p>
 								</td>
-							</tr>
-							</tbody>
-						</table>
-						<table class="notes_table_class">
-							<tbody>
-							<tr>
 								<td class="fieldTitle">
-									<h1> Notes </h1>
+									<b> Dive Master </b>
 								</td>
-							</tr>
-							<tr>
 								<td class="fieldData">
-									<div class="textArea">
-										<p> {{ dive.notes|safe }} </p>
-									</div>
+									<p> {{ dive.divemaster }} </p>
 								</td>
 							</tr>
-							</tbody>
 						</table>
-					</div>
 				</div>
-			</div>
-		</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>
+
+</div>	<!-- Body_div -->
+
 </body>
 </html>