From 3dba74c23f9f3ed82ee2f7f2d4a529af9a646ee2 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 2 Jun 2022 15:59:22 +0200
Subject: [PATCH] Handled images on printable report and added link from title

---
 cara/apps/calculator/static/css/report.css         |  6 ++++++
 cara/apps/templates/base/calculator.report.html.j2 | 12 ++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css
index 3a5a5487..dfd11ff6 100644
--- a/cara/apps/calculator/static/css/report.css
+++ b/cara/apps/calculator/static/css/report.css
@@ -136,6 +136,12 @@ p.notes {
     .card {
         page-break-inside: avoid;
     }
+    .pi-image {
+        max-height: 9em;
+    }
+    .pi-box {
+        max-width: 260px!important;
+    }
     #link-results {
         display: none;
     }
diff --git a/cara/apps/templates/base/calculator.report.html.j2 b/cara/apps/templates/base/calculator.report.html.j2
index 38413851..bfe9632f 100644
--- a/cara/apps/templates/base/calculator.report.html.j2
+++ b/cara/apps/templates/base/calculator.report.html.j2
@@ -19,9 +19,9 @@
 {% block report_header %}
 
 	<div id="report-header-div" class="d-flex flex-row" style="margin: 1%">
-		<img id="report_logo" src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle mr-3">
+		<a href="/" class="align-self-center"><img id="report_logo" src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle mr-3"></a>
 		<div style="margin-right: -105px" class='align-self-center mr-auto'>
-			<h2 class="header_text mb-0">REPORT</h1>
+			<h2 class="header_text mb-0"><a href="{{ permalink.shortened }}" style="color: #2f4858">REPORT - {{ form.simulation_name }}</a></h2>
 			<p class="mb-0" id="report_version"> Created {{ creation_date }} using CARA calculator version v{{ form.calculator_version }}</p>
 		</div>
 		<button type="button" class="btn btn-outline-dark align-self-center" id="download-pdf" style="margin-right: -100pt" onclick="print();">Print Report</button>
@@ -67,7 +67,7 @@
 							<p class="card-text">
 								<div class="align-self-center">
 									<div class="split">
-											<div class="card card-body align-self-center" style="text-align:center; max-width: 300px">
+											<div class="card card-body align-self-center pi-box" style="text-align:center; max-width: 300px">
 												<h6 class="card-title">
 													<b>Probability of infection (%)</b><br>
 													{% if form.short_range_option == "short_range_yes" %}
@@ -75,7 +75,7 @@
 													{% endif %}
 												</h6>
 												<br>
-												<img src="/static/images/long_range_anim.png" class="align-middle mb-3">
+												<img src="/static/images/long_range_anim.png" class="align-middle mb-3 pi-image">
 												<div class="d-flex" style="min-height: 160px">
 													{% block long_range_warning_animation %}
 														<div class="intro-banner-vdo-play-btn animation-color m-auto d-flex align-items-center justify-content-center">
@@ -90,13 +90,13 @@
 											</div>
 											<br>
 											{% if form.short_range_option == "short_range_yes" %}
-												<div class="card card-body align-self-center" style="text-align:center; max-width: 300px">
+												<div class="card card-body align-self-center pi-box" style="text-align:center; max-width: 300px">
 													<h6 class="card-title">
 														<b>Probability of infection (%)</b><br>
 														With <b>short-range interactions</b>
 													</h6>
 													<br>
-													<img src="/static/images/short_range_anim.png" class="align-middle mb-3">
+													<img src="/static/images/short_range_anim.png" class="align-middle mb-3 pi-image">
 													<div class="d-flex" style="min-height: 160px">
 														{% block warning_animation %}
 															<div class="intro-banner-vdo-play-btn animation-color m-auto d-flex align-items-center justify-content-center">