From fe43a26ca500d9038823acd9e37d53903a596ce8 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@localhost.localdomain>
Date: Tue, 27 Nov 2018 18:26:09 +1300
Subject: [PATCH] Improve schedule usability

---
 .../schedule/schedule_conference.html         | 94 ++++++++++---------
 static/src/scss/app.scss                      | 12 +++
 2 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/pinaxcon/templates/symposion/schedule/schedule_conference.html b/pinaxcon/templates/symposion/schedule/schedule_conference.html
index 14a21b34..7fe56daf 100644
--- a/pinaxcon/templates/symposion/schedule/schedule_conference.html
+++ b/pinaxcon/templates/symposion/schedule/schedule_conference.html
@@ -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 %}
diff --git a/static/src/scss/app.scss b/static/src/scss/app.scss
index ad0f8f9f..5813335e 100644
--- a/static/src/scss/app.scss
+++ b/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;
+    }
+}
\ No newline at end of file