<html> <head> <style> body { {{ print_options.grayscale }}; 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; } p { font-size: {{ template_options.font_size }}vw; float: left; } #body_div { background-color: {{ template_options.color1 }}; } .mainContainer { width: 99%; height: 50%; margin-left: 0.5%; margin-right: 0.5%; margin-top: 0; margin-bottom: 0; overflow: hidden; page-break-inside: avoid; } .innerContainer { height: 85%; margin-top: 1%; margin-bottom: 1%; overflow: hidden; } .table_class { overflow: hidden; width: 25%; height: 99%; margin: 0.5%; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; border-width: {{ template_options.borderwidth }}px; border-style:solid; border-color: {{ template_options.color6 }}; } .notes_table_class { overflow: hidden; width: 99%; margin: 0.5%; -webkit-box-sizing: border-box; box-sizing: border-box; border-width: {{ template_options.borderwidth }}px; border-style:solid; border-color: {{ template_options.color6 }}; } .fieldTitle { background-color: {{ template_options.color2 }}; color: {{ template_options.color4 }}; padding-left: 2%; } .fieldData { color: {{ template_options.color5 }}; background-color: {{ template_options.color3 }}; padding-left: 2%; } .diveProfile { float: left; height: 99%; width: 47%; margin: 0.5%; } .diveDetails { width: 100%; float: left; } .dataPart { height: 64%; padding-bottom: 1%; width: 100%; float: left; } .notesPart { height: 35%; width: 100%; float: left; } .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> <div id="body_div"> {% 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 class="fieldData"> <p> {{ dive.number }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Date </h1> </td> <td class="fieldData"> <p> {{ dive.date }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Location </h1> </td> <td class="fieldData"> <p> {{ dive.location }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Max. depth </h1> </td> <td class="fieldData"> <p> {{ dive.depth }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Duration </h1> </td> <td class="fieldData"> <p> {{ dive.duration }} </p> </td> </tr> </tbody></table> <table class="table_class"> <tbody><tr> <td class="fieldTitle"> <h1> Time. </h1> </td> <td class="fieldData"> <p> {{ dive.time }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Air Temp. </h1> </td> <td class="fieldData"> <p> {{ dive.airTemp }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Water Temp. </h1> </td> <td class="fieldData"> <p> {{ dive.waterTemp }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Buddy </h1> </td> <td class="fieldData"> <p> {{ dive.buddy }} </p> </td> </tr> <tr> <td class="fieldTitle"> <h1> Dive Guide </h1> </td> <td class="fieldData"> <p> {{ dive.divemaster }} </p> </td> </tr> </tbody></table> <div class="diveProfile" id="dive_{{ dive.id }}"> </div> </div> <div class="notesPart"> <table class="notes_table_class"> <tbody><tr> <td style="padding-left:1%" class="fieldTitle"> <h1> Notes </h1> </td> </tr> <tr> <td class="fieldData"> <div class="textArea"> <p> {{ dive.notes|safe }} </p> </div> </td> </tr> </tbody></table> </div> </div> </div> </div> {% endfor %} {% endblock %} <div id="footer"> </div> </div> </body> </html>