Update picture viewer.
[wolnelektury.git] / apps / picture / templates / picture / picture_viewer.html
index 40cbd80..65b689d 100644 (file)
@@ -1,72 +1,80 @@
+{% extends "catalogue/viewer_base.html" %}
 {% load i18n %}
 {% load static from staticfiles %}
-{% load chunks compressed catalogue_tags %}
+{% load compressed catalogue_tags %}
 {% load thumbnail %}
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-{# XXX było: picture.pretty_title #}
-        <title>{% trans "Wolne Lektury" %} :: {{ picture.title }}</title>
-        <link rel="icon" href="{% static "img/favicon.png" %}" type="image/x-icon" />
-        {% compressed_css "picture" %}
-        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-        {% compressed_js "book" %}
-       <!-- old IE support -->
-
-    </head>
-    <body>
-        <div id="menu" class="moveright">
-            <ul>
-<!--                <li><a class="menu" href="#themes">{% trans "Themes" %}</a></li>
-                <li><a class="menu" href="#objects">{% trans "Objects" %}</a></li>-->
-               <!-- XXX do we have this? -->
-<!--                <li><a class="menu" href="#nota_red">{% trans "Edit. note" %}</a></li>-->
-                <li><a class="menu" href="#info">{% trans "Infobox" %}</a></li>
-                <li><a href="{{ picture.get_absolute_url }}">{% trans "Picture's page" %}</a></li>
-<!-- XXX -->
-                <li><a href="{{ picture.image_file.url }}">{% trans "Download" %}</a></li>
-            </ul>
-        </div>
-        <div id="info" class="moveright">
-         <div class="sponsors">
-           <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
-           </a>
-           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck_200horiz_trans.png" %}" alt="Narodowe Centrum Kultury" ></img></a>
-         </div>
-            {% book_info picture %}
-        </div>
-       {{ picture.html_file.read|safe }}
 
-       <!-- main picture view -->
+
+{% block title %}{{ picture.pretty_title }}{% endblock %}
+
+
+{% block body-id %}picture-viewer{% endblock %}
+
+
+{% block js-dependencies %}
+    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+{% endblock %}
+
+
+{% block no-menu-extra %}
+<li><a class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li><li><a class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a></li>
+{% endblock %}
+
+
+{% block menu %}
+<li><a style="width: 50%;display: inline-block;" class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a><a style="width: 50%;display: inline-block;" class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a></li>
+
+
+<li><a href="{{ picture.get_absolute_url }}" id="menu-book" data-box="book-short">
+    <img src="{% thumbnail picture.image_file '80x200' as thumb %}{{ thumb.url }}{% empty %}{{ picture.image_file.url }}{% endthumbnail %}"
+        width="80"
+        alt="{{ picture.pretty_title }}"
+        title="{{ picture.pretty_title }}">
+</a></li>
+
+
+<li><a href="#picture-objects" class="dropdown"><span class="label">{% trans "Objects" %}</span></a></li>
+<li><a href="#picture-themes" class="dropdown"><span class="label">{% trans "Themes" %}</span></a></li>
+
+
+<li id="menu-info"><a href="#info" data-box="info">
+    <span class="label">{% trans "Infobox" %}</span>
+</a></li>
+
+<li id="sponsors">
+    <a href="http://www.nck.pl"><img src="{% static "img/logo_nck.jpg" %}" alt="Narodowe Centrum Kultury" ></img></a>
+</li>
+
+{% endblock %}
+
+{% block main %}
        <div id="picture-view">
-         <ul class="toolbar">
-           <li class="square button plus inactive"><a href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li>
-           <li class="square button minus inactive"><a href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a>
-           </li>
-           <li class="button"><a href="#picture-objects" class="dropdown">{% trans "Objects" %}</a></li>
-           <li class="button"><a href="#picture-themes" class="dropdown">{% trans "Themes" %}</a></li>
-         </ul>
          {% thumbnail picture.image_file "700x500" as pic %}
          <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}" 
               data-original-width="{{picture.width}}" data-original-height="{{picture.height}}"
+           data-original-url="{{ picture.image_file.url }}"
               data-width="{{pic.width}}" data-height="{{pic.height}}" style="background-image: url('{{pic.url}}');  width: {{pic.width}}px; height: {{pic.height}}px;">
-           <img class="canvas loading original" src="{{ picture.image_file.url }}"/>
          </div>
          {% endthumbnail %}
        </div>
-        {{ piwik_tag|safe }}
-       <div id="spinner"></div>
-       <div id="sponsors">
-         <div>
+{% endblock %}
+
+
+{% block footer %}
+{{ picture.html_file.read|safe }}
+
+<div id="info" class="box">
+         <div class="sponsors">
            <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
-             </a>
-           </div>
-         <div>
-           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck.jpg" %}" alt="Narodowe Centrum Kultury" ></img></a>
+           </a>
+           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck_200horiz_trans.png" %}" alt="Narodowe Centrum Kultury" ></img></a>
          </div>
-       </div>
-    </body>
-</html
+
+    {% book_info picture %}
+</div>
+
+<div class="box Picture-item" id="book-short">
+    {{ picture.short_html }}
+</div>
+
+{% endblock %}