contour
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

practical-infos.html
text/html

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>