From 087864dbfb5e96ef5426ebf2df74e3662956bd16 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 19 Aug 2021 12:29:06 +0200
Subject: [PATCH] added correct breaks

---
 cara/apps/calculator/static/css/report.css    | 25 ++++++++++++++-----
 cara/apps/calculator/static/js/pdf.js         |  8 +++---
 .../templates/base/calculator.report.html.j2  | 13 +++++-----
 .../cern/templates/calculator.report.html.j2  |  1 +
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css
index 166b3cb8..5373033b 100644
--- a/cara/apps/calculator/static/css/report.css
+++ b/cara/apps/calculator/static/css/report.css
@@ -98,18 +98,28 @@ p.notes {
     margin-right: 1%;
 }
 
-@media screen {
-    .card_break {
-        display: none!important;
-    }
-}
-
 #rules,
 #data {
     display: none!important;
 }
 
 @media (width: 1200px) {
+    /* CSS styling for break avoid. */
+    .break-avoid {
+        page-break-inside: avoid;
+    }
+    .first_page {
+        height: 370pt;
+    }
+    .second_page {
+        height: 500pt;
+    }
+    .third_page {
+        height: 100pt;
+    }
+    .fourth_page {
+        height: 650pt;
+    }
     .collapse {
         display: block!important;
     }
@@ -134,6 +144,9 @@ p.notes {
     .print-button {
         display: none!important;
     }
+    #link_reproduce_results {
+        display: none!important;
+    }
 }
 
 
diff --git a/cara/apps/calculator/static/js/pdf.js b/cara/apps/calculator/static/js/pdf.js
index e59f7612..18f3e642 100644
--- a/cara/apps/calculator/static/js/pdf.js
+++ b/cara/apps/calculator/static/js/pdf.js
@@ -8,11 +8,11 @@ function execute_me() {
         image: { type: 'jpeg', quality: 0.9 },
         html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true, width: 1200, windowWidth: 1200 },
         jsPDF: {
-            unit: 'mm',
-            format: 'a4',
+            unit: 'pt',
+            format: 'letter',
             orientation: 'portrait'
         },
-        pagebreak: { mode: 'avoid-all', after: ['#rules', '#results'] }
+        pagebreak: { mode: '', avoid: '.break-avoid' },
     };
     html2pdf().set(opt).from(pdf_version).toPdf().get('pdf').then(function(pdf) {
             var totalPages = pdf.internal.getNumberOfPages();
@@ -20,7 +20,7 @@ function execute_me() {
                 pdf.setPage(i);
                 pdf.setFontSize(10);
                 pdf.setTextColor(150);
-                pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.25, (pdf.internal.pageSize.getHeight() - 8)));
+                pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.25), (pdf.internal.pageSize.getHeight() - 10));
             }
         })
         .save();
diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2
index 9c9909a6..ba7f8416 100644
--- a/cara/apps/calculator/templates/base/calculator.report.html.j2
+++ b/cara/apps/calculator/templates/base/calculator.report.html.j2
@@ -24,7 +24,6 @@
 		</div>
 		<button type="button" class="btn btn-outline-dark align-self-center print-button" id="download-pdf" onclick="execute_me()">Download PDF</button>
 	</div>
-	<div class="html2pdf__page-break"></div>
 
 {% endblock report_header %}
 
@@ -87,7 +86,8 @@
 							</p>
 						</div>
 					</div>
-				</div>	
+				</div>
+				<div class="break-avoid first_page"></div>	
 				<div class="card bg-light mb-3">
   					<div class="card-header"><strong>Alternative scenarios</strong>
 						<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseAlternativeScenarios" role="button" aria-expanded="false" aria-controls="collapseAlternativeScenarios">
@@ -135,10 +135,11 @@
 						</div>
 					</div>
 				</div>
+				<div class="break-avoid second_page"></div>	
 			{% endblock report_results %}
 
 			{% block report_footer %}
-				<div class="card bg-light mb-3">
+				<div class="card bg-light mb-3" id="link_reproduce_results">
 					<div class="card-header"><strong>Link to reproduce results </strong> 
 					<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseQRcode" role="button" aria-expanded="true" aria-controls="collapseQRcode">
 						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
@@ -165,7 +166,6 @@
 
 		<div class="tab-pane fade show active" id="data" role="tabpanel" aria-labelledby="data-tab" style="padding: 1%">
 			{% block simulation_overview %}
-				<br class="card_break">
 				<div class=card>
 					<div class="card-header"><strong>Simulation:</strong></div>
 					<div class="card-body">
@@ -367,10 +367,11 @@
 						</ul>
 					</div>
 				</div>
-			{% endblock simulation_overview %}	
+			{% endblock simulation_overview %}
+			<div class="break-avoid third_page"></div>		
 		</div>
 		{% block report_preamble %}
-		{% endblock report_preamble %}
+		{% endblock report_preamble %}	
 	</div>
 </div>
 
diff --git a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2 b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
index e2fdbe76..f2c4152a 100644
--- a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
+++ b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
@@ -145,6 +145,7 @@
     </div>
   </div>
 </div>
+<div class="break-avoid fourth_page"></div>	
 {% endblock report_preamble %}
 
 {% block report_footer %}