+{% extends "catalogue/viewer_base.html" %}
{% load i18n %}
{% load static from staticfiles %}
-{% load chunks compressed catalogue_tags %}
+{% load 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 class="menu" href="#download">{% trans "Download" %}</a></li>
- </ul>
- </div>
- <div id="info" class="moveright">
- {% 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="#">+<!--➕--><!-- heavy plus sign --></a></li><li><a class="square button minus inactive" href="#">-<!-- ➖--><!-- heavy minus sign --></a></li>
+{% endblock %}
+
+
+{% block menu %}
+<li><a style="width: 50%;display: inline-block;" class="square button plus inactive" href="#">+<!--➕--><!-- heavy plus sign --></a><a style="width: 50%;display: inline-block;" class="square button minus inactive" href="#">-<!-- ➖--><!-- 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">
+ {% for sponsor in sponsors %}
+ {% thumbnail sponsor.logo "80x200" as logo %}
+ <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}" /></a>
+ {% endthumbnail %}
+ {% endfor %}
+</li>
+
+{% endblock %}
+
+{% block main %}
<div id="picture-view">
- <ul class="toolbar">
- <li class="square button plus"><a href="#">➕<!-- heavy plus sign --></a></li>
- <li class="square button minus"><a href="#">➖<!-- 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>
- <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}">
- {% thumbnail picture.image_file "700x500" as pic %}
- <img class="canvas initial" src="{{pic.url}}"/>
- {% endthumbnail %}
- <img class="canvas loading original" src="{{ picture.image_file.url }}"/>
+ {% 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;">
</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>
+ {% for sponsor in sponsors %}
+ {% thumbnail sponsor.logo "220x220" as logo %}
+ <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}" /></a>
+ {% endthumbnail %}
+ {% endfor %}
</div>
- </div>
- </body>
-</html
+
+ {% book_info picture %}
+</div>
+
+<div class="box Picture-item" id="book-short">
+ {{ picture.short_html }}
+</div>
+
+{% endblock %}