Add schedule calendar (no mobile yet)
This commit is contained in:
Tobias
parent
5c05887d3a
commit
7977403957
4 changed files with 188 additions and 151 deletions
|
|
@ -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">
|
||||
© 2018 linux.conf.au <br />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
|
||||
{% load lca2018_tags %}
|
||||
{% load waffle_tags %}
|
||||
<table class="calendar table table-bordered">
|
||||
|
||||
<table class="calendar table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="time"> </th>
|
||||
{% for room in timetable.rooms %}
|
||||
<th>{{ room.name }}</th>
|
||||
<th>Theatre {{ room.name }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% with timetable|day_has_tracks:timetable.day as has_tracks %}
|
||||
|
|
@ -22,21 +22,21 @@
|
|||
{% endif %}
|
||||
{% endwith %}
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for row in timetable %}
|
||||
<tr>
|
||||
<td class="time"><h4>{{ row.time|date:"h:iA" }}</h4></td>
|
||||
{% 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="{{ slot.rowspan }}">
|
||||
<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 %}
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -46,7 +46,8 @@
|
|||
<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>
|
||||
{% endif %}
|
||||
</em>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -57,22 +58,17 @@
|
|||
{% if slot.content_override %}
|
||||
{{ slot.content_override_html|safe }}
|
||||
{% else %}
|
||||
{{ slot.kind.label }}
|
||||
<div class="center-flex">
|
||||
<p>{{ slot.kind.label }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="schedule-header text-center">
|
||||
<h1>Schedule</h1>
|
||||
<h3 id="schedule-date">Wednesday 23 January 2019</h3>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<nav>
|
||||
<ul class="nav nav-tabs card-header-tabs" id="nav-tabs" role="tablist">
|
||||
<nav class="mb-4">
|
||||
<div class="nav schedule-nav" id="schedule-nav" 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}" >
|
||||
<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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="tab-content card-body">
|
||||
<div class="bg-secondary text-primary pt-4 pb-4 mb-0">
|
||||
<div class="container">
|
||||
<div class="tab-content">
|
||||
{% 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>
|
||||
<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 %}
|
||||
{% endcache %}
|
||||
{% 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;
|
||||
var dates = {
|
||||
'wednesday': '23',
|
||||
'thursday': '24',
|
||||
'friday': '25'
|
||||
};
|
||||
var trailing = ' January 2019';
|
||||
|
||||
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 %}
|
||||
|
|
|
|||
|
|
@ -349,3 +349,82 @@ a.a-img {
|
|||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue