Improve schedule usability

pinaxcon/templates/symposion/schedule/schedule_conference.html

@@ -15,7 +15,7 @@
 
 {% block content %}
 
-  <div class="schedule-header text-center">
+<div class="schedule-header text-center">
   <h1>Schedule</h1>
   <h3 id="schedule-date">Wednesday 23 January 2019</h3>
 
@@ -30,12 +30,13 @@
     {% endfor %}
     {% endfor %}
   </div>
-    </nav>
-  </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
@@ -59,13 +60,14 @@
       {% endfor %}
     </div>
   </div>
-  </div>
+</div>
+</div>
 {% endblock %}
 
 {%block footer_class %}footer-no-margin{% endblock %}
 
 {% block scripts_extra %}
-  <script type="text/javascript">
+<script type="text/javascript">
   var dates = {
     'wednesday': '23',
     'thursday': '24',
@@ -77,6 +79,6 @@
     var day = e.target.attributes['aria-controls'].value;
     $('#schedule-date').text(day + ' ' + dates[day] + trailing);
   })
-  </script>
-  {{ block.super }}
+</script>
+{{ block.super }}
 {% endblock %}

static/src/scss/app.scss

@@ -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;
+    }
+}