Improve printed schedule

Show each day on a new page when printed.
Hide elements that do not assist with printed copy (current time, etc).
This commit is contained in:
Joel Addison 2021-01-24 12:03:00 +10:00
parent 0a0c466847
commit 734a0b713d
5 changed files with 9 additions and 5 deletions

View file

@ -46,7 +46,7 @@
<span class="clearfix d-sm-block d-md-none"></span> <span class="clearfix d-sm-block d-md-none"></span>
<small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small> <small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small>
</h2> </h2>
<p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p> <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). <span class="d-print-none">Current talks will be highlighted.</span></p>
<div class="table-responsive d-none d-md-block"> <div class="table-responsive d-none d-md-block">
{% include "symposion/schedule/_grid.html" %} {% include "symposion/schedule/_grid.html" %}
</div> </div>

View file

@ -11,12 +11,12 @@
{% block content %} {% block content %}
{% cache 600 "schedule-detail-table" schedule.section %} {% cache 600 "schedule-detail-table" schedule.section %}
{% for timetable in days %} {% for timetable in days %}
<div class="row"> <div class="row timetable-day">
<div class="col-12"> <div class="col-12">
<h2 class="my-4"> <h2 class="my-4">
{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }} {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
</h2> </h2>
<p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p> <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). <span class="d-print-none">Current talks will be highlighted.</span></p>
<div class="table-responsive d-none d-md-block"> <div class="table-responsive d-none d-md-block">
{% include "symposion/schedule/_grid.html" %} {% include "symposion/schedule/_grid.html" %}
</div> </div>

View file

@ -24,7 +24,7 @@
<h2 class="my-4"> <h2 class="my-4">
{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }} {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
</h2> </h2>
<p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p> <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). <span class="d-print-none">Current talks will be highlighted.</span></p>
<div class="table-responsive d-none d-md-block"> <div class="table-responsive d-none d-md-block">
{% include "symposion/schedule/_grid.html" with edit_schedule=True %} {% include "symposion/schedule/_grid.html" with edit_schedule=True %}
</div> </div>

View file

@ -134,7 +134,7 @@ $(function() {
var clock = $('div.conf-clock'); var clock = $('div.conf-clock');
if (clock.length === 0) { if (clock.length === 0) {
var template = document.createElement('template'); var template = document.createElement('template');
template.innerHTML = '<div class="conf-clock"></div>'; template.innerHTML = '<div class="conf-clock d-print-none"></div>';
var clockDiv = template.content.firstChild; var clockDiv = template.content.firstChild;
document.body.appendChild(clockDiv); document.body.appendChild(clockDiv);
clock = $(clockDiv); clock = $(clockDiv);

View file

@ -122,4 +122,8 @@ label.label-required:after { content: ' *'; }
opacity: 100 !important; opacity: 100 !important;
} }
} }
.timetable-day:not(:first-child) {
break-before: page;
}
} }