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

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

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