picture.jinja 3.35 KB
Newer Older
Skia's avatar
Skia committed
1 2
{% extends "core/base.jinja" %}

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
{% block head %}
{{ super() }}
<style>
#prev, #next {
    display: inline-block;
    width: 42%;
    margin: 0.5%;
    border: solid 1px grey;
    overflow: auto;
    background: #333;
}
#prev img, #next img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
</style>
{% endblock %}

Skia's avatar
Skia committed
23 24 25 26
{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}

27 28 29 30 31 32 33
{% macro print_path(file) %}
{% if file %}
{{ print_path(file.parent) }}
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
{% endif %}
{% endmacro %}

Skia's avatar
Skia committed
34
{% block content %}
35
{{ print_path(picture.parent) }} {{ picture.get_display_name() }}
Skia's avatar
Skia committed
36
<h3>{{ picture.get_display_name() }}</h3>
Skia's avatar
Skia committed
37 38 39 40 41 42
<div style="display: inline-block; width: 89%; background: #333; border: solid #333 2px;" id="pict">
    {% if is_vertical %}
    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 60%; display: block; margin: auto"/>
    {% else %}
    <img src="{{ picture.get_download_compressed_url() }}" alt="{{ picture.get_display_name() }}" style="width: 100%; display: block; margin: auto"/>
    {% endif %}
Skia's avatar
Skia committed
43
</div>
44 45 46 47 48
<div style="display: inline-block; width: 10%; vertical-align: top;">
    <div>
        <div id="prev">
        {% if picture.get_previous() %}
        <a href="{{ url("sas:picture", picture_id=picture.get_previous().id) }}#pict">
Skia's avatar
Skia committed
49
            <img src="{{ picture.get_previous().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_previous().get_display_name() }}" />
50 51 52 53 54 55
        </a>
        {% endif %}
        </div>
        <div id="next">
        {% if picture.get_next() %}
        <a href="{{ url("sas:picture", picture_id=picture.get_next().id) }}#pict">
Skia's avatar
Skia committed
56
            <img src="{{ picture.get_next().as_picture.get_download_thumb_url() }}" alt="{{ picture.get_next().get_display_name() }}" />
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
        </a>
        {% endif %}
        </div>
    </div>
    <div>
        <ul>
            {% for r in picture.people.all() %}
            <li>
                <a href="{{ r.user.get_absolute_url() }}">{{ r.user.get_display_name() }}</a>
                {% if user == r.user or user.is_in_group(settings.SITH_SAS_ADMIN_GROUP_ID) %}
                <a href="?remove_user={{ r.user.id }}">{% trans %}Delete{% endtrans %}</a>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    </div>
    <div>
        <form action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p() }}
            <p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
        </form>
    </div>
Skia's avatar
Skia committed
80 81 82
    <p>
        <a href="{{ picture.get_download_url() }}">{% trans %}HD version{% endtrans %}</a>
    </p>
83
    <p style="font-size: smaller;">
Skia's avatar
Skia committed
84 85 86
        <a href="?rotate_left">{% trans %}Rotate left{% endtrans %}</a><br>
        <a href="?rotate_right">{% trans %}Rotate right{% endtrans %}</a><br>
        <a href="?ask_removal">{% trans %}Ask for removal{% endtrans %}</a><br>
87
    </p>
Skia's avatar
Skia committed
88 89 90
</div>
{% endblock %}

91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
{% block script %}
{{ super() }}
<script>
$( function() {
    $(document).keydown(function (e) {
        if (e.keyCode == 37) {
            console.log("prev");
            $('#prev a')[0].click();
        } else if (e.keyCode == 39) {
            console.log("next");
            $('#next a')[0].click();
        }
    });
} );
</script>
{% endblock %}