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

added responsive size for alternative scenarios

Browse source
This commit is contained in:
Luis Aleixo 2021-08-23 11:22:15 +02:00
parent 63c2ef5f82
commit d8e539c9d3
3 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -103,8 +103,14 @@ p.notes {
.break-avoid {
page-break-inside: avoid;
}
#results-div {
min-height: 875px;
}
.first_page {
height: 380pt;
}
.second_page {
height: 530pt;
height: 420pt;
}
.third_page {
height: 90pt;

5
cara/apps/calculator/static/js/pdf.js
View file

@ -1,11 +1,6 @@
function execute_me(qr_link) {
const pdf_version = this.document.getElementById("body");
// Set height of first page break according to the results div
const header_height = this.document.getElementById("report-header-div").offsetHeight;
const results_height = this.document.getElementById("results-div").offsetHeight;
this.document.getElementById("break-first-page").style.height = (1420 - header_height - results_height) + 'pt';
// PDF styling
var opt = {
filename: 'myfile.pdf',

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

@ -88,8 +88,8 @@
</div>
</div>
</div>
<div class="break-avoid" id="break-first-page"></div>
<div class="card bg-light mb-3" id="alternative-scenarios-div">
<div class="break-avoid first_page"></div>
<div class="card bg-light mb-3">
<div class="card-header"><strong>Alternative scenarios</strong>
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseAlternativeScenarios" role="button" aria-expanded="false" 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">
@ -99,9 +99,9 @@
</div>
<div class="collapse" id="collapseAlternativeScenarios">
<div class="card-body">
<div class="d-flex flex-row">
<img id="scenario_concentration_plot" src="{{ alternative_scenarios.plot }}" align="left" />
<div>
<img id="scenario_concentration_plot" src="{{ alternative_scenarios.plot }}" />
{% block report_scenarios_summary_table %}
<table class="table w-auto">
<thead class="thead-light">