Download raw (8.6 KB)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="contour/css/pages-styles.css" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<section id="menu">
<div class="logo">
<a href="{% url 'contour:home' %}"><img src="{% static 'contour/images/contour9-logo.png' %}" /></a>
</div>
<nav>
<ul>
<li>
<a>Programme</a>
</li>
<li>
<a>Venue</a>
</li>
<li>
<a href="{% url 'contour:contributor' %}">Contributors</a>
</li>
<li>
<a>About</a>
</li>
</ul>
</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">
<span class="button first-crescent">
<a href="">First crescent</a>
</span>
<span class="button last-crescent">
<a href="">Last crescent</a>
</span>
</section>
</header>
<main>
<article id="main-event" class="event active">
<section class="header">
<div class="show-infos">
<time class="date">{{ event.start|date:"j M" }}{% if event.end and event.end.date != event.start.date %} → {{ event.end|date:"j M" }}{% endif %}</time>
<span class="hour">{{ event.start|date:"G:i" }}{% if event.end %} → {{ event.end|date:"G:i" }}{% endif %}</span>
<span class="venue">{{ event.venue }}</span>
<span class="type">{{ event.event_type }} </span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
<span class="contributor">{{ event.project.participants.first.name }}</span>
<span class="thumbnail-pictures">
{% for image in event.project.images.all %}
<figure class="thumbnail{% if forloop.first %} active{% endif %}" data-image-index="{{forloop.counter}}">
<img src="/media/{{ image.image }}">
</figure>
{% endfor %}
</span>
</div>
<div class="header-buttons"><span class="button-close"><a href="{% url 'contour:home' %}">Close</a></span></div>
</section>
<section class="detail" data-view="photo">
<div id="detail-photo" class="detail-photo looking-at">
{% for image in event.project.images.all %}
<figure class="full {% if forloop.first %}active{% endif %}" data-image-index="{{forloop.counter}}"><img src="/media/{{ image.image }}"></figure>
{% endfor %}
<div class="view-toggle">
<span>click to see more</span>
</div>
</div>
<div id="detail-text" class="intro-texte looking-away">
<div class="view-toggle">
<span>click to see more</span>
</div>
<div class="description">
{% if event.project.summary_en %}<section class="exerpt">{{ event.project.summary_en|markdown }}</section>{% endif %}
{{ event.project.description_en|markdown }}
</div>
<div class="meta-infos">
<dl>
<dt>Contributor·s</dt>
{% for participant in event.project.participants.all %}
<dd>{{participant.name}}{% if participant.role %}({{ participant.role }}){% endif %}</dd>
{% endfor %}
<dt>Location</dt>
<dd>{{event.venue.name}}</dd>
<dd>{{event.venue.address}}</dd>
{% if event.venue.notes %}
<dd>{{event.venue.notes}}</dd>
{% endif %}
</dl>
</div>
</div>
</section>
</article>
{% for loop in loops %}
<section class="loop" data-loop-length="{{ loop.days|length }}">
<section class="loop-header">
{% for day in loop.days %}
<h3 class="loop-day-date">{{ day.date|date:"D j M" }}</h3>
{% endfor %}
</section>
{% if loop.continuous %}
<section class="loop-continuous">
{% for event in loop.continuous %}
<article class="event">
{% if event.project.images %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}"><img src="/media/{{ event.project.images.first.image }}"></a>
</figure>
{% endif %}
<time class="date">{{ event.start|date:"j M" }}{% if event.end and event.start|date:"j M" != event.end|date:"j M" %} → {{ event.end|date:"j M" }}{% endif %}</time>
<span class="hour">{{ event.start|date:"G:i" }}{% if event.end %} → {{ event.end|date:"G:i" }}{% endif %}</span>
<span class="venue">{{ event.venue }}</span>
<span class="type">{{ event.event_type }} </span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project.participants.all|slice:":5" %}
<span class="contributor">{{ participant.name }}</span>
{% endfor %}
</article>
{% endfor %}
</section>
{% endif %}
<section class="loop-days">
{% for day in loop.days %}
<section class="day">
{% for event in day.events %}
<article class="event" style="grid-row: {{ event.grid_coordinates.start }}/span {{ event.grid_coordinates.span }}">
{% if event.project.images %}
<figure class="preview">
<a href="{% url 'contour:event' event.pk %}"><img src="/media/{{ event.project.images.first.image }}"></a>
</figure>
{% endif %}
<span class="hour">{{ event.start|date:"G:i" }}{% if event.end %} → {{ event.end|date:"G:i" }}{% endif %}</span>
<span class="venue">{{ event.venue }}</span>
<span class="type">{{ event.event_type }} </span>
<h4 class="title"><a href="{% url 'contour:event' event.pk %}">{{ event.project.title }}</a></h4>
{% for participant in event.project.participants.all|slice:":5" %}
<span class="contributor">{{ participant.name }}</span>
{% endfor %}
</article>
{% endfor %}
</section>
{% endfor %}
</section>
</section>
{% endfor %}
</main>
<script>
var toggles = document.querySelectorAll('.view-toggle');
for (var i=0; i< toggles.length; i++) {
toggles[i].addEventListener('click', function () {
var container = document.querySelector('#main-event .detail');
container.dataset.view = (container.dataset.view == 'photo') ? 'text' : 'photo';
});
}
var thumbs = document.querySelectorAll('figure.thumbnail');
for (var i=0; i<thumbs.length; i++) {
thumbs[i].addEventListener('click', function () {
var index = this.dataset.imageIndex,
current = document.querySelectorAll('figure.active'),
next = document.querySelectorAll('figure[data-image-index="' + index + '"');
for (var c = 0; c < current.length; c++) {
current[c].className = current[c].className.replace(/\s*active\s*/g, '');
}
for (var n = 0; n < next.length; n++) {
next[n].className = next[n].className + ' active';
}
});
}
// document.querySelector('#detail-text')
// .addEventListener('click', function (e) {
// e.preventDefault();
// this.classList.add('looking-at');
// this.classList.remove('looking-away');
// var photoframe = document.querySelector('#detail-photo.looking-at');
// photoframe.classList.add('looking-away');
// photoframe.classList.remove('looking-at');
// var wholeframe = document.querySelector('.detail');
// wholeframe.classList.add('look-right');
// });
// document.querySelector('#detail-photo')
// .addEventListener('click', function (e) {
// e.preventDefault();
// this.classList.add('looking-at');
// this.classList.remove('looking-away');
// var photoframe = document.querySelector('#detail-text.looking-at');
// photoframe.classList.add('looking-away');
// photoframe.classList.remove('looking-at');
// var wholeframe = document.querySelector('.detail');
// wholeframe.classList.remove('look-right');
// });
</script>
</body>
</html>