From 797740395777f258359843c3c94a5f09b0444391 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@localhost.localdomain>
Date: Sat, 29 Sep 2018 10:42:27 +1200
Subject: [PATCH] Add schedule calendar (no mobile yet)

---
 pinaxcon/templates/site_base.html             |   2 +-
 .../templates/symposion/schedule/_grid.html   | 118 +++++++--------
 .../schedule/schedule_conference.html         | 140 +++++++-----------
 static/src/scss/app.scss                      |  79 ++++++++++
 4 files changed, 188 insertions(+), 151 deletions(-)

diff --git a/pinaxcon/templates/site_base.html b/pinaxcon/templates/site_base.html
index 610a6a59..57c17575 100644
--- a/pinaxcon/templates/site_base.html
+++ b/pinaxcon/templates/site_base.html
@@ -113,7 +113,7 @@
     {% endblock %}
   </main>
 
-  <footer class="bg-white text-primary py-xl-5 py-2">
+  <footer class="bg-white text-primary py-xl-5 py-2 {%block footer_class %}{% endblock %}">
     <p>
         <small class="float-right">
             &copy; 2018 linux.conf.au <br />
diff --git a/pinaxcon/templates/symposion/schedule/_grid.html b/pinaxcon/templates/symposion/schedule/_grid.html
index f5cd04d2..dc508d49 100644
--- a/pinaxcon/templates/symposion/schedule/_grid.html
+++ b/pinaxcon/templates/symposion/schedule/_grid.html
@@ -1,78 +1,74 @@
-
 {% load lca2018_tags %}
 {% load waffle_tags %}
-<table class="calendar table table-bordered">
+
+<table class="calendar table">
   <thead>
     <tr>
       <th class="time">&nbsp;</th>
         {% for room in timetable.rooms %}
-          <th>{{ room.name }}</th>
-          {% endfor %}
+        <th>Theatre {{ room.name }}</th>
+        {% endfor %}
     </tr>
     {% with timetable|day_has_tracks:timetable.day as has_tracks %}
-      {% if has_tracks %}
-        <tr>
-          <th class="time">&nbsp;</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>
-            {% endwith %}
-          {% endfor %}
-        </tr>
-      {% endif %}
+    {% if has_tracks %}
+    <tr>
+      <th class="time">&nbsp;</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>
+      {% endwith %}
+      {% endfor %}
+    </tr>
+    {% endif %}
     {% endwith %}
   </thead>
+
   <tbody>
     {% for row in timetable %}
-      <tr>
-        <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 }}">
-            {% with slot.kind.label.lower as label %}
-            {% if label == "talk" or label == "tutorial" %}
-              {% if slot.content %}
-                <span class="title">
-                  <a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a>
-                </span>
-                <span class="speaker">
-                  {{ slot.content.speakers|join:", " }}
-                </span>
-                {% flag "session_chair" %}
-                  {% if slot.sessions %}
-                    <div>
-                      {% for session in slot.sessions.all %}
-                        <em>Session chair:
-                        {% if not session.chair %}
-                          <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a>
-                        {% else %}
-                          <a href="{% url "schedule_session_detail" session.id %}">{{ session.chair.user.attendee.attendeeprofilebase.attendeeprofile.name }}</a>
-                        {% endif %}</em>
-                      {% endfor %}
-                    </div>
-                  {% endif %}
-                {% endflag %}
-              {% endif %}
-            {% elif label == "shortbreak" %}
+    {% if forloop.last %}
+    {% else %}
+    <tr class="calendar-row">
+      <td class="time"><p>{{ row.time|date:"h:iA" }}</p></td>
+      {% 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>
+        </div>
+        {% flag "session_chair" %}
+        {% if slot.sessions %}
+        <div>
+          {% for session in slot.sessions.all %}
+          <em>Session chair:
+            {% if not session.chair %}
+            <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a>
             {% else %}
-              {% if slot.content_override %}
-                {{ slot.content_override_html|safe }}
-              {% else %}
-                {{ slot.kind.label }}
-              {% endif %}
+            <a href="{% url "schedule_session_detail" session.id %}">{{ session.chair.user.attendee.attendeeprofilebase.attendeeprofile.name }}</a>
             {% endif %}
-            {% if "break" in label %}
-            {% else %}
-              <span class="room">
-                {{ slot.rooms|join:", "}}<span class="endtime"> ends {{ slot.end|date:"h:iA" }}</span>
-              </span>
-            {% endif %}
-            {% endwith %}
-          </td>
-        {% endfor %}
-        {% if forloop.last %}
-          <td colspan="{{ timetable.rooms|length }}"></td>
+          </em>
+          {% endfor %}
+        </div>
         {% endif %}
-      </tr>
+        {% endflag %}
+        {% endif %}
+        {% elif label == "shortbreak" %}
+        {% else %}
+        {% if slot.content_override %}
+        {{ slot.content_override_html|safe }}
+        {% else %}
+        <div class="center-flex">
+          <p>{{ slot.kind.label }}</p>
+        </div>
+        {% endif %}
+        {% endif %}
+        {% endwith %}
+      </td>
+      {% endfor %}
+    </tr>
+    {% endif %}
     {% endfor %}
   </tbody>
-</table>
\ No newline at end of file
+</table>
+
diff --git a/pinaxcon/templates/symposion/schedule/schedule_conference.html b/pinaxcon/templates/symposion/schedule/schedule_conference.html
index 70dfa0a7..3511b9fb 100644
--- a/pinaxcon/templates/symposion/schedule/schedule_conference.html
+++ b/pinaxcon/templates/symposion/schedule/schedule_conference.html
@@ -1,4 +1,4 @@
-{% extends "symposion/schedule/public_base.html" %}
+{% extends "utility_page.html" %}
 
 {% load i18n %}
 {% load cache %}
@@ -7,107 +7,69 @@
 {% block head_title %}Conference Schedule{% endblock %}
 {% block header_title %}Conference Schedule{% endblock %}
 
-{% block body_class %}full{% 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_base %}
+{% block content %}
 
-  <div class="page-head">
-    {% block breadcrumbs %}{% endblock %}
+  <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>
   </div>
 
-  <div class="card">
-    <div class="card-header">
-      <nav>
-        <ul class="nav nav-tabs card-header-tabs" id="nav-tabs" role="tablist">
-          {% for section in sections %}
-            {% for timetable in section.days %}
-              <li class="nav-item">
-                <a class="nav-item nav-link active"
-                   id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
-                   href="#{{ timetable.day.date|date:"l"|lower}}"
-                   role="tab" aria-controls="schedule_day_{{ timetable.day.date|date:"l"|lower}" >
-                  {{ timetable.day.date|date:"l"}}
-                </a>
-              </li>
-            {% endfor %}
-          {% endfor %}
-        </ul>
-      </nav>
-    </div>
-
-    <div class="tab-content card-body">
-      {% for section in sections %}
-         {% cache 600 "schedule-table" section.schedule.section %}
-            {% for timetable in section.days %}
-              <div class="tab-pane active" id="{{ timetable.day.date|date:"l"|lower}}"
-                role="tabpanel" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab">
-                <h3>{{ section.schedule.section.name }} — {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</h3>
-                {% include "symposion/schedule/_grid.html" %}
-              </div>
-            {% endfor %}
-         {% endcache %}
-      {% endfor %}
+  <div class="bg-secondary text-primary pt-4 pb-4 mb-0">
+    <div class="container">
+      <div class="tab-content">
+        {% 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"
+          >
+          {% cache 180 cache-schedule timetable.day.date %}
+          {% include "symposion/schedule/_grid.html" %}
+          {% endcache %}
+        </div>
+        {% endfor %}
+        {% endfor %}
+      </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';
 
-    fragment = window.location.hash.toLowerCase().substring(1);
-
-    if (!fragment) {
-      OFFSET = -11 * (60 * 60 * 1000); // Sydney is 11 hours ahead of UTC in Jan.
-      JAN = 0; // because January is 0, not 1
-
-      fragments = [
-        {"day": "monday", "time": Date.UTC(2018, JAN, 22)},
-        {"day": "tuesday", "time": Date.UTC(2018, JAN, 23)},
-        {"day": "wednesday", "time": Date.UTC(2018, JAN, 24)},
-        {"day": "thursday", "time": Date.UTC(2018, JAN, 25)},
-        {"day": "friday", "time": Date.UTC(2018, JAN, 26)},
-        {"day": "saturday", "time": Date.UTC(2018, JAN, 27)},
-      ];
-
-      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);
-        }
-      });
+    $('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 c7ba7a98..2d36ede9 100644
--- a/static/src/scss/app.scss
+++ b/static/src/scss/app.scss
@@ -348,4 +348,83 @@ a.a-img {
 .table thead th {
     vertical-align: bottom;
     border-bottom: 1px solid $primary;
+}
+
+.calendar.table {
+    height: 1px;
+
+    tr.calendar-row {
+        height: 120px;
+
+        td.time > p {
+            font-size: 1.25rem;
+            text-transform: lowercase;
+        }
+
+        td.slot {
+            height: 100%;
+            padding: 0.5rem;
+
+            div {
+                background-color: rgba(15, 124, 17, 0.05);
+                border-radius: 1rem;
+                padding: 1rem;
+                height: 100%;
+
+                &.center-flex {
+                    display: flex;
+                    align-items: center;
+
+                    p {
+                        margin: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    td {
+        border-top: 2px solid #CCD5C5;
+        width: 1/7%;
+    }
+
+    th {
+        border-top: none;
+        border-bottom: 2px solid #CCD5C5;
+        width: 1/7%;
+    }
+}
+
+.schedule-header {
+    h1 {
+        text-transform: uppercase;
+        margin-bottom: 3rem;
+        margin-top: 3rem;
+    }
+
+    h3 {
+        margin-bottom: 3rem;
+        text-transform: none;
+    }
+}
+
+.nav.schedule-nav {
+    display: block;
+    width: 100%;
+
+    a {
+        display: inline-block;
+
+        &.active {
+            color: $secondary;
+        }
+    }
+}
+
+.footer-no-margin {
+    margin-top: 0 !important;
+}
+
+#schedule-date {
+    text-transform: capitalize;
 }
\ No newline at end of file