From fa9bb1a9f9d227dabf274787db711cf9d2e23f30 Mon Sep 17 00:00:00 2001
From: Christopher Neugebauer <_@chrisjrn.com>
Date: Sat, 10 Dec 2016 17:11:40 +1100
Subject: [PATCH] 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.
---
 .../templates/symposion/schedule/_grid.html   |   9 +-
 .../schedule/presentation_detail.html         |  18 +++
 .../schedule/schedule_conference.html         |  35 ++++--
 static/src/lca2017/css/app.css                | 104 +++++++++++++-----
 4 files changed, 125 insertions(+), 41 deletions(-)

diff --git a/pinaxcon/templates/symposion/schedule/_grid.html b/pinaxcon/templates/symposion/schedule/_grid.html
index b1ce1b12..36d1ad56 100644
--- a/pinaxcon/templates/symposion/schedule/_grid.html
+++ b/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 %}
-                {{ slot.content_override.rendered|safe }}
+              {% if slot.content_override %}
+                {{ slot.content_override_html|safe }}
               {% else %}
                 {{ slot.kind.label }}
               {% endif %}
diff --git a/pinaxcon/templates/symposion/schedule/presentation_detail.html b/pinaxcon/templates/symposion/schedule/presentation_detail.html
index 9ae0d5d9..580a30ac 100644
--- a/pinaxcon/templates/symposion/schedule/presentation_detail.html
+++ b/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 %}
diff --git a/pinaxcon/templates/symposion/schedule/schedule_conference.html b/pinaxcon/templates/symposion/schedule/schedule_conference.html
index 8c6022e1..eee41e5e 100644
--- a/pinaxcon/templates/symposion/schedule/schedule_conference.html
+++ b/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 %}
-   {% cache 600 "schedule-table" section.schedule.section %}
-      {% 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 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 %}
diff --git a/static/src/lca2017/css/app.css b/static/src/lca2017/css/app.css
index 2c7fcddf..d1f30eb4 100644
--- a/static/src/lca2017/css/app.css
+++ b/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 {
-  font-size: 0.9vw;
-}
+@media not screen and (max-width: 480px)  {
 
-.slot {
-  padding-left: 0.625rem;
-  padding-top: 0.2rem;
-  padding-bottom: 0.625rem;
-  padding-right: 0.625rem;
-  vertical-align: middle;
-}
+  .calendar td {
+    font-size: 0.9vw;
+  }
 
-.calendar th {
-  border-bottom: 1px solid #0c486c;
-  border-left: 0px !important;
-}
+  .slot {
+    padding-left: 0.625rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.625rem;
+    padding-right: 0.625rem;
+    vertical-align: middle;
+  }
 
-.calendar .title {
-  display: block;
-  padding-bottom: 0.5vh;
-}
+  .calendar th {
+    border-bottom: 1px solid #0c486c;
+    border-left: 0px !important;
+  }
 
-.slot-shortbreak {
-  color: #fff ;
-}
+  .calendar .title {
+    display: block;
+    padding-bottom: 0.5vh;
+  }
 
-.slot-tutorial {
-  vertical-align: top;
-}
+  .slot-shortbreak {
+    color: #fff ;
+  }
 
-.time {
-  font-size: 0.5vw;
-  line-height: 0.4;
-  vertical-align: middle;
-  padding-top: 0.25rem;
+  .slot-tutorial {
+    vertical-align: top;
+  }
+
+  .time {
+    font-size: 0.5vw;
+    line-height: 0.4;
+    vertical-align: middle;
+    padding-top: 0.25rem;
+  }
+
+  .calendar .slot .room {
+    display: none;
+  }
 }