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>