...
 
Commits (2)
{% load static contour thumbnail i18n %}
<!DOCTYPE html>
<html lang="{% get_current_language as lang %}{{lang}}">
<head>
<meta charset="utf-8">
<title>Contour 9</title>
<meta name="keywords" content="Contour 9, Biennale, Mechelen">
<meta name="description" content="Website Contour 9 biennale 2019">
<link rel="stylesheet" href="{% static 'contour/css/fonts.css' %}" type="text/css" media="all">
<link rel="stylesheet" href="{% static 'contour/css/scrollbars.css' %}" type="text/css" media="all">
<link rel="stylesheet" href="{% static 'contour/css/styles-beta.css' %}" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.continuous-event figure img {
max-height: 22px;
position: relative;
top: 4px;
}
.continuous .continuous-event {
background: var(--blue-moon-light);
/* padding-bottom: 1em; */
display: inline;
margin-left: 1.75em;
}
.continuous {
display: block;
border-top: 2px solid black;
border-bottom: 2px solid black;
padding-bottom: 1em;
padding-left: .5em;
padding-right: .5em;
}
.continuous-event .event-data {
display: inline;
}
</style>
</head>
<body>
<header>
<section id="menu">
<div class="logo">
<a href="{% url 'contour:home' %}"><img src="{% static 'contour/images/contour9-logo.png' %}"/></a>
</div>
<div class="toggle">
<span>menu</span>
</div>
<nav>
<ul>
{% for url, label in menu %}
<li>
<a href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</ul>
<nav class="language-switch">
<a href="/nl/contour/">nl</a>
<a href="/en/contour/">en</a>
</nav>
</nav>
</section>
<section id="timeline">
<!-- <span class="button full-moon">
<a href="">Full moon</a>
</span> -->
<figure>
<object data="{% static 'contour/images/timeline.svg' %}" type="image/svg+xml"></object>
</figure>
</section>
<section id="time-travel">
</section>
</header>
<main>
{% for loop in loops %}
{% with forloop.counter as loopindex %}
{% for day in loop.interbellum.days %}
<section class="interbellum" data-label="{{ day.date|date:'D j M' }}" data-type="interbellum" data-loop="{{ loopindex }}">
<div class="overlay"></div>
<section class="interbellum-spacer-before"></section>
<section class="day" data-main>
<h3 class="loop-title"></h3>
<h3 class="day-date day-date--inline">{{ day.date|date:"D j M" }}</h3>
{% for event in day.events %}
<article class="event" data-pk="{{ event.pk }}" style="grid-row:{{ event.grid_coord }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<img src="{% thumbnail image.image 500x250 crop %}">
</a>
</figure>
{% endwith %}
{% endif %}
<section class="event-data">
<time class="hour" datetime="{{ event.start|date:'c' }}">{{ event.start|date:"H:i" }}{% if event.end %} - {{ event.end|date:"H:i" }}{% endif %}</time>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %} <a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
<section class="interbellum-spacer-after"></section>
{% endfor %}
{% endwith %}
</section>
<section class="loop-wrapper" data-loop="{{ forloop.counter }}" id="{{loop.name|slugify}}" data-label="{{ loop.name }}" data-type="loop" {% if forloop.counter == 2 %}data-focus{% endif %}>
<div class="overlay"></div>
<section class="loop-head">
<h3 class="loop-title">{{ loop.name }}</h3>
<section class="loop-description">
{{ loop.description|markdown }}
</section>
</section>
<section class="loop-spacer-before"></section>
<section class="loop" data-loop-length="{{ loop.days|length }}" data-main>
<h3 class="loop-title">{{ loop.name }}</h3>
<section class="loop-header">
{% for day in loop.days %}
<h3 class="loop-day-date">{{ day.date|date:"D j M" }}</h3>
{% endfor %}
</section>
<section class="loop-days">
{% if loop.continuous %}
<section class="continuous">
<section class="opening-times">
<time class="hour">10:00 - 20:00</time>
<time class="hour">10:00 - 20:00</time>
<time class="hour">12:00 - 17:00</time>
</section>
<div style="display: inline;">Installations &amp; exhibitions:</div>
{% for event in loop.continuous %}
<article class="event continuous-event" data-pk="{{ event.pk }}">
<section class="event-data">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<img src="{% thumbnail image.image 200x200 crop %}">
</a>
</figure>&nbsp;
{% endwith %}
{% endif %}
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
{% endif %}
<section class="loop-days-wrapper">
{% for day in loop.days %}
<section class="day">
<h3 class="loop-day-date loop-day-date--inline">{{ day.date|date:"D j M" }}</h3>
{% if loop.continuous %}
<section class="continuous-inline">
{% for event in loop.continuous %}
<article class="event continuous-event" data-pk="{{ event.pk }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<img src="{% thumbnail image.image 200x200 crop %}">
</a>
</figure>
{% endwith %}
{% endif %}
<section class="event-data">
{% if forloop.parent.counter <= 2 %}
<time class="hour">10:00 - 20:00</time>
{% else %}
<time class="hour">12:00 - 17:00</time>
{% endif %}
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
{% endif %}
{% for event in day.events %}
<article class="event" data-pk="{{ event.pk }}" style="grid-row:{{ event.grid_coord }}">
{% if event.project|cover_image %}
{% with event.project|cover_image as image %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}">
<img src="{% thumbnail image.image 500x250 crop %}">
</a>
</figure>
{% endwith %}
{% endif %}
<section class="event-data">
<time class="hour" datetime="{{ event.start|date:'c' }}">{{ event.start|date:"H:i" }}{% if event.end %} - {{ event.end|date:"H:i" }}{% endif %}</time>
<span class="type">{{ event.event_type }} </span>
<span class="venue">{% trans "at" %}&nbsp;<a href="{% url 'contour:venue' event.venue.pk %}">{{ event.venue }}</a></span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project|sorted_participants|slice:":5" %}
{% if forloop.first %}{% trans "with" %}:&nbsp;{% endif %}<span class="contributor"><a href="{% url 'contour:contributor' participant.pk %}">{{ participant.name }}</a></span>
{% endfor %}
</section>
</article>
{% endfor %}
</section>
{% endfor %}
</section>
</section>
</section>
<section class="loop-spacer-after"></section>
</section>
{% endfor %}
</main>
<script src="{% static 'contour/js/panels.js' %}"></script>
<script src="{% static 'contour/js/raphael.min.js' %}"></script>
<script src="{% static 'contour/js/map.js' %}"></script>
<script src="{% static 'contour/js/timeTravel.js' %}"></script>
<script src="{% static 'contour/js/stretcher.js' %}"></script>
<script src="{% static 'contour/js/perfect-scrollbar.min.js' %}"></script>
<script>
(function () {
var scrollbars = [];
var initScrollbars = function () {
var containers = document.querySelectorAll('.loop-days, .interbellum .day');
for (var i = 0; i < containers.length; i++) {
scrollbars.push(new PerfectScrollbar(containers[i]))
}
window.addEventListener('resize', updateScrollbars);
}
var updateScrollbars = function () {
for(var i=0; i<scrollbars.length; i++) {
scrollbars[i].update();
}
}
window.updateScrollbars = updateScrollbars;
window.initScrollbars = initScrollbars;
})();
</script>
<script>
(function () {
document.querySelector('#menu .toggle').addEventListener('click', function (e) {
var menu = document.getElementById('menu');
menu.className = (menu.className == 'menu-active') ? '' : 'menu-active';
});
if (window.innerWidth < 600) {
document.querySelector('[data-focus]').scrollIntoView(true);
} else {
initScrollbars();
window.addEventListener('load', function () {
window.contour.timeline.init();
window.contour.timeline.translateLoop(1, 750);
window.contour.timeline.translateLoop(2, 750);
window.contour.timeline.translateLoop(3, 750);
travelTo(parseInt(document.querySelector('[data-focus]').dataset.index));
updateScrollbars();
});
setupTimetravel(document.getElementById('time-travel'));
travelTo(parseInt(document.querySelector('[data-focus]').dataset.index));
}
})();
</script>
<script src="{% static 'contour/js/eventHighlighter.js' %}"></script>
</body>
</html>
......@@ -9,6 +9,7 @@ urlpatterns = [
path('', views.home, name='home'),
path('programme/', views.home, name='programme'),
path('home-beta/', views.homeBeta, name='homeBeta'),
path('home-beta-variant/', views.homeBetaVariant, name='homeBetaVariant'),
path('event/<int:pk>', views.event, name='event'),
path('contributor/', views.contributor, name='contributor'),
path('contributor/<int:pk>', views.contributor, name='contributor'),
......
......@@ -145,6 +145,39 @@ def homeBeta(request):
'loops': templateLoops
})
def homeBetaVariant(request):
if DEBUG:
loops = Loop.objects.filter()
else:
loops = Loop.objects.filter(published=True)
templateLoops = []
previousLoopEnd = None
for loop in loops:
# day = timedelta(days=1)
# loopdaycount = (loop.end - loop.start).days + 1
# loopdays = [loop.start + (day * k) for k in range(loopdaycount)]
if (previousLoopEnd):
continuous, days = structureEvents(previousLoopEnd, loop.start)
print('interbellum', continuous, days)
interbellum = Interbellum(continuous=continuous, days=days)
else:
interbellum = Interbellum(continuous=[], days=[])
continuous, days = structureEvents(loop.start, loop.end + timedelta(days=1), True)
templateLoop = TemplateLoop(continuous = continuous, days = days, name = loop.name, description = loop.description, interbellum = interbellum)
previousLoopEnd = loop.end + timedelta(days=1)
templateLoops.append(templateLoop)
return render(request, 'contour/home.beta.variant.html', {
'loops': templateLoops
})
# Create your views here.
def event(request, pk):
event = Event.objects.get(pk=pk, published=True)
......