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

Added shareable link button for mobile versions

Browse source
This commit is contained in:
Luis Aleixo 2021-10-15 12:05:55 +02:00
parent d51854f674
commit 4a46052e45
4 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
cara/apps/calculator/static/js/report.js
View file

@ -529,4 +529,15 @@ function draw_alternative_scenarios_plot(concentration_plot_svg_id, alternative_
// Redraw based on the new size whenever the browser window is resized.
window.addEventListener("resize", redraw);
}
function copy_clipboard(shareable_link) {
const el = document.createElement('textarea');
el.value = shareable_link;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
alert("Shareable link copied to clipboard.")
}

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

@ -155,7 +155,7 @@
{% endblock report_results %}
{% block report_footer %}
<div class="card bg-light mb-3" id="link_reproduce_results">
<div class="card bg-light mb-3">
<div class="card-header"><strong>Link to reproduce results </strong>
<button class="icon_button p-0 float-right" data-toggle="collapse" href="#collapseQRcode" role="button" aria-expanded="true" aria-controls="collapseQRcode">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
@ -165,7 +165,8 @@
</div>
<div class="collapse show" id="collapseQRcode">
<div class="card-body">
<div class="split">
<div class="text-center"><button id="mobile_link" class="btn btn-primary btn-sm d-none" onclick="copy_clipboard('{{ permalink.link }}');">Click to copy a shareable link</button></div>
<div id="link_reproduce_results" class="split">
<div><a href="{{ permalink.link }}" style="float: left;"><div id="qrcode"></div></a></div>
<div class="align-self-center"><span style="float: left; vertical-align: middle; display: inline-block;">
<p style="display: inline-block; vertical-align: middle; line-height: normal;">

2
cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
View file

@ -128,7 +128,7 @@
<div class="alert alert-warning" 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 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>
<div class="col-xl-3 align-self-center text-align-center"><img id="cern_level" class="rounded" src="{{ calculator_prefix }}/static/images/warning_scale/{{scale_warning.level}}.png"></div>
<div class="col-xl-3 align-self-center text-center"><img id="cern_level" class="rounded" src="{{ calculator_prefix }}/static/images/warning_scale/{{scale_warning.level}}.png"></div>
</div>
</div>
<br>

8
cara/apps/static/css/style.css
View file

@ -235,7 +235,7 @@ footer img {
@media (max-width: 40em) {
#body {
font-size: .75rem;
padding: 10px;
padding: 20px 10px;
}
.header_text {
font-size: 1rem;
@ -257,6 +257,9 @@ footer img {
#link_reproduce_results {
display: none;
}
#mobile_link {
display: inline!important;
}
.feedback {
float:right;
font-size:.75rem;
@ -281,6 +284,9 @@ footer img {
#link_reproduce_results {
display: none;
}
#mobile_link {
display: inline!important;
}
}
/*============ BOOTSTRAP BREAK POINTS: