Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve schedule usability

Browse source
This commit is contained in:
Tobias 2018-11-27 18:26:09 +13:00
parent db3f28ddb2
commit fe43a26ca5
2 changed files with 60 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
pinaxcon/templates/symposion/schedule/schedule_conference.html
View file

@ -15,68 +15,70 @@
{% block content %}
<div class="schedule-header text-center">
<h1>Schedule</h1>
<h3 id="schedule-date">Wednesday 23 January 2019</h3>
<div class="schedule-header text-center">
<h1>Schedule</h1>
<h3 id="schedule-date">Wednesday 23 January 2019</h3>
<nav class="mb-4">
<div class="nav schedule-nav" id="schedule-nav" role="tablist">
{% for section in sections %}
{% for timetable in section.days %}
<a
class="nav-item nav-link {% if forloop.first %}active{% endif %}" id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab" data-toggle="tab" href="#{{ timetable.day.date|date:"l"|lower}}" role="tab" aria-controls="{{ timetable.day.date|date:"l"|lower}}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
{{ timetable.day.date|date:"l"}}
</a>
{% endfor %}
{% endfor %}
</div>
</nav>
<nav class="mb-4">
<div class="nav schedule-nav" id="schedule-nav" role="tablist">
{% for section in sections %}
{% for timetable in section.days %}
<a
class="nav-item nav-link {% if forloop.first %}active{% endif %}" id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab" data-toggle="tab" href="#{{ timetable.day.date|date:"l"|lower}}" role="tab" aria-controls="{{ timetable.day.date|date:"l"|lower}}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
{{ timetable.day.date|date:"l"}}
</a>
{% endfor %}
{% endfor %}
</div>
</nav>
</div>
<div class="schedule-page bg-secondary text-primary pt-4 pb-4 mb-0">
<div class="container">
<div class="tab-content">
<div class="schedule-page bg-secondary text-primary pt-4 pb-4 mb-0">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="tab-content schedule-wrapper">
{% for section in sections %}
{% for timetable in section.days %}
<div
class="tab-pane fade {% if forloop.first %}show active{% endif %}"
id="{{ timetable.day.date|date:"l"|lower}}"
role="tabpanel"
aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
>
<div class="table-responsive hidden-md-down">
class="tab-pane fade {% if forloop.first %}show active{% endif %}"
id="{{ timetable.day.date|date:"l"|lower}}"
role="tabpanel"
aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
>
<div class="table-responsive hidden-md-down">
{% cache 180 cache-schedule timetable.day.date %}
{% include "symposion/schedule/_grid.html" %}
{% include "symposion/schedule/_grid.html" %}
{% endcache %}
</div>
<div class="mobile-schedule">
{% cache 180 cache-schedule-mobile timetable.day.date %}
{% include "symposion/schedule/_mobile.html" %}
{% endcache %}
</div>
<div class="mobile-schedule">
{% cache 180 cache-schedule-mobile timetable.day.date %}
{% include "symposion/schedule/_mobile.html" %}
{% endcache %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
{%block footer_class %}footer-no-margin{% endblock %}
{% block scripts_extra %}
<script type="text/javascript">
var dates = {
'wednesday': '23',
'thursday': '24',
'friday': '25'
};
var trailing = ' January 2019';
<script type="text/javascript">
var dates = {
'wednesday': '23',
'thursday': '24',
'friday': '25'
};
var trailing = ' January 2019';
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var day = e.target.attributes['aria-controls'].value;
$('#schedule-date').text(day + ' ' + dates[day] + trailing);
})
</script>
{{ block.super }}
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var day = e.target.attributes['aria-controls'].value;
$('#schedule-date').text(day + ' ' + dates[day] + trailing);
})
</script>
{{ block.super }}
{% endblock %}

12
static/src/scss/app.scss
View file

@ -631,6 +631,10 @@ hr {
@media screen {
.schedule-page {
@include media-breakpoint-only(lg) {
font-size: 0.8 * $font-size-base;
}
@include media-breakpoint-down(lg) {
.container {
max-width: 100%;
@ -679,3 +683,11 @@ div.talk-abstract {
border-left: 1px solid #0F7C11 !important;
}
}
@include media-breakpoint-up(xl) {
.schedule-wrapper {
width: 80%;
min-width: 1140px;
max-width: 3000px;
}
}