Download raw (3.9 KB)

{% extends "base.html" %}
{% block head %}
  {{ super() }}
  <link href="{{ SITEURL }}/theme/css/colors.{{ category.slug }}.css" rel="stylesheet" media="all" />
{% endblock %}
{% block scripts %}
  <script src="{{ SITEURL }}/theme/js/movements.{{ category.slug }}.js"></script>
{% endblock %}
{% block content %}

<div class="page-navigator colored-wrapper patterned">
  {% if category.slug == 'activities' %}
    <h3 class="page-navigator-toggle">All activities</h3>
  {% else %}
    <h3 class="page-navigator-toggle">All projects</h3>
  {% endif %}
  <ul class="patterned-background">
    {% for article in articles_page.object_list|sort_by_order %}
    <li><a href="#{{ article.slug }}">{{ article.title }}</a></li>
    {% endfor %}
  </ul>

</div>

<div id="colors"></div>

<div id="content" class="category">
  <div class="row">
    <div class="left-spacer"></div>
    <div class="item education patterned-border" id="intro">
      <div class="patterned-background">
        {{ category.page.content }}
      </div>
      </div>
      <div class="right-spacer"></div>
    </div>
  {% for article in articles_page.object_list|sort_by_order %}
  <div class="row">
    <div class="left-spacer"></div>
    <div class="item {{ category.slug }} patterned-border" id="{{ article.slug }}">
        <div class="patterned-background">
          <h2  class="colored">{{ article.title }}</h2>

          {% if article.event_dates %}
            <ul class="event_dates">
              {% for date in article.event_dates %}
                <li>{{ date|format_datetime|strftime('%A %-d %B %Y at %Hh%M') }}</li>
              {% endfor %}
            </ul>
          {% elif article.event_start_date and article.event_end_date %}
            <p class="event_date">
              {{ article.event_start_date|format_datetime|strftime('%A %-d %B %Y at %Hh%M') }} →
              {{ article.event_end_date|format_datetime|strftime('%A %-d %B %Y at %Hh%M') }}
            </p>
          {% elif article.event_date %}
            <p class="event_date">
              {{ article.event_date|format_datetime|strftime('%A %-d %B %Y at %Hh%M') }}
            </p>
          {% endif %}

          {{ article.content }}
          <br class="clear">
        </div>
      </div>
    <div class="right-spacer"></div>
  </div>
  {% endfor %}
</div>
<script>
  window.addEventListener('load', function () {
    document.querySelectorAll('.page-navigator').forEach(function (panel) {
      var toggle = panel.querySelector('.page-navigator-toggle'),
          links = panel.querySelectorAll('a');

      if (window.outerWidth >= 800) {
        panel.classList.add('expanded');
        document.body.classList.add('page-navigator-expanded');
      }

      toggle.addEventListener('click', function () { panel.classList.toggle('expanded'); document.body.classList.add('page-navigator-expanded'); });
      links.forEach(function (link) {
        link.addEventListener('click',  function () {
          if (window.outerWidth < 800) {
            panel.classList.remove('expanded');
            document.body.classList.remove('page-navigator-expanded');
          }
        });
      });
    });
  });

  window.addEventListener('resize', function () {
    document.querySelectorAll('.page-navigator').forEach(function (panel) {
      var toggle = panel.querySelector('.page-navigator-toggle'),
          links = panel.querySelectorAll('a');

      if (window.outerWidth >= 800) {
        panel.classList.add('expanded');
        document.body.classList.add('page-navigator-expanded');
      } else {
        panel.classList.remove('expanded');
        document.body.classList.remove('page-navigator-expanded');
      }
    });
  });
 </script>

<!-- <script>
  var entries = document.querySelectorAll('.page-navigator-toggle');
  for (var i=0; i < entries.length; i++) {
    entries[i].addEventListener('click', function () {
      this.classList.toggle('open');
    });
  }
</script> -->

<script src="{{ SITEURL }}/theme/js/movements.js"></script>
{% endblock %}