From 23de05928e1cac4ead3f7c05c9a5ecafa16db404 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 26 Aug 2021 10:44:56 +0200
Subject: [PATCH] created some css properties for header components

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

diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css
index 277f9cf2..620ed103 100644
--- a/cara/apps/calculator/static/css/report.css
+++ b/cara/apps/calculator/static/css/report.css
@@ -51,6 +51,16 @@ p.notes {
     font-size: 13px;
 }
 
+#cara_logo {
+    height: 150px;
+    margin: 1%
+}
+
+#pdf-qr-code {
+    margin-right: 1%;
+    width: 100pt;
+}
+
 .red_bkg {
     color: #000000;
     background-color: #CD5C5C;
diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2
index 55ee709d..96afca2b 100644
--- a/cara/apps/calculator/templates/base/calculator.report.html.j2
+++ b/cara/apps/calculator/templates/base/calculator.report.html.j2
@@ -18,13 +18,13 @@
 {% block report_header %}
 
 	<div id="report-header-div" class="d-flex flex-row">
-		<img src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle" style="height:150px; margin: 1%">
+		<img id="cara_logo" src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle">
 		<div class="d-flex align-self-center flex-column mr-auto" style="margin-left: 1em;">
 			<h2 class="text-component-title mb-0">CARA - CALCULATOR REPORT</h1>
 			<p class="mb-0"> Created {{ creation_date }} using CARA calculator version v{{ form.calculator_version }}</p>
 		</div>
 		<button type="button" class="btn btn-outline-dark align-self-center" style="margin-right: -100pt" id="download-pdf" onclick="generate_pdf_version('{{qr_code.link}}')">Download PDF</button>
-		<img id="pdf-qr-code" class="align-self-center invisible" style="margin-right: 1%; width:100pt;" src="{{ qr_code.image }}"/>
+		<img id="pdf-qr-code" class="align-self-center invisible" src="{{ qr_code.image }}"/>
 	</div>
 
 {% endblock report_header %}