index.html 2.76 KB
Newer Older
Joost Rijneveld's avatar
Joost Rijneveld committed
1 2 3
{% extends 'base.html' %}
{% load i18n thumbnail %}

4 5
{% block title %}{% trans "Thabloid" %} — {{ block.super }}{% endblock %}

Joost Rijneveld's avatar
Joost Rijneveld committed
6
{% block body %}
7 8
<h1>{% trans "Thabloid" %}</h1>

Joost Rijneveld's avatar
Joost Rijneveld committed
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<div class="portfolio portfolio-isotope">
    <div class="portfolio-filter tabs-wrapper tabs-centered clearfix">
        <ul class="tabs">
            <li class="current"><a href="#">{% trans "All Thabloids" %}</a></li>
            <li data-filter="{{ year|add:0 }}"><a href="#">{{ year|add:0 }}-{{ year|add:1 }}</a></li>
            <li data-filter="{{ year|add:-1 }}"><a href="#">{{ year|add:-1 }}-{{ year|add:0 }}</a></li>
            <li data-filter="{{ year|add:-2 }}"><a href="#">{{ year|add:-2 }}-{{ year|add:-1 }}</a></li>
            <li data-filter="{{ year|add:-3 }}"><a href="#">{{ year|add:-3 }}-{{ year|add:-2 }}</a></li>
            <li data-filter="older"><a href="#">{% trans "Older" %}</a></li>
        </ul>
    </div>

    <ul class="portfolio-posts row isotope" style="position: relative; overflow: hidden; height: 1195px;">
    {% for thabloid in thabloids %}
        <li data-filter="{% if thabloid.year < year|add:-3 %}older{% else %}{{ thabloid.year }}{% endif %}" class="post span3 has-overlay isotope-item" style="position: absolute; left: 0px; top: 0px;">
            <div class="post-inner  ">
                <div class="post-header">
                    <img alt="{{ thabloid.year }}-{{ thabloid.year|add:1 }}, #{{ thabloid.issue }}" src="{% thumbnail thabloid.cover '220x310' %}">
                </div>
                <div class="post-overlay">
                    <div class="post-overlay-meta">
                        <h2>{{ thabloid.year }}-{{ thabloid.year|add:1 }}, #{{ thabloid.issue }}</h2>
                    </div>
                    <ul class="post-overlay-icons">
Gijs Hendriksen's avatar
Gijs Hendriksen committed
33
                        <li><span></span><a class="overlay-icon-open open-thabloid" href="{% url 'thabloid:pages' thabloid.year thabloid.issue %}"></a></li>
Joost Rijneveld's avatar
Joost Rijneveld committed
34 35 36 37 38 39 40 41 42
                        <li><span></span><a class="overlay-icon-link" href="{{ thabloid.file.url }}" target="_blank"></a></li>
                    </ul>
                </div>
            </div>
        </li>
    {% endfor %}
    </ul>
</div>
{% endblock %}
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

{% block js_footer %}
<script>
    $('.open-thabloid').on('click', function(event) {
        event.preventDefault();
        $.ajax(this.href).success(function(data) {
            $.fancybox(data,
            {
                padding: 0,
                loop: false,
                openEffect: 'elastic',
                closeEffect: 'elastic',
                helpers: {
                    overlay: {
                        css: {'background-color': 'rgba(0, 0, 0, 0.9)'},
                        locked: true
                    }
                }
            });
        });
    });
</script>
65
{% endblock %}