Styling for schedule

Update to Bootstrap 4 throughout.
Remove unused blocks and elements from past conferences.
Ensure schedule works in print mode.

pinaxcon/templates/site_base.html

@@ -37,8 +37,8 @@
   </header>
 
   {% if messages %}
-  <div class="container my-5 alert alert-primary">
+  <div class="container my-5 alert alert-primary d-print-none">
-    <ul class="messagelist d-print-none list-unstyled">
+    <ul class="messagelist list-unstyled">
       {% for message in messages %}
       <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
       {% endfor %}
@@ -47,10 +47,12 @@
   {% endif %}
 
   <main role="main" class="{% block main_class %}container{% endblock %}">
-    <div class="page-header mb-5">
+    <div class="row">
+      <div class="col page-header">
         <h1 class="page-title">{% block page_title %}{% endblock %}</h1>
         <p class="lead">{% block page_lead %}{% endblock %}</p>
       </div>
+    </div>
 
     {% block body_base %}
     {% block body_out %}

pinaxcon/templates/symposion/schedule/_grid.html

@@ -1,21 +1,21 @@
 {% load lca2018_tags %}
 {% load waffle_tags %}
 
-<table class="calendar table">
+<table class="calendar table table-bordered">
   <thead>
     <tr>
-      <th class="time">&nbsp;</th>
+      <th scope="row" class="time"><em>Room</em></th>
       {% for room in timetable.rooms %}
-        <th>{{ room.name }}</th>
+      <th scope="column">{{ room.name }}</th>
       {% endfor %}
     </tr>
     {% with timetable|day_has_tracks:timetable.day as has_tracks %}
     {% if has_tracks %}
     <tr>
-      <th class="time">&nbsp;</th>
+      <th scope="row" class="time"><em>Miniconf</em></th>
       {% for room in timetable.rooms %}
       {% with room|trackname:timetable.day as track_name %}
-      <th class="track-name">{% if track_name %}<p>{{ track_name }}{% endif %}</th>
+      <th scope="column" class="track-name">{% if track_name %}<p>{{ track_name }}</p>{% endif %}</th>
       {% endwith %}
       {% endfor %}
     </tr>
@@ -25,17 +25,19 @@
 
   <tbody>
     {% for row in timetable %}
-    {% if forloop.last %}
-    {% else %}
     <tr class="calendar-row">
-      <td class="time"><p>{{ row.time|date:"h:iA" }} <br />{{ row.end|date:"h:iA" }}</p></td>
+      <th scope="row" class="time"><p>{{ row.time|date:"h:iA" }}</p></th>
       {% for slot in row.slots %}
       <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{% if slot.rowspan > 1%}{{ slot.rowspan|add:-1 }}{% else %}1{% endif %}" >
         {% with slot.kind.label.lower as label %}
         {% if label == "talk" or label == "tutorial" %}
         {% if slot.content %}
         <div>
-          <p><a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a><br />{{ slot.content.speakers|join:", " }}</p>
+          <p>
+            <a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
+            <br />
+            {{ slot.content.speakers|join:", " }}
+          </p>
         </div>
         {% flag "session_chair" %}
         {% if slot.sessions %}
@@ -58,7 +60,7 @@
         {% if slot.content_override %}
         {{ slot.content_override_html|safe }}
         {% else %}
-        <div class="center-flex">
+        <div class="d-flex align-items-center">
           <p>{{ slot.kind.label }}</p>
         </div>
         {% endif %}
@@ -66,9 +68,10 @@
         {% endwith %}
       </td>
       {% endfor %}
-    </tr>
+      {% if forloop.last %}
+      <td colspan="{{ timetable.rooms|length }}"><em>Day End</em></td>
       {% endif %}
+    </tr>
     {% endfor %}
   </tbody>
 </table>
-

pinaxcon/templates/symposion/schedule/_mobile.html

@@ -7,17 +7,20 @@
 {% if forloop.last %}
 {% else %}
 {% for slot in row.slots %}
-<div class="mobile-slot my-3" style="border-bottom: 1px solid #CCD5C5;">
+<div class="mobile-slot my-3">
   {% if forloop.first %}
     <h3>{{ row.time|date:"h:iA" }}&ndash;{{ row.end|date:"h:iA" }}</h3>
   {% endif %}
   {% with slot.kind.label.lower as label %}
   {% if label == "talk" or label == "tutorial" %}
   {% if slot.content %}
-  <p><a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a></p>
+  <p>
-  <p>{{ slot.content.speakers|join:", "}}</p>
+    <a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
-  {% listlookup timetable.rooms forloop.counter0 as value %}
+    <br>
-  <p><em>{{ value }}<br />ends {{ slot.end  }}</em></p>
+    {{ slot.content.speakers|join:", "}}
+  </p>
+  {% listlookup timetable.rooms forloop.counter0 as room_names %}
+  <p><em>{{ room_names }}<br />ends {{ slot.end }}</em></p>
   {% endif %}
   {% else %}
   <p>{{ slot.kind.label }}</p>
@@ -27,4 +30,3 @@
 {% endfor %}
 {% endif %}
 {% endfor %}
-

pinaxcon/templates/symposion/schedule/_schedule_nav_link.html

@@ -1,9 +1,10 @@
 <a
-  class="nav-item nav-link {% if active %}active{% endif %}"
+  class="nav-link {% if active %}active{% endif %}"
-  id="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab"
+  id="schedule_day_{{ label|lower }}-tab"
-  data-toggle="tab" href="#{{section.schedule.section.slug}}-{{ timetable.day.date|date:"l"|lower}}"
+  href="#{{ label|lower }}"
+  data-toggle="pill"
   role="tab"
-  aria-controls="{{section.schedule.section.slug}}-{{ timetable.day.date|date:"l"|lower}}"
+  aria-controls="schedule_day_{{ label|lower }}"
   aria-selected="{% if active %}true{% else %}false{% endif %}">
   {{ label }}
 </a>

pinaxcon/templates/symposion/schedule/presentation_detail.html

@@ -7,22 +7,22 @@
 {% load thumbnail %}
 
 {% block head_title %}Presentation: {{ presentation.title }}{% endblock %}
+{% block page_title %}{{ presentation.title }}{% endblock %}
+{% block page_lead %}{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}–{{ presentation.slot.end }}{% endblock %}
 
 {% block content %}
+  {% if presentation.unpublish %}
   <div class="row">
-
+    <div class="col">
-    <div class="col-12 col-lg-10 offset-lg-1">
+      <p><strong>Presentation not published.</strong></p>
-      <h1 class="mb-4" style="max-width: 800px;">{{ presentation.title }}</h1>
-      <p>
-        <strong>{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }}</strong>
-      </p>
-      <hr class="green">
     </div>
+  </div>
+  {% endif %}
 
-    <div class="col-12 col-lg-3 offset-lg-1 order-2 order-md-1 px-4" >
+  <div class="row presentation-details">
-      <p class="pt-4"><strong>Presented by</strong></p>
+    <div class="col-md-3">
+      <h2 class="mt-4">Presented by</h4>
       <ul class="list-unstyled">
-
         {% for speaker in presentation.speakers %}
         <li class="mb-4 pb-2">
           {% speaker_photo speaker 120 as speaker_photo_url %}
@@ -40,17 +40,14 @@
           </p>
         </li>
         {% endfor %}
-
       </ul>
     </div>
 
-    <div class="col-12 col-lg-7 order-1 order-lg-2 px-4 talk-abstract">
+    <div class="col-md-9 presentation-abstract">
-      <h4 class="mt-4">Abstract</h4>
+      <h2 class="mt-4">Abstract</h4>
       {% autoescape off %}
       <div class="abstract pb-4"><p>{{ presentation.abstract_html|safe|clean_text|urlize }}</p></div>
       {% endautoescape %}
     </div>
-  {% if presentation.unpublish %}
+  </div>
-    <p><strong>Presentation not published.</strong></p>
-  {% endif %}
 {% endblock %}

pinaxcon/templates/symposion/schedule/public_base.html

@@ -1,7 +0,0 @@
-{% extends "content_page.html" %}
-
-{% load staticfiles %}
-
-{% comment %}
-{% block header_background_image %}{% static "lca2018/images/hobart_bg_optimised.jpg" %}{% endblock %}
-{% endcomment %}

pinaxcon/templates/symposion/schedule/schedule_conference.html

@@ -1,119 +1,106 @@
-{% extends "utility_page.html" %}
+{% extends "site_base.html" %}
 
 {% load i18n %}
 {% load cache %}
 {% load lca2018_tags %}
 
 {% block head_title %}Conference Schedule{% endblock %}
-{% block header_title %}Conference Schedule{% endblock %}
+{% block page_title %}Conference Schedule{% endblock %}
-
-{% block body_class %}bg-primary text-secondary{% endblock body_class %}
-{% block right %}
-{% endblock %}
-{% block navbar %}{% include 'nav.html' with color='green' %}{% endblock %}
-{% block main_class %}container-fluid{% endblock %}
 
 {% block content %}
-
+  <div class="row d-print-none">
-<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">
-      Monday miniconfs
-      {% for section in sections %}
-      {% if "Miniconf" in section.schedule.section.name %}
-      {% for timetable in section.days %}
-      {% if timetable.day.date|date:"Y-m-d" == "2019-01-21" %}
-      {% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
-      {% endif %}
-      {% endfor %}
-      {% endif %}
-      {% endfor %}
-      <br />
-
-      Tuesday miniconfs
-      {% for section in sections %}
-      {% if "Miniconf" in section.schedule.section.name %}
-      {% for timetable in section.days %}
-      {% if timetable.day.date|date:"Y-m-d" == "2019-01-22" %}
-      {% include "symposion/schedule/_schedule_nav_link.html" with label=section.schedule.section.name|cut:" Miniconf" %}
-      {% endif %}
-      {% endfor %}
-      {% endif %}
-      {% endfor %}
-      <br />
-
-      {% for section in sections %}
-      {% if "Miniconf" not in section.schedule.section.name %}
-      {% for timetable in section.days %}
-      {% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
-      {% endfor %}
-      {% endif %}
-      {% endfor %}
-    </div>
-  </nav>
-</div>
-
-<div class="schedule-page bg-secondary pt-4 pb-4 mb-0">
-  <div class="container">
-    <div class="row">
     <div class="col">
-        <div class="tab-content">
+      <ul class="nav nav-pills flex-column flex-md-row" id="schedule-tabs" role="tablist">
         {% for section in sections %}
         {% for timetable in section.days %}
-          <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}}"
+          <li class="nav-item flex-md-fill text-md-center">
-            role="tabpanel" aria-labelledby="{{ section.schedule.section.slug }}-{{ timetable.day.date|date:"l"|lower}}-tab">
+            {% include "symposion/schedule/_schedule_nav_link.html" with active=forloop.first label=timetable.day.date|date:"l" %}
-            <div class="table-responsive hidden-md-down">
+          </li>
+        {% endfor %}
+      {% endfor %}
+      </ul>
+    </div>
+  </div>
+
+  <div class="tab-content d-print-block my-3" id="schedule-tabContent">
+    {% for section in sections %}
+      {% cache 600 "schedule-table" section.schedule.section %}
+      {% for timetable in section.days %}
+      <div class="row tab-pane fade {% if forloop.first %}show active{% endif %} d-print-block" id="{{ timetable.day.date|date:"l"|lower}}" role="tabpanel" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab">
+        <div class="col-12">
+          <h2 class="my-4">
+            {{ section.schedule.section.name }}
+            <span class="clearfix d-sm-block d-md-none"></span>
+            <small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small>
+          </h2>
+          <div class="table-responsive d-none d-md-block">
             {% include "symposion/schedule/_grid.html" %}
           </div>
-            <div class="mobile-schedule">
+          <div class="mobile-schedule d-sm-block d-md-none">
             {% include "symposion/schedule/_mobile.html" %}
           </div>
         </div>
+      </div>
       {% endfor %}
+      {% endcache %}
     {% endfor %}
   </div>
-      </div>
-    </div>
-  </div>
-</div>
 {% endblock %}
 
-{%block footer_class %}footer-no-margin{% endblock %}
-
 {% block scripts_extra %}
   <script type="text/javascript">
-  var dates = {
-    'monday': '21',
-    'tuesday': '22',
-    'wednesday': '23',
-    'thursday': '24',
-    'friday': '25'
-  };
-  var trailing = ' January 2019';
 
-  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
+    fragment = window.location.hash.toLowerCase().substring(1);
-    var controls = e.target.attributes['aria-controls'].value
-    var day = controls.split('-');
-    day = day[day.length - 1];
-    $('#schedule-date').text(day + ' ' + dates[day] + trailing);
-    var loc = window.location.toString().split('?')[0] += '?schedule=' + controls;
-    window.history.pushState({path: loc}, '', loc);
-  })
-</script>
 
-<script>
+    if (!fragment) {
-    const urlParams = new URLSearchParams(window.location.search);
+      OFFSET = -10 * (60 * 60 * 1000); // Gold Coast is 10 hours ahead of UTC in Jan.
-    const scheduleName = urlParams.get('schedule');
+      JAN = 0; // because January is 0, not 1
-    if(scheduleName !== null) {
+
-      $('a[href="#' + scheduleName + '"]').tab('show');
+      fragments = [
-    } else {
+        {"day": "monday", "time": Date.UTC(2020, JAN, 13)},
-      var currLoc = $('a[data-toggle="tab"].active').first().attr('aria-controls');
+        {"day": "tuesday", "time": Date.UTC(2020, JAN, 14)},
-      var loc = window.location.toString().split('?')[0] += '?schedule=' + currLoc;
+        {"day": "wednesday", "time": Date.UTC(2020, JAN, 15)},
-      window.history.replaceState({path: loc}, '', loc);
+        {"day": "thursday", "time": Date.UTC(2020, JAN, 16)},
+        {"day": "friday", "time": Date.UTC(2020, JAN, 17)},
+        {"day": "saturday", "time": Date.UTC(2020, JAN, 18)},
+      ];
+
+      now = new Date().getTime();
+
+      for (i = 0; i < 5; i++) {
+        f = fragments[i];
+        g = fragments[i+1];
+        if ((f.time + OFFSET) <= now && now < (g.time + OFFSET)) {
+          fragment = f.day;
         }
+      }
+    }
+
+    document.addEventListener("hashchange", function(event) {
+      fragment = window.location.hash.toLowerCase().substring(1);
+
+      if (!fragment) {
+        return;
+      };
+
+      fragmentid = "#schedule_day_" + fragment + "-tab";
+      $(fragmentid).tab('show');
+
+    });
+
+      $(".nav-item").click(function(event) {
+        // This updates the window location fragment so that
+        // the URL bar is updated, and so that when you go
+        // back, it loads the right page.
+
+        // len("schedule_day_") == 13
+        day_tab = event.target.id.substring(13);
+        day = day_tab.substr(0, day_tab.length-4);
+
+        if(history.pushState) {
+            history.pushState(null, null, "#" + day);
+        }
+      });
   </script>
   {{ block.super }}
 {% endblock %}

pinaxcon/templates/symposion/schedule/schedule_detail.html

@@ -1,28 +1,29 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "site_base.html" %}
 
 {% load i18n %}
 {% load cache %}
 {% load lca2018_tags %}
 {% load sitetree %}
 
-{% block head_title %}{{ schedule.section }} Schedule{% endblock %}
+{% block head_title %}{{ schedule.section.name }} Schedule{% endblock %}
-{% block header_title %}{{ schedule.section }} Schedule{% endblock%}
+{% block page_title %}{{ schedule.section.name }} Schedule{% endblock%}
-{% block header_paragraph %}{{ schedule.header_paragraph.text }}{% endblock%}
-{% block header_inset_image %}{% illustration "devil.svg" %}{% endblock %}
-
-{% block body_class %}full{% endblock %}
 
 {% block content %}
-  <div class="page-head">
+  {% cache 600 "schedule-detail-table" schedule.section %}
-    {% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
-  </div>
-
-  {% cache 600 "schedule-table" schedule.section %}
     {% for timetable in days %}
-      <h3>{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
+    <div class="row">
-      <br />
+      <div class="col-12">
+        <h2 class="my-4">
+          {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
+        </h2>
+        <div class="table-responsive d-none d-md-block">
           {% include "symposion/schedule/_grid.html" %}
-      <br />
+        </div>
+        <div class="mobile-schedule d-sm-block d-md-none">
+          {% include "symposion/schedule/_mobile.html" %}
+        </div>
+      </div>
+    </div>
     {% endfor %}
   {% endcache %}
 {% endblock %}

pinaxcon/templates/symposion/schedule/schedule_list.html

@@ -1,4 +1,4 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "site_base.html" %}
 
 {% load i18n %}
 {% load cache %}
@@ -7,14 +7,12 @@
 
 {% block head_title %}Presentation Listing{% endblock %}
 
-{% block header_title %}{{ schedule.section.name }} List{% endblock %}
+{% block page_title %}Presentation List{% endblock %}
-{% block header_paragraph %}{{ schedule.header_paragraph.text }}{% endblock%}
+{% block page_lead %}{{ schedule.section.name }}{% endblock%}
-{% block header_inset_image %}{% illustration "lavender.svg" %}{% endblock %}
 
 {% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
 
 {% block content %}
-<div class="jumbotron">
   {% cache 600 "schedule-list" schedule.section.name %}
     <ul>
       {% for presentation in presentations %}
@@ -31,5 +29,4 @@
       {% endfor %}
     </ul>
   {% endcache %}
-</div>
 {% endblock %}

pinaxcon/templates/symposion/schedule/session_detail.html

@@ -1,4 +1,4 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "site_base.html" %}
 
 {% load lca2018_tags %}
 {% load sitetree %}
@@ -11,9 +11,6 @@
 
 {% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
 
-{% block header_inset_image %}{{ block.super }}{% endblock %}
-
-{% block header_background_image %}{{ block.super }}{% endblock %}
 
 {% block header_title %}Session: {{ session }}{% endblock %}
 

pinaxcon/templates/symposion/schedule/session_list.html

@@ -1,4 +1,4 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "site_base.html" %}
 
 {% load lca2018_tags %}
 {% load sitetree %}
@@ -11,10 +11,6 @@
 
 {% block breadcrumbs %}{% sitetree_breadcrumbs from "main" %}{% endblock %}
 
-{% block header_inset_image %}{{ block.super }}{% endblock %}
-
-{% block header_background_image %}{{ block.super }}{% endblock %}
-
 {% block header_title %}Sessions{% endblock %}
 
 {% block header_paragraph %}

pinaxcon/templates/symposion/speakers/speaker_profile.html

@@ -1,4 +1,4 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "site_base.html" %}
 
 {% load i18n %}
 {% load lca2018_tags %}

pinaxcon/templates/utility_page.html

@@ -1,4 +1,4 @@
-{% extends "content_page.html" %}
+{% extends "site_base.html" %}
 {% load staticfiles %}
 
 {% block head_title %}{% block page_title %}{% endblock %}{% endblock %}

pinaxcon/templatetags/lca2018_tags.py

@@ -36,11 +36,6 @@ def proposal_permission(context, permname, proposal):
     return context.request.user.has_perm(perm)
 
 
-@register.simple_tag(takes_context=False)
-def illustration(name):
-    return staticfiles.static('lca2018/images/') + name
-
-
 @register.simple_tag(takes_context=True)
 def speaker_photo(context, speaker, size):
     ''' Provides the speaker profile, or else fall back to libravatar or gravatar. '''
@@ -81,6 +76,21 @@ def conference_name():
     return conference_models.Conference.objects.get(id=CONFERENCE_ID).title
 
 
+@register.simple_tag()
+def conference_start_date():
+    return conference_models.Conference.objects.get(id=CONFERENCE_ID).start_date
+
+
+@register.simple_tag()
+def conference_end_date():
+    return conference_models.Conference.objects.get(id=CONFERENCE_ID).end_date
+
+
+@register.simple_tag()
+def conference_timezone():
+    return conference_models.Conference.objects.get(id=CONFERENCE_ID).timezone
+
+
 @register.filter()
 def day_has_tracks(timetable, day):
     try:

pinaxcon/templatetags/lca2019_tags.py

@@ -61,6 +61,7 @@ def clean_text(txt):
     # Remove double/triple/+ spaces from `txt` and replace with single space
     return re.sub(r' {2,}' , ' ', txt)
 
+
 @register.filter
 def twitter_handle(txt):
     # Add @ to twitter handle if not present

static/src/scss/app.scss

@@ -4,6 +4,12 @@
 
 /* START LCA2020 */
 
+$dawn-sea: rgb(0, 177, 197);
+$blaze : rgb(250, 166, 26);
+$dusk-sea : rgb(0, 113, 144);
+$noon-sea : rgb(0, 141, 162);
+
+
 body {
    font-family: 'Source Sans Pro', sans-serif;
 }
@@ -16,19 +22,19 @@ h3, .h3 {
 }
 
 .bg-dawn-sea {
-    background-color: rgb(0, 177, 197);
+    background-color: $dawn-sea;
 }
 
 .bg-blaze {
-    background-color: rgb(250, 166, 26);
+    background-color: $blaze;
 }
 
 .bg-dusk-sea {
-    background-color: rgb(0, 113, 144);
+    background-color: $dusk-sea;
 }
 
 .bg-noon-sea {
-    background-color: rgb(0, 141, 162);
+    background-color: $noon-sea;
 }
 
 .banner-subscribe {
@@ -50,7 +56,7 @@ h3, .h3 {
 }
 
 .footer {
-    border-top: 1px rgb(0, 177, 197) solid;
+    border-top: 1px solid $dawn-sea;
 }
 
 .footer-logo {
@@ -66,6 +72,18 @@ h3, .h3 {
     background-color: #fff;
 }
 
+.presentation-details {
+    border-top: 1px solid $noon-sea;
+}
+
+.presentation-abstract {
+    border-left: 1px solid $noon-sea;
+}
+
+.mobile-slot {
+    border-bottom: 1px solid $noon-sea;
+}
+
 /* END LCA2020 */
 
 .messagelist {
@@ -80,3 +98,11 @@ label.label-required:after { content: ' *'; }
     font-family: Hack, monospace;
     white-space: pre-wrap;
 }
+
+@media print {
+    .fade {
+        &:not(.show) {
+            opacity: 100 !important;
+        }
+    }
+}