Skip to content

Commit

Permalink
Adding styling for print-only and screen only
Browse files Browse the repository at this point in the history
  • Loading branch information
@Snicker7
Snicker7 committed Feb 6, 2023
1 parent 461ca93 commit dcf7391
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 40 deletions.
14 changes: 12 additions & 2 deletions templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,16 @@
display:none
}
}

@media screen
{
.print-only{
display: none !important;
}
.screen-only{
display: block;
}
}
</style>


Expand Down Expand Up @@ -197,9 +207,9 @@ <h3 style="margin-top: -0.5em;padding-right: 2em;">Analysis of genome editing ou
{% if current_user is defined and (not current_user.is_anonymous and current_user.username == "DEFAULTUSER") %}
<div class="row">
<div class="col-sm-1"></div>
<footer class="col-sm-10 crispresso_body_div" style='padding-bottom:3em'>
<footer class="col-sm-10 crispresso_body_div screen-only" style='padding-bottom:3em'>
<p class="text-center">
If you like CRISPResso2 please support us by citing it in your work: <br>
If you like CRISPResso2 please support us by citing it in your work: <br>
Clement K, Rees H, Canver MC, Gehrke JM, Farouni R, Hsu JY, Cole MA, Liu DR, Joung JK, Bauer DE, Pinello L.<br>
<a href="https://rdcu.be/boxVG" target="_blank">CRISPResso2 provides accurate and rapid genome editing sequence analysis. </a><br>
Nat Biotechnol. 2019 Mar; 37(3):224-226. doi: 10.1038/s41587-019-0032-3. PubMed PMID: 30809026.
Expand Down
96 changes: 60 additions & 36 deletions templates/report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,52 @@
background-color:lightsteelblue;
}

@media print {
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
margin-bottom: 2em !important;
page-break-inside: avoid;
}
.nav-tabs {
display:none !important;
visibility:hidden !important;
}
.tab-content.amp-body {
background-color:transparent !important;
border:None !important;
}
}
@media only screen and (max-width: 600px) {
.jumbotron img {
width:100%
}
}

@media screen
{
.print-only{
display: none !important;
}
.screen-only{
display: block;
}
}

@media print {
.tab-content > .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
margin-bottom: 2em !important;
page-break-inside: avoid;
}
.nav-tabs {
display:none !important;
visibility:hidden !important;
}
.tab-content.amp-body {
background-color:transparent !important;
border:None !important;
}
.breakinpage {
clear: both;
page-break-after: always;
display: block;
}
.print-only, .print-only *
{
display: block;
}
.screen-only, .screen-only *
{
display: none !important;
}
}
</style>

{% endblock %}
Expand All @@ -55,7 +79,7 @@
<center><div class="col-sm-10">
<div class="jumbotron h-100 p-5 rounded-3" style="background:rgba(0,0,0,0.0); padding:0px" >
<div id='jumbotron_content' >
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data['report_display_name'] != '' %}
<h5>{{report_data['report_display_name']}}</h5>
Expand All @@ -80,7 +104,7 @@ <h5>CRISPResso2 run information</h5>
</div>
</div>

<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
<h5>Allele assignments</h5>
<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
Expand Down Expand Up @@ -116,7 +140,7 @@ <h5>Allele assignments</h5>

{# start global coding sequence report #}
{% if report_data['figures']['locs']['plot_5a'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
<h5>Global frameshift analysis</h5>
</div>
Expand All @@ -127,7 +151,7 @@ <h5>Global frameshift analysis</h5>
{% endif %}

{% if report_data['figures']['locs']['plot_6a'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
<h5>Global frameshift mutagenesis profiles</h5>
</div>
Expand All @@ -138,7 +162,7 @@ <h5>Global frameshift mutagenesis profiles</h5>
{% endif %}

{% if report_data['figures']['locs']['plot_8a'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
<h5>Global splicing analysis</h5>
</div>
Expand All @@ -151,7 +175,7 @@ <h5>Global splicing analysis</h5>

{# start hdr summary #}
{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_4g'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>HDR summary plot</h5>
Expand All @@ -168,7 +192,7 @@ <h5>HDR summary report (all reads aligned to {{report_data.amplicons[0]}})</h5>

{# start prime editing report #}
{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_11a'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Prime editing report</h5>
Expand All @@ -183,7 +207,7 @@ <h5>Prime editing report (all reads aligned to {{report_data.amplicons[0]}})</h5
{% endif %}

{% if report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]] and report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]]['11b']%}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Prime editing summary plots at analysis positions</h5>
Expand All @@ -203,7 +227,7 @@ <h5>Prime editing summary plots at analysis positions (aligned to {{report_data.
{# end plot 11b for prime editing #}

{% if report_data['figures']['locs']['plot_11c'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
<h5>Scaffold insertions</h5>
</div>
Expand All @@ -219,7 +243,7 @@ <h5>Scaffold insertions</h5>
{% else %}
{# If there is more than one amplicon, print a navigation to show each amplicon #}
<p>Reads are aligned to each amplicon sequence separately. Quantification and visualization of these reads are shown for each amplicon below:</p>
<div id='amplicons-card' class='card text-center mb-2'>
<div id='amplicons-card' class='card text-center mb-2 breakinpage'>
<div class='card-header amp-header'>
<h5>Amplicons</h5>
<ul class="nav nav-tabs amp-header card-header-tabs" id="nav-tab" role="tablist">
Expand Down Expand Up @@ -256,7 +280,7 @@ <h5>Amplicons</h5>
<div class="d-none d-print-block"><h3>Reads aligning to {{amplicon_name}}</h3> </div>{# this bit appears in print mode #}
{% endif %}

<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Nucleotide composition</h5>
Expand Down Expand Up @@ -294,7 +318,7 @@ <h5>Nucleotide composition for {{amplicon_name}}</h5>
</div>
</div> {# end card #}

<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Modification lengths</h5>
Expand Down Expand Up @@ -331,7 +355,7 @@ <h5>Modification lengths for {{amplicon_name}}</h5>
</div> {# end card_body #}
</div> {# end card #}

<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Indel characterization</h5>
Expand Down Expand Up @@ -412,7 +436,7 @@ <h5>Indel characterization for {{amplicon_name}}</h5>


{% if report_data['figures']['locs'][amplicon_name]['plot_5'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Frameshift analysis</h5>
Expand All @@ -427,7 +451,7 @@ <h5>Frameshift analysis for {{amplicon_name}}</h5>
{% endif %}

{% if report_data['figures']['locs'][amplicon_name]['plot_6'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Frameshift mutagenesis profiles</h5>
Expand All @@ -442,7 +466,7 @@ <h5>Frameshift mutagenesis profiles for {{amplicon_name}}</h5>
{% endif %}

{% if report_data['figures']['locs'][amplicon_name]['plot_7'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Non-coding mutations</h5>
Expand All @@ -457,7 +481,7 @@ <h5>Coding mutations for {{amplicon_name}}</h5>
{% endif %}

{% if report_data['figures']['locs'][amplicon_name]['plot_8'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Splicing</h5>
Expand All @@ -472,7 +496,7 @@ <h5>Splicing for {{amplicon_name}}</h5>
{% endif %}

{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['9']%}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Allele plots</h5>
Expand All @@ -491,7 +515,7 @@ <h5>Allele plots for {{amplicon_name}}</h5>
{% endif %}

{% if report_data['figures']['locs'][amplicon_name]['plot_10a'] %}
<div class='card text-center mb-2'>
<div class='card text-center mb-2 breakinpage'>
<div class='card-header'>
{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
<h5>Base editing</h5>
Expand Down
16 changes: 14 additions & 2 deletions templates/shared/partials/log_params.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
<div class="tab-pane fade text-start" id="log_params" role="tabpanel">
<div class="tab-pane fade text-start screen-only" id="log_params" role="tabpanel">
<p>CRISPResso version: {{report_data['run_data']['running_info']['version']}}</p>
<p>Run completed: {{report_data['run_data']['running_info']['end_time_string']}}</p>
<p>Amplicon sequence: <pre class='pre-scrollable'>{{report_data['run_data']['running_info']['args']['amplicon_seq']}}</pre></p>
{% if report_data['run_data']['running_info']['args']['guide_seq'] != '' %}
<p>Guide sequence: <pre class='pre-scrollable'>{{report_data['run_data']['running_info']['args']['guide_seq']}}</pre></p>
<p>Guide sequence: <pre class='pre-scrollable'>{{report_data['run_data']['running_info']['args']['guide_seq']}}</pre></p>
{% endif %}
<p>Command used: <pre class='pre-scrollable'>{{report_data['run_data']['running_info']['command_used']}}</pre></p>
<p>Parameters: <pre class='pre-scrollable'>{{report_data['run_data']['running_info']['args_string']}}</pre></p>
<p class='text-center m-0'><small><a href="{{report_data['crispresso_data_path']}}{{report_data['run_data']['running_info']['log_filename']}}">Running log</a></small></p>
</div>

<div class="tab-pane fade text-left print-only" id="log_params" role="tabpanel">
<p>CRISPResso version: {{report_data['run_data']['running_info']['version']}}</p>
<p>Run completed: {{report_data['run_data']['running_info']['end_time_string']}}</p>
<p>Amplicon sequence: {{report_data['run_data']['running_info']['args']['amplicon_seq']}}</p>
{% if report_data['run_data']['running_info']['args']['guide_seq'] != '' %}
<p>Guide sequence: {{report_data['run_data']['running_info']['args']['guide_seq']}}</p>
{% endif %}
<p>Command used: {{report_data['command_used']}}</p>
<p>Parameters: {{report_data['params']}}</p>
<p class='text-center m-0'><small><a href="{{report_data['crispresso_data_path']}}{{report_data['run_data']['running_info']['log_filename']}}">Running log</a></small></p>
</div>

0 comments on commit dcf7391

Please sign in to comment.