Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add schedule calendar (no mobile yet)

Browse source
This commit is contained in:
Tobias 2018-09-29 10:42:27 +12:00
parent 5c05887d3a
commit 7977403957
4 changed files with 188 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pinaxcon/templates/site_base.html
View file

@ -113,7 +113,7 @@
{% endblock %} {% endblock %}
</main> </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> <p>
<small class="float-right"> <small class="float-right">
&copy; 2018 linux.conf.au <br /> &copy; 2018 linux.conf.au <br />

118
pinaxcon/templates/symposion/schedule/_grid.html
View file

@ -1,78 +1,74 @@
{% load lca2018_tags %} {% load lca2018_tags %}
{% load waffle_tags %} {% load waffle_tags %}
<table class="calendar table table-bordered">
<table class="calendar table">
<thead> <thead>
<tr> <tr>
<th class="time">&nbsp;</th> <th class="time">&nbsp;</th>
{% for room in timetable.rooms %} {% for room in timetable.rooms %}
<th>{{ room.name }}</th> <th>Theatre {{ room.name }}</th>
{% endfor %} {% endfor %}
</tr> </tr>
{% with timetable|day_has_tracks:timetable.day as has_tracks %} {% with timetable|day_has_tracks:timetable.day as has_tracks %}
{% if has_tracks %} {% if has_tracks %}
<tr> <tr>
<th class="time">&nbsp;</th> <th class="time">&nbsp;</th>
{% for room in timetable.rooms %} {% for room in timetable.rooms %}
{% with room|trackname:timetable.day as track_name %} {% with room|trackname:timetable.day as track_name %}
<th class="track-name">{% if track_name %}<p>{{ track_name }}{% endif %}</th> <th class="track-name">{% if track_name %}<p>{{ track_name }}{% endif %}</th>
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</tr> </tr>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
</thead> </thead>
<tbody> <tbody>
{% for row in timetable %} {% for row in timetable %}
<tr> {% if forloop.last %}
<td class="time"><h4>{{ row.time|date:"h:iA" }}</h4></td> {% else %}
{% for slot in row.slots %} <tr class="calendar-row">
<td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{{ slot.rowspan }}"> <td class="time"><p>{{ row.time|date:"h:iA" }}</p></td>
{% with slot.kind.label.lower as label %} {% for slot in row.slots %}
{% if label == "talk" or label == "tutorial" %} <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{% if slot.rowspan > 1%}{{ slot.rowspan|add:-1 }}{% else %}1{% endif %}" >
{% if slot.content %} {% with slot.kind.label.lower as label %}
<span class="title"> {% if label == "talk" or label == "tutorial" %}
<a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a> {% if slot.content %}
</span> <div>
<span class="speaker"> <p><a href="{% url "schedule_presentation_detail" slot.content.pk %}">{{ slot.content.title }}</a><br />{{ slot.content.speakers|join:", " }}</p>
{{ slot.content.speakers|join:", " }} </div>
</span> {% flag "session_chair" %}
{% flag "session_chair" %} {% if slot.sessions %}
{% if slot.sessions %} <div>
<div> {% for session in slot.sessions.all %}
{% for session in slot.sessions.all %} <em>Session chair:
<em>Session chair: {% if not session.chair %}
{% if not session.chair %} <a href="{% url "schedule_session_detail" session.id %}">Volunteer! 🙋</a>
<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" %}
{% else %} {% else %}
{% if slot.content_override %} <a href="{% url "schedule_session_detail" session.id %}">{{ session.chair.user.attendee.attendeeprofilebase.attendeeprofile.name }}</a>
{{ slot.content_override_html|safe }}
{% else %}
{{ slot.kind.label }}
{% endif %}
{% endif %} {% endif %}
{% if "break" in label %} </em>
{% else %} {% endfor %}
<span class="room"> </div>
{{ 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>
{% endif %} {% 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 %} {% endfor %}
</tbody> </tbody>
</table> </table>

140
pinaxcon/templates/symposion/schedule/schedule_conference.html
View file

@ -1,4 +1,4 @@
{% extends "symposion/schedule/public_base.html" %} {% extends "utility_page.html" %}
{% load i18n %} {% load i18n %}
{% load cache %} {% load cache %}
@ -7,107 +7,69 @@
{% block head_title %}Conference Schedule{% endblock %} {% block head_title %}Conference Schedule{% endblock %}
{% block header_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 %} {% block right %}
{% endblock %} {% 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"> <div class="schedule-header text-center">
{% block breadcrumbs %}{% endblock %} <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>
<div class="card"> <div class="bg-secondary text-primary pt-4 pb-4 mb-0">
<div class="card-header"> <div class="container">
<nav> <div class="tab-content">
<ul class="nav nav-tabs card-header-tabs" id="nav-tabs" role="tablist"> {% for section in sections %}
{% for section in sections %} {% for timetable in section.days %}
{% for timetable in section.days %} <div
<li class="nav-item"> class="tab-pane fade {% if forloop.first %}show active{% endif %}"
<a class="nav-item nav-link active" id="{{ timetable.day.date|date:"l"|lower}}"
id="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab" role="tabpanel"
href="#{{ timetable.day.date|date:"l"|lower}}" aria-labelledby="schedule_day_{{ timetable.day.date|date:"l"|lower}}-tab"
role="tab" aria-controls="schedule_day_{{ timetable.day.date|date:"l"|lower}" > >
{{ timetable.day.date|date:"l"}} {% cache 180 cache-schedule timetable.day.date %}
</a> {% include "symposion/schedule/_grid.html" %}
</li> {% endcache %}
{% endfor %} </div>
{% endfor %} {% endfor %}
</ul> {% endfor %}
</nav> </div>
</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> </div>
</div> </div>
{% endblock %} {% endblock %}
{%block footer_class %}footer-no-margin{% endblock %}
{% block scripts_extra %} {% block scripts_extra %}
<script type="text/javascript"> <script type="text/javascript">
var dates = {
'wednesday': '23',
'thursday': '24',
'friday': '25'
};
var trailing = ' January 2019';
fragment = window.location.hash.toLowerCase().substring(1); $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var day = e.target.attributes['aria-controls'].value;
if (!fragment) { $('#schedule-date').text(day + ' ' + dates[day] + trailing);
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);
}
});
</script> </script>
{{ block.super }} {{ block.super }}
{% endblock %} {% endblock %}

79
static/src/scss/app.scss
View file

@ -348,4 +348,83 @@ a.a-img {
.table thead th { .table thead th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 1px solid $primary; 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;
} }