symposion_app Changeset - 797740395777

Changeset - 797740395777

Parent rev.

Child rev.

[Not reviewed]

0 4 0

Tobias - 6 years ago 2018-09-29 05:14:21
tobias@localhost.localdomain

Add schedule calendar (no mobile yet)

4 files changed with 191 insertions and 154 deletions:

pinaxcon/templates/site_base.html

pinaxcon/templates/symposion/schedule/_grid.html

pinaxcon/templates/symposion/schedule/schedule_conference.html

static/src/scss/app.scss

0 comments (0 inline, 0 general)

pinaxcon/templates/site_base.html

➞

Show inline comments

@@ ... / @@ -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 />

pinaxcon/templates/symposion/schedule/_grid.html

➞

Show inline comments

 {% 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 %}
         {% endflag %}
         {% endif %}
       </tr>
         {% 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>

pinaxcon/templates/symposion/schedule/schedule_conference.html

➞

Show inline comments

-{% 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 content_base %}
   <div class="page-head">
     {% block breadcrumbs %}{% endblock %}
 {% block navbar %}{% include 'nav.html' with color='green' %}{% endblock %}
 {% block main_class %}container-fluid{% endblock %}
 {% block content %}
   <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">
     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);
+        }
       });
     var dates = {
       'wednesday': '23',
       'thursday': '24',
       'friday': '25'
     };
     var trailing = ' January 2019';
     $('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 %}

static/src/scss/app.scss

➞

Show inline comments

@@ ... / @@ -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 @@

0 comments (0 inline, 0 general)