pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

started mobile resizing

Browse source
This commit is contained in:
Luis Aleixo 2021-08-25 15:42:29 +02:00
parent 2fe067a562
commit 4f402b0d00
2 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
cara/apps/calculator/static/css/report.css
View file

@ -218,4 +218,33 @@ p.notes {
.intro-banner-vdo-play-btn .ripple:nth-child(3) {
animation-delay: .6s;
-webkit-animation-delay: .6s
}
.split {
/* flex: 1; */
clear: both;
display: inline-flex;
flex-direction: column;
width: 100%;
}
@media screen and (min-width: 40em) {
.split {
flex-direction: row;
}
.split>* {
flex-basis: 100%;
}
.header-text {
text-align: left;
}
.split>*+* {
margin-left: 2em;
}
.bigButton {
width: 25%;
}
.logo {
float: left;
}
}

55
cara/apps/calculator/templates/base/calculator.report.html.j2
View file

@ -60,39 +60,44 @@
<p class="card-text">
<div class="align-self-center">
<div class="d-flex">
<div style="min-width: 25%">
<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">
<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>
<div class="split">
<div>
<div style="min-width: 25%">
<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">
<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>
</div>
{% endblock warning_animation %}
</div>
{% endblock warning_animation %}
</div>
</div>
<div class="align-self-center ">
{% block report_summary %}
<div class="alert alert-dark" 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><a href="#section1">[*]</a> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>.
</div>
{% endblock report_summary %}
</div>
</div>
{% block report_summary %}
<div class="flex-row w-75 align-self-center alert alert-dark" 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><a href="#section1">[*]</a> and the <b>expected number of new cases is {{ expected_new_cases | float_format }}</b>.
</div>
{% endblock report_summary %}
</div>
{% block report_summary_footnote %}
{% endblock report_summary_footnote %}
</div>
<p id="section1">[*] The results are based on the parameters and assumptions published in the CERN Open Report <a href="https://cds.cern.ch/record/2756083"> CERN-OPEN-2021-004</a></p>
<svg id="result_plot" width="900" height="400"></svg>
<script type="application/javascript">
var times = {{times}}
var concentrations = {{concentrations}}
var exposed_presence_intervals = {{exposed_presence_intervals}}
draw_concentration_plot("#result_plot", times, concentrations, exposed_presence_intervals);
</script>
</p>
<svg id="result_plot" width="900" height="400"></svg>
<script type="application/javascript">
var times = {{times}}
var concentrations = {{concentrations}}
var exposed_presence_intervals = {{exposed_presence_intervals}}
draw_concentration_plot("#result_plot", times, concentrations, exposed_presence_intervals);
</script>
</p>
</div>
</div>
</div>