Adds mobile-friendly schedule view and paged schedule view (#81)

* Adds responsive mobile CSS for schedule timetable

* Adds by-day schedule view

* Displays content_override in schedule

* Adds twitter/homepage links for speakers.

pinaxcon/templates/symposion/schedule/_grid.html

@@ -10,7 +10,7 @@
   <tbody>
     {% for row in timetable %}
       <tr>
-        <td class="time">{{ row.time|date:"h:iA" }}</td>
+        <td class="time"><h4>{{ row.time|date:"h:iA" }}</h4></td>
         {% for slot in row.slots %}
           <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{{ slot.rowspan }}">
             {% if slot.kind.label == "talk" or slot.kind.label == "tutorial" %}
@@ -22,11 +22,14 @@
                 <span class="speaker">
                   {{ slot.content.speakers|join:", " }}
                 </span>
+                <span class="room">
+                  {{ slot.rooms|join:", "}}
+                </span>
               {% endif %}
             {% elif slot.kind.label == "shortbreak" %}
             {% else %}
-              {% if slot.content_override.raw %}
+              {% if slot.content_override %}
-                {{ slot.content_override.rendered|safe }}
+                {{ slot.content_override_html|safe }}
               {% else %}
                 {{ slot.kind.label }}
               {% endif %}

pinaxcon/templates/symposion/schedule/presentation_detail.html

@@ -49,6 +49,24 @@
     {% include "lca2017/_right_floating_image.html" with image_url=speaker_photo_url %}
 
     <h3><a href="{% url "speaker_profile" speaker.pk %}">{{ speaker }}</a></h3>
+
+    {% if speaker.homepage or speaker.twitter_username %}
+      <p><div class="btn-group">
+        {% if speaker.homepage %}
+          <a href="{{ speaker.homepage}}" class="btn-svg" title="Homepage">
+            {% include "cms_pages/home_page_blocks/btn_generic_link.html" %}
+          </a>
+        {% endif %}
+        {% if speaker.twitter_username %}
+          <a href="https://twitter.com/{{ speaker.twitter_username }}" class="btn-svg" title="{{ speaker}} on twitter">
+            {% include "cms_pages/home_page_blocks/btn_twitter.html" %}
+          </a>
+        {% endif %}
+      </div></p>
+    {% endif %}
+
+
+
     {{ speaker.biography_html|safe}}
 
   {% endfor %}

pinaxcon/templates/symposion/schedule/schedule_conference.html

@@ -15,19 +15,36 @@
 {% block right %}
 {% endblock %}
 
-{% block content %}
+{% block content_base %}
 
   <div class="page-head">
     {% block breadcrumbs %}{% endblock %}
   </div>
 
+  <div class="panel panel__compact">
+    <div class="panel--content">
+
+      <div class="panel--tab-controls">
+        <div class="panel--tabs">
+          {% for section in sections %}
+            {% for timetable in section.days %}
+              <a data-tab-control="{{ timetable.day.date|date:"l"}}" class="panel--tab-switch {% if forloop.is_first and forloop.parentloop.is_first %}is-active{% endif %}">{{ timetable.day.date|date:"l"}}</a>
+            {% endfor %}
+          {% endfor %}
+        </div>
+      </div>
+
       {% for section in sections %}
          {% cache 600 "schedule-table" section.schedule.section %}
             {% for timetable in section.days %}
+              <div data-tab-content="{{ timetable.day.date|date:"l"}}" class="panel--tab-content is-active">
                 <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
                 {% include "symposion/schedule/_grid.html" %}
+              </div>
             {% endfor %}
           {% endcache %}
       {% endfor %}
 
+    </div>
+  </div>
 {% endblock %}

static/src/lca2017/css/app.css

@@ -1607,43 +1607,89 @@ table.alt tr:not(:last-of-type) {
   margin-top: 2em;
 }
 
-/* Schedule timetable needs some more specific font sizes */
 
-.calendar td {
+/* Schedule timetable for mobile */
-  font-size: 0.9vw;
+
+@media only screen and (max-width: 480px)  {
+
+  .calendar {
+    line-height: 1.0;
+  }
+
+  .calendar thead {
+    display: none;
+  }
+
+  .calendar tr,
+  .calendar td
+  {
+    display: block;
+    padding: 0.5ex;
+  }
+
+  .calendar td,
+  .calendar td:not(:first-of-type) {
+    border: 0px;
+  }
+
+  .calendar .slot .title,
+  .calendar .slot .speaker,
+  .calendar .slot .room
+  {
+    display: block;
+    line-height: 1.2;
+  }
+
+  .calendar .slot .room
+  {
+    font-style: italic;
+  }
 }
 
-.slot {
+/* Schedule timetable needs some more specific font sizes */
+
+@media not screen and (max-width: 480px)  {
+
+  .calendar td {
+    font-size: 0.9vw;
+  }
+
+  .slot {
     padding-left: 0.625rem;
     padding-top: 0.2rem;
     padding-bottom: 0.625rem;
     padding-right: 0.625rem;
     vertical-align: middle;
-}
+  }
 
-.calendar th {
+  .calendar th {
     border-bottom: 1px solid #0c486c;
     border-left: 0px !important;
-}
+  }
 
-.calendar .title {
+  .calendar .title {
     display: block;
     padding-bottom: 0.5vh;
-}
+  }
 
-.slot-shortbreak {
+  .slot-shortbreak {
     color: #fff ;
-}
+  }
 
-.slot-tutorial {
+  .slot-tutorial {
     vertical-align: top;
-}
+  }
 
-.time {
+  .time {
     font-size: 0.5vw;
     line-height: 0.4;
     vertical-align: middle;
     padding-top: 0.25rem;
+  }
+
+  .calendar .slot .room {
+    display: none;
+  }
 }