Fix padding for schedule

Add column to layout so mobile has padding. Use container to wrap schedule so padding and
centred table applies to all views.
This commit is contained in:
Joel Addison 2019-01-21 15:50:54 +13:00 committed by Tobias
parent d718343cde
commit c8b912bfec
2 changed files with 16 additions and 22 deletions

View file

@ -57,22 +57,24 @@
</div> </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-fluid"> <div class="container">
<div class="row justify-content-center"> <div class="row">
<div class="tab-content schedule-wrapper"> <div class="col">
{% for section in sections %} <div class="tab-content">
{% for timetable in section.days %} {% for section in sections %}
<div class="tab-pane fade {% if timetable.day.date|date:'Y-m-d' == '2019-01-23' %}show active{% endif %}" id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}" {% for timetable in section.days %}
role="tabpanel" aria-labelledby="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab"> <div class="tab-pane fade {% if timetable.day.date|date:'Y-m-d' == '2019-01-23' %}show active{% endif %}" id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}"
<div class="table-responsive hidden-md-down"> role="tabpanel" aria-labelledby="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab">
{% include "symposion/schedule/_grid.html" %} <div class="table-responsive hidden-md-down">
</div> {% include "symposion/schedule/_grid.html" %}
<div class="mobile-schedule"> </div>
{% include "symposion/schedule/_mobile.html" %} <div class="mobile-schedule">
{% include "symposion/schedule/_mobile.html" %}
</div>
</div> </div>
{% endfor %}
{% endfor %}
</div> </div>
{% endfor %}
{% endfor %}
</div> </div>
</div> </div>
</div> </div>

View file

@ -713,14 +713,6 @@ div.talk-abstract {
} }
} }
@include media-breakpoint-up(xl) {
.schedule-wrapper {
width: 80%;
min-width: 1140px;
max-width: 3000px;
}
}
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
div.footer-center { div.footer-center {
text-align: center; text-align: center;