UI improvements with transparent png images and bootstrap classes for components styling
This commit is contained in:
Luis Aleixo
parent
b291b6217e
commit
749e73a603
8 changed files with 39 additions and 58 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
|
@ -45,7 +45,7 @@
|
|||
{% block report_results %}
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header"><strong>Results </strong>
|
||||
<button class="icon_button" data-toggle="collapse" href="#collapseResults" role="button" aria-expanded="true" aria-controls="collapseResults" style="float:right">
|
||||
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseResults" role="button" aria-expanded="true" aria-controls="collapseResults">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</svg>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header"><strong>Alternative scenarios</strong>
|
||||
<button class="icon_button" data-toggle="collapse" href="#collapseAlternativeScenarios" role="button" aria-expanded="true" aria-controls="collapseAlternativeScenarios" style="float:right">
|
||||
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseAlternativeScenarios" role="button" aria-expanded="true" aria-controls="collapseAlternativeScenarios">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</svg>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
<div class="collapse show" id="collapseAlternativeScenarios">
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
<div class="d-flex flex-row">
|
||||
<img id="scenario_concentration_plot" src="{{ alternative_scenarios.plot }}" align="left" />
|
||||
|
||||
{% block report_scenarios_summary_table %}
|
||||
|
|
@ -96,16 +96,16 @@
|
|||
</tbody>
|
||||
</table>
|
||||
{% endblock report_scenarios_summary_table %}
|
||||
|
||||
<p class="data_text"> <strong> Notes for alternative scenarios: </strong><br>
|
||||
<ol>
|
||||
<li>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.</li>
|
||||
<li>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.<br>
|
||||
The other alternative scenarios shown for comparison will not include either HEPA filtration or FFP2 masks.</li>
|
||||
</ol>
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<br/>
|
||||
<p class="data_text"> <strong> Notes for alternative scenarios: </strong><br>
|
||||
<ol>
|
||||
<li>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.</li>
|
||||
<li>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.<br>
|
||||
The other alternative scenarios shown for comparison will not include either HEPA filtration or FFP2 masks.</li>
|
||||
</ol>
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -353,12 +353,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header"><strong>Applicable rules </strong>
|
||||
<button class="icon_button" data-toggle="collapse" href="#collapseRules" role="button" aria-expanded="true" aria-controls="collapseRules" style="float:right">
|
||||
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseRules" role="button" aria-expanded="true" aria-controls="collapseRules">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
|
||||
</svg>
|
||||
|
|
@ -13,15 +13,18 @@
|
|||
</div>
|
||||
<div class="collapse show" id="collapseRules">
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
<p class="card-text">
|
||||
Please ensure that this scenario conforms to current COVID-related <a href="https://hse.cern/covid-19-information"> Health & Safety requirements</a>, under the applicable COVID Scale and measures in force at the time of the CARA assessment.</strong> <br>
|
||||
The results of this simulation are colour coded according to the risk values authorized at CERN (approved in December 2020):
|
||||
|
||||
<div class="alert alert-success ml-4" role="alert">Events with a <strong>P(i) less than 5%</strong> may go ahead without further mitigation measures.</div>
|
||||
<div class="alert alert-warning ml-4" role="alert">Events with a <strong>P(i) between 5% and 15%</strong> shall be subject to ALARA principles (see footnote) to minimise the risk before proceeding.</div>
|
||||
<div class="alert alert-danger ml-4" role="alert">Events with a <strong>P(i) exceeding 15% or a number of expected new cases that exceeds 1</strong> may not take place until additional measures are in place and a risk reduction has been performed.</div>
|
||||
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="alert alert-success ml-3" role="alert">Events with a <strong>P(i) less than 5%</strong> may go ahead without further mitigation measures.</div>
|
||||
<div class="alert alert-warning ml-3" role="alert">Events with a <strong>P(i) between 5% and 15%</strong> shall be subject to ALARA principles (see footnote) to minimise the risk before proceeding.</div>
|
||||
<div class="alert alert-danger ml-3 mb-0" role="alert">Events with a <strong>P(i) exceeding 15% or a number of expected new cases that exceeds 1</strong> may not take place until additional measures are in place and a risk reduction has been performed.</div>
|
||||
</div>
|
||||
<img class="rounded ml-4" src="{{ calculator_prefix }}/static/images/warning_scale/{{scale_warning.level}}.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,25 +55,21 @@
|
|||
|
||||
|
||||
{% if (prob_inf > 5) %}
|
||||
<div class="d-flex" style="align-self:center">
|
||||
{% if scale_warning.level == "Green - 1" %}
|
||||
<img class="warning_image_png" src="{{ calculator_prefix }}/static/images/warning_scale/Level1.png">
|
||||
<div class="alert alert-dark warning_text" role="alert" style="width: 50%">
|
||||
<div class="d-flex align-self-center">
|
||||
{% if scale_warning.level == "green-1" %}
|
||||
<div class="alert alert-dark w-75" 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" %}
|
||||
<img class="warning_image_png" src="{{ calculator_prefix }}/static/images/warning_scale/Level2.png">
|
||||
<div class="alert alert-dark warning_text" role="alert" style="width: 50%">
|
||||
{% elif scale_warning.level == "yellow-2" %}
|
||||
<div class="alert alert-dark w-75" 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" %}
|
||||
<img class="warning_image_png" src="{{ calculator_prefix }}/static/images/warning_scale/Level3.png">
|
||||
<div class="alert alert-dark warning_text" role="alert" style="width: 50%">
|
||||
{% elif scale_warning.level == "orange-3" %}
|
||||
<div class="alert alert-dark w-75" 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" %}
|
||||
<img class="warning_image_png" src="{{ calculator_prefix }}/static/images/warning_scale/Level4.png">
|
||||
<div class="alert alert-dark warning_text" role="alert" style="width: 50%">
|
||||
{% elif scale_warning.level == "red-4" %}
|
||||
<div class="alert alert-dark w-75" 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 %}
|
||||
|
|
@ -93,7 +92,7 @@
|
|||
|
||||
|
||||
{% block report_scenarios_summary_table %}
|
||||
<table class="table w-auto">
|
||||
<table class="table w-auto" style="height: fit-content;">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th>Scenario</th>
|
||||
|
|
@ -143,6 +142,5 @@
|
|||
</p>
|
||||
{% endblock disclaimer %}
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue