From 749e73a603d31a1a16078b242b55e8f0552ae62a Mon Sep 17 00:00:00 2001 From: Luis Aleixo Date: Wed, 21 Jul 2021 08:48:19 +0200 Subject: [PATCH] UI improvements with transparent png images and bootstrap classes for components styling --- cara/apps/calculator/report_generator.py | 8 ++-- cara/apps/calculator/static/css/report.css | 13 ------ .../warning_scale/{Level1.png => green-1.png} | Bin .../{Level3.png => orange-3.png} | Bin .../warning_scale/{Level4.png => red-4.png} | Bin .../{Level2.png => yellow-2.png} | Bin .../templates/base/calculator.report.html.j2 | 34 +++++++------- .../cern/templates/calculator.report.html.j2 | 42 +++++++++--------- 8 files changed, 39 insertions(+), 58 deletions(-) rename cara/apps/calculator/static/images/warning_scale/{Level1.png => green-1.png} (100%) rename cara/apps/calculator/static/images/warning_scale/{Level3.png => orange-3.png} (100%) rename cara/apps/calculator/static/images/warning_scale/{Level4.png => red-4.png} (100%) rename cara/apps/calculator/static/images/warning_scale/{Level2.png => yellow-2.png} (100%) diff --git a/cara/apps/calculator/report_generator.py b/cara/apps/calculator/report_generator.py index 9304ffe5..a691633c 100644 --- a/cara/apps/calculator/report_generator.py +++ b/cara/apps/calculator/report_generator.py @@ -93,7 +93,7 @@ def _img2bytes(figure): def _figure2bytes(figure): # Draw the image img_data = io.BytesIO() - figure.savefig(img_data, format='png', bbox_inches="tight") + figure.savefig(img_data, format='png', bbox_inches="tight", transparent=True) return img_data @@ -297,9 +297,9 @@ class ReportGenerator: context['qr_code'] = generate_qr_code(base_url, self.calculator_prefix, form) context['calculator_prefix'] = self.calculator_prefix context['scale_warning'] = { - 'level': 'Orange - 3', - 'incidence_rate': 'in between 25 and 100 new cases per 100 000 inhabitants', - 'onsite_access': 'of about 5000', + 'level': 'yellow-2', + 'incidence_rate': 'lower than 25 new cases per 100 000 inhabitants', + 'onsite_access': 'of about 8000', 'threshold' : '' } return context diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css index 5c787d35..be80c21f 100644 --- a/cara/apps/calculator/static/css/report.css +++ b/cara/apps/calculator/static/css/report.css @@ -69,20 +69,7 @@ p.notes { text-decoration: none; } -.warning_image_png { - margin-bottom: 1rem; - padding-left: 30px; - border-radius: .25rem -} - -.warning_text { - height:fit-content; - align-self: center; - margin-left: 5% -} - .icon_button { - padding: 0; border: none; background: none; } diff --git a/cara/apps/calculator/static/images/warning_scale/Level1.png b/cara/apps/calculator/static/images/warning_scale/green-1.png similarity index 100% rename from cara/apps/calculator/static/images/warning_scale/Level1.png rename to cara/apps/calculator/static/images/warning_scale/green-1.png diff --git a/cara/apps/calculator/static/images/warning_scale/Level3.png b/cara/apps/calculator/static/images/warning_scale/orange-3.png similarity index 100% rename from cara/apps/calculator/static/images/warning_scale/Level3.png rename to cara/apps/calculator/static/images/warning_scale/orange-3.png diff --git a/cara/apps/calculator/static/images/warning_scale/Level4.png b/cara/apps/calculator/static/images/warning_scale/red-4.png similarity index 100% rename from cara/apps/calculator/static/images/warning_scale/Level4.png rename to cara/apps/calculator/static/images/warning_scale/red-4.png diff --git a/cara/apps/calculator/static/images/warning_scale/Level2.png b/cara/apps/calculator/static/images/warning_scale/yellow-2.png similarity index 100% rename from cara/apps/calculator/static/images/warning_scale/Level2.png rename to cara/apps/calculator/static/images/warning_scale/yellow-2.png diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2 index 94af75a7..6d321b7d 100644 --- a/cara/apps/calculator/templates/base/calculator.report.html.j2 +++ b/cara/apps/calculator/templates/base/calculator.report.html.j2 @@ -45,7 +45,7 @@ {% block report_results %}
Results -
Alternative scenarios -
-

+

{% block report_scenarios_summary_table %} @@ -96,16 +96,16 @@ {% endblock report_scenarios_summary_table %} - -

Notes for alternative scenarios:
-

    -
  1. This graph shows the concentration of infectious quanta in the air. The filtration of Type I and FFP2 masks, if worn, applies not only to the emission rate but also to the individual exposure (i.e. inhalation). - For this reason, scenarios with different types of mask will show the same concentration on the graph but have different absorbed doses and infection probabilities.
    2. -
  2. If you have selected more sophisticated options, such as HEPA filtration or FFP2 masks, this will be indicated in the plot as the "base scenario", representing the inputs inserted in the form.
    - The other alternative scenarios shown for comparison will not include either HEPA filtration or FFP2 masks.
    3. -
-
-

+
+
+

Notes for alternative scenarios:
+

    +
  1. This graph shows the concentration of infectious quanta in the air. The filtration of Type I and FFP2 masks, if worn, applies not only to the emission rate but also to the individual exposure (i.e. inhalation). + For this reason, scenarios with different types of mask will show the same concentration on the graph but have different absorbed doses and infection probabilities.
    2. +
  2. If you have selected more sophisticated options, such as HEPA filtration or FFP2 masks, this will be indicated in the plot as the "base scenario", representing the inputs inserted in the form.
    + The other alternative scenarios shown for comparison will not include either HEPA filtration or FFP2 masks.
    3. +
+

@@ -353,12 +353,8 @@
- - - - - - + + 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 d5b57a7b..3cae7826 100644 --- a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2 +++ b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2 @@ -5,7 +5,7 @@
Applicable rules -
-

+

Please ensure that this scenario conforms to current COVID-related Health & Safety requirements, under the applicable COVID Scale and measures in force at the time of the CARA assessment.
The results of this simulation are colour coded according to the risk values authorized at CERN (approved in December 2020): - -

- - -

+
+
+ + + +
+ +
@@ -52,25 +55,21 @@ {% if (prob_inf > 5) %} -
- {% if scale_warning.level == "Green - 1" %} - -