Text overlay toggler and table of contents
[wolnelektury.git] / src / picture / templates / picture / picture_viewer.html
1 {% extends "catalogue/viewer_base.html" %}
2 {% load i18n %}
3 {% load static from static %}
4 {% load catalogue_tags %}
5 {% load thumbnail %}
6
7
8 {% block title %}{{ picture.pretty_title }}{% endblock %}
9
10
11 {% block body-id %}picture-viewer{% endblock %}
12
13
14 {% block js-dependencies %}
15   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
16 {% endblock %}
17
18
19 {% block no-menu-extra %}
20   <li><a class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li>
21   <li><a class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a></li>
22 {% endblock %}
23
24
25 {% block menu %}
26   <li>
27     <a style="width: 50%;display: inline-block;" class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a>
28     <a style="width: 50%;display: inline-block;" class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a>
29   </li>
30
31   {% spaceless %}
32     <li>
33       {% with picture.get_previous as prev %}
34         <a style="width: 50%;display: inline-block;" {% if prev %}href="{% url 'picture_viewer' prev.slug %}"{% endif %}>{% if prev %}&lt;{%endif %}</a>
35       {% endwith %}
36       {% with picture.get_next as next %}
37         <a style="width: 50%;display: inline-block;" {% if next %}href="{% url 'picture_viewer' next.slug %}"{% endif %}>{% if next %}&gt;{% endif %}</a>
38       {% endwith %}
39     </li>
40   {% endspaceless %}
41
42   <li>
43     <a href="{{ picture.get_absolute_url }}" id="menu-book" data-box="book-short">
44       <img src="{% thumbnail picture.image_file '120x300' as thumb %}{{ thumb.url }}{% empty %}{{ picture.image_file.url }}{% endthumbnail %}"
45            width="120"
46            alt="{{ picture.pretty_title }}"
47            title="{{ picture.pretty_title }}">
48     </a>
49   </li>
50
51   <li><a href="#picture-objects" class="dropdown"><span class="label">{% trans "Objects" %}</span></a></li>
52   <li><a href="#picture-themes" class="dropdown"><span class="label">{% trans "Themes" %}</span></a></li>
53
54   <li id="menu-info">
55     <a href="#info" data-box="info">
56       <span class="label">{% trans "Infobox" %}</span>
57     </a>
58   </li>
59
60   <li id="sponsors">
61     {% for sponsor in sponsors %}
62       {% thumbnail sponsor.logo "120x300" as logo %}
63         <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}" /></a>
64       {% endthumbnail %}
65     {% endfor %}
66   </li>
67 {% endblock %}
68
69 {% block main %}
70   <div id="picture-view">
71     {% thumbnail picture.image_file "700x500" as pic %}
72       <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}"
73            data-original-width="{{picture.width}}" data-original-height="{{picture.height}}"
74            data-original-url="{{ picture.image_file.url }}"
75            data-width="{{pic.width}}" data-height="{{pic.height}}" style="background-image: url('{{pic.url}}');  width: {{pic.width}}px; height: {{pic.height}}px;">
76       </div>
77     {% endthumbnail %}
78   </div>
79 {% endblock %}
80
81
82 {% block footer %}
83   {{ picture.html_file.read.decode|safe }}
84
85   <div id="info" class="box">
86     <div class="sponsors">
87       <a href="/">
88         <img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury"/>
89       </a>
90       {% for sponsor in sponsors %}
91         {% thumbnail sponsor.logo "220x220" as logo %}
92           <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}"/></a>
93         {% endthumbnail %}
94       {% endfor %}
95     </div>
96
97     {% book_info picture %}
98   </div>
99
100   <div class="box Picture-item" id="book-short">
101     {% include 'picture/picture_short.html' %}
102   </div>
103 {% endblock %}