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>
 
-  {% for section in sections %}
+  <div class="panel panel__compact">
-   {% cache 600 "schedule-table" section.schedule.section %}
+    <div class="panel--content">
-      {% for timetable in section.days %}
-        <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
-        {% include "symposion/schedule/_grid.html" %}
-      {% endfor %}
-    {% endcache %}
-  {% endfor %}
 
+      <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 for mobile */
+
+@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;
+  }
+}
+
 /* Schedule timetable needs some more specific font sizes */
 
-.calendar td {
+@media not screen and (max-width: 480px)  {
-  font-size: 0.9vw;
-}
 
-.slot {
+  .calendar td {
-  padding-left: 0.625rem;
+    font-size: 0.9vw;
-  padding-top: 0.2rem;
+  }
-  padding-bottom: 0.625rem;
-  padding-right: 0.625rem;
-  vertical-align: middle;
-}
 
-.calendar th {
+  .slot {
-  border-bottom: 1px solid #0c486c;
+    padding-left: 0.625rem;
-  border-left: 0px !important;
+    padding-top: 0.2rem;
-}
+    padding-bottom: 0.625rem;
+    padding-right: 0.625rem;
+    vertical-align: middle;
+  }
 
-.calendar .title {
+  .calendar th {
-  display: block;
+    border-bottom: 1px solid #0c486c;
-  padding-bottom: 0.5vh;
+    border-left: 0px !important;
-}
+  }
 
-.slot-shortbreak {
+  .calendar .title {
-  color: #fff ;
+    display: block;
-}
+    padding-bottom: 0.5vh;
+  }
 
-.slot-tutorial {
+  .slot-shortbreak {
-  vertical-align: top;
+    color: #fff ;
-}
+  }
 
-.time {
+  .slot-tutorial {
-  font-size: 0.5vw;
+    vertical-align: top;
-  line-height: 0.4;
+  }
-  vertical-align: middle;
+
-  padding-top: 0.25rem;
+  .time {
+    font-size: 0.5vw;
+    line-height: 0.4;
+    vertical-align: middle;
+    padding-top: 0.25rem;
+  }
+
+  .calendar .slot .room {
+    display: none;
+  }
 }