Handled images on printable report and added link from title

This commit is contained in:
Luis Aleixo 2022-06-02 15:59:22 +02:00
parent 9ebb521769
commit 3dba74c23f
2 changed files with 12 additions and 6 deletions

View file

@ -136,6 +136,12 @@ p.notes {
.card {
page-break-inside: avoid;
}
.pi-image {
max-height: 9em;
}
.pi-box {
max-width: 260px!important;
}
#link-results {
display: none;
}

View file

@ -19,9 +19,9 @@
{% block report_header %}
<div id="report-header-div" class="d-flex flex-row" style="margin: 1%">
<img id="report_logo" src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle mr-3">
<a href="/" class="align-self-center"><img id="report_logo" src="/static/images/cara_logo.200x200.png" class="d-inline-block align-middle mr-3"></a>
<div style="margin-right: -105px" class='align-self-center mr-auto'>
<h2 class="header_text mb-0">REPORT</h1>
<h2 class="header_text mb-0"><a href="{{ permalink.shortened }}" style="color: #2f4858">REPORT - {{ form.simulation_name }}</a></h2>
<p class="mb-0" id="report_version"> Created {{ creation_date }} using CARA calculator version v{{ form.calculator_version }}</p>
</div>
<button type="button" class="btn btn-outline-dark align-self-center" id="download-pdf" style="margin-right: -100pt" onclick="print();">Print Report</button>
@ -67,7 +67,7 @@
<p class="card-text">
<div class="align-self-center">
<div class="split">
<div class="card card-body align-self-center" style="text-align:center; max-width: 300px">
<div class="card card-body align-self-center pi-box" style="text-align:center; max-width: 300px">
<h6 class="card-title">
<b>Probability of infection (%)</b><br>
{% if form.short_range_option == "short_range_yes" %}
@ -75,7 +75,7 @@
{% endif %}
</h6>
<br>
<img src="/static/images/long_range_anim.png" class="align-middle mb-3">
<img src="/static/images/long_range_anim.png" class="align-middle mb-3 pi-image">
<div class="d-flex" style="min-height: 160px">
{% block long_range_warning_animation %}
<div class="intro-banner-vdo-play-btn animation-color m-auto d-flex align-items-center justify-content-center">
@ -90,13 +90,13 @@
</div>
<br>
{% if form.short_range_option == "short_range_yes" %}
<div class="card card-body align-self-center" style="text-align:center; max-width: 300px">
<div class="card card-body align-self-center pi-box" style="text-align:center; max-width: 300px">
<h6 class="card-title">
<b>Probability of infection (%)</b><br>
With <b>short-range interactions</b>
</h6>
<br>
<img src="/static/images/short_range_anim.png" class="align-middle mb-3">
<img src="/static/images/short_range_anim.png" class="align-middle mb-3 pi-image">
<div class="d-flex" style="min-height: 160px">
{% block warning_animation %}
<div class="intro-banner-vdo-play-btn animation-color m-auto d-flex align-items-center justify-content-center">