From 3996e210d8f953b62f982b829734a76a8a4c2f64 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 11 Nov 2021 16:08:45 +0100
Subject: [PATCH] Warning messages centered

---
 .../templates/base/calculator.report.html.j2     | 13 +++++++------
 .../cern/templates/calculator.report.html.j2     | 16 ++++++++--------
 cara/apps/static/css/style.css                   |  3 +++
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2
index f63b0884..78b24592 100644
--- a/cara/apps/calculator/templates/base/calculator.report.html.j2
+++ b/cara/apps/calculator/templates/base/calculator.report.html.j2
@@ -65,25 +65,26 @@
 											<div style="text-align:center"><b>Probability of infection (%)</b></div>
 											<div class="d-flex" style="min-height: 160px">
 												{% block warning_animation %}
-													<div class="intro-banner-vdo-play-btn bg-secondary m-auto d-flex align-items-center justify-content-center">
+													<div class="intro-banner-vdo-play-btn animation-color m-auto d-flex align-items-center justify-content-center">
 														<b>{{prob_inf | non_zero_percentage}}</b>
 														<i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
-														<span class="ripple bg-secondary"></span>
-														<span class="ripple bg-secondary"></span>
-														<span class="ripple bg-secondary"></span>
+														<span class="ripple animation-color"></span>
+														<span class="ripple animation-color"></span>
+														<span class="ripple animation-color"></span>
 													</div>
 												{% endblock warning_animation %}
 											</div>
 										</div>
-										<div class="col-md-8 pr-0 pl-0">
+										<div class="col-md-8 pr-0 pl-0 d-flex">
 											{% block report_summary %}
-												<div class="align-self-center alert alert-dark" role="alert">
+												<div class="align-self-center alert alert-dark mb-0" role="alert">
 													Taking into account the uncertainties tied to the model variables, in this scenario, the <b>probability of one exposed occupant getting infected is {{ prob_inf | non_zero_percentage }}</b> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>*.
 												</div>
 											{% endblock report_summary %}
 										</div>
 									</div>
 									</div>
+									<br>
 									{% block report_summary_footnote %}
 									{% endblock report_summary_footnote %}
 								</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 2e95eca5..78e73b8f 100644
--- a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
+++ b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
@@ -24,44 +24,44 @@
 {% block report_summary %}
   <div class="flex-row align-self-center">
       {% if ((prob_inf > 15) or (expected_new_cases >= 1)) %}
-        <div class="alert alert-danger" role="alert">
+        <div class="alert alert-danger mb-0" role="alert">
           <strong>Not Acceptable:</strong>
               Taking into account the uncertainties tied to the model variables, in this scenario, the <b>probability of one exposed occupant getting infected is {{ prob_inf | non_zero_percentage }}</b> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>*.
 
         </div>
       {% elif 5 <= prob_inf <= 15 %}
-        <div class="alert alert-warning" role="alert">
+        <div class="alert alert-warning mb-0" role="alert">
           <strong>Attention:</strong>
               Taking into account the uncertainties tied to the model variables, in this scenario, the <b>probability of one exposed occupant getting infected is {{ prob_inf | non_zero_percentage }}</b> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>*.
         </div>
       {% elif prob_inf < 5 %}
-        <div class="alert alert-success" role="alert">
+        <div class="alert alert-success mb-0" role="alert">
           <strong>Acceptable:</strong>
               Taking into account the uncertainties tied to the model variables, in this scenario, the <b>probability of one exposed occupant getting infected is {{ prob_inf | non_zero_percentage }}</b> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>*.
         </div>
       {% endif %}
 
     {% if (prob_inf > 5) %}
+      <br>
       {% if scale_warning.level == "green-1" %}  
-        <div class="alert alert-dark" role="alert" style="height:fit-content">
+        <div class="alert alert-dark mb-0" role="alert" style="height:fit-content">
           Note: the current CERN COVID Scale is <b>Green - 1</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. Align your risk assessment with the guidance and instructions provided by the HSE Unit.  
         </div>
       {% elif scale_warning.level == "yellow-2" %}
-        <div class="alert alert-dark" role="alert" style="height:fit-content">
+        <div class="alert alert-dark mb-0" role="alert" style="height:fit-content">
           Note: the current CERN COVID Scale is <b>Yellow - 2</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a reduced chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if this scenario is acceptable.
         </div>
       {% elif scale_warning.level == "orange-3" %}
-        <div class="alert alert-dark" role="alert" style="height:fit-content">
+        <div class="alert alert-dark mb-0" role="alert" style="height:fit-content">
           Warning: the current CERN COVID Scale is <b>Orange - 3</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a slight chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if any additional measures can be applied (ALARA).
         </div>
       {% elif scale_warning.level == "red-4" %}
-        <div class="alert alert-dark" role="alert" style="height:fit-content">
+        <div class="alert alert-dark mb-0" role="alert" style="height:fit-content">
           Warning: the current CERN COVID Scale is <b>Red - 4</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a strong chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. Please reduce the value below the threshold of <b>{{scale_warning.threshold}}</b>.
         </div>
       {% else %}
         <p><b>Note:</b> The CERN COVID Level is not specified.</p>
       {% endif %}
-        
     {% endif %}
   </div>
 {% endblock report_summary %}
diff --git a/cara/apps/static/css/style.css b/cara/apps/static/css/style.css
index a576c4fa..7874b083 100644
--- a/cara/apps/static/css/style.css
+++ b/cara/apps/static/css/style.css
@@ -196,6 +196,9 @@ footer img {
   height: 4em;
   margin: 1%;
 }
+.animation-color {
+  background-color: #d5d8d9!important;
+}
 
 /*============= MEDIA QUERIES =============*/