Text layout changes.
[wolnelektury.git] / src / catalogue / templates / catalogue / book_text.html
index 4ff3d5e..a494e24 100644 (file)
@@ -1,18 +1,32 @@
-{% extends "catalogue/viewer_base.html" %}
-{% load i18n %}
+{% extends "base.html" %}
+
+
+{% load i18n l10n %}
 {% load catalogue_tags %}
 {% load chunks %}
 {% load thumbnail %}
+{% load static %}
 {% load annoy_banners from annoy %}
 
 
 {% block title %}{{ book.pretty_title }}{% endblock %}
 
 
+{% block extrahead %}
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin=""/>
+  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+          crossorigin=""></script>
+{% endblock %}
+
+
 {% block menu %}
   <li>
     <a href="{{ book.get_absolute_url }}" id="menu-book" data-box="book-short">
-      <img src="{% if book.cover_thumb %}{% thumbnail book.cover_thumb '240x332' as thumb %}{{ thumb.url }}{% empty %}{{ book.cover_thumb.url }}{% endthumbnail %}{% endif %}"
+      <span class="label">{% trans "Kliknij, by pobrać" %}:</span>
+      <img src="{% if book.cover_clean %}{% thumbnail book.cover_clean '240x332' as thumb %}{{ thumb.url }}{% empty %}{{ book.cover_clean.url }}{% endthumbnail %}{% endif %}"
            width="120" height="166"
            alt="{{ book.pretty_title }}"
            title="{{ book.pretty_title }}">
   {% if book.other_versions.exists %}
     <li id="menu-other">
       <a href="#" data-box="other">
-        <span class="label">{% trans "Other versions" %}</span>
+        <span class="label">{% trans "Inne wersje" %}</span>
       </a>
     </li>
   {% endif %}
 
-  <li id="menu-toc">
-    <a href="#" data-box="wltoc">
-      <span class="label">{% trans "Table of contents" %}</span>
-    </a>
-  </li>
+  {% if extra_info.logo_mono %}
+    {% thumbnail extra_info.logo_mono '200x200' as th %}
+    <img src="{{ th.url }}" style="width: 100px; padding: 10px;"
+         alt="{{ extra_info.logo_alt|default:'Sponsor' }}"
+    >
+  {% endthumbnail %}
+  {% endif %}
+
+
+
+{% endblock menu %}
 
-  <li id="menu-themes">
-    <a href="#" data-box="themes">
-      <span class="label">{% trans "Themes" %}</span>
-    </a>
-  </li>
 
-  <li id="menu-settings">
-    <a href="#" data-box="settings">
-      <span class="label">{% trans "Settings" %}</span>
+
+{% block breadcrumb-right %}
+  <div class="l-text_toolbar" id="menu">
+    <a href="#info" data-box="info">
+      <img src="{% static '2022/images/about.svg' %}" alt="{% trans "Informacje" %}">
     </a>
-  </li>
 
-  <li id="menu-nota_red">
-    <a href="#" data-box="nota_red">
-      <span class="label">{% trans "Edit. note" %}</span>
+    <a href="#" data-box="settings" style="display: none;">
+      <img src="{% static '2022/images/settings.svg' %}" alt="{% trans "Ustawienia" %}">
     </a>
-  </li>
 
-  <li id="menu-info">
-    <a href="#info" data-box="info">
-      <span class="label">{% trans "Infobox" %}</span>
+    <a href="#wltoc" data-box="wltoc" style="display: none;">
+      <img src="{% static '2022/images/toc.svg' %}" alt="{% trans "Spis treści" %}">
     </a>
-  </li>
-{% endblock menu %}
 
 
-{% block big-pane %}
 
-  <article id="main-text">
-    {% with next=book.get_next_text prev=book.get_prev_text %}
-      {% if next %}
-        <a style="float:right; padding: 1em;" href="{% url 'book_text' next.slug %}">{{ next.title }}&nbsp;&rarr;</a>
-      {% endif %}
-      {% if prev %}
-        <a style="display:inline-block;padding: 1em;" href="{% url 'book_text' prev.slug %}">&larr;&nbsp;{{ prev.title }}</a>
-      {% endif %}
-      {{ book_text|safe }}
-    {% endwith %}
-  </article>
 
+    <div id="info" class="box">
+      {% book_info book %}
+    </div>
 
 
-  <article id="other-text">
-    <a class="other-text-close" href="#">{% trans "Close" %}</a>
-    <div id="other-text-waiter">{% trans "Please wait..." %}</div>
-    <div id="other-text-body" style="display: none;"></div>
-  </article>
-{% endblock big-pane %}
+    <div id="settings" class="box">
+      <a href="#" class="settings-switch" id="settings-line-numbers"
+         data-setting="always-hide-line-numbers"><span>{% trans "Numeracja" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-themes"
+         data-setting="always-hide-themes"><span>{% trans "Motywy" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-annotations"
+         data-setting="no-annotations"><span>{% trans "Przypisy" %}</span></a>
+      <a href="#" class="settings-switch" id="settings-references"
+         data-setting="no-references"><span>{% trans "Pinezki" %}</span></a>
+    </div>
 
-{% block footer %}
-  <div id="wltoc" class="box">
-    {% if book.parent %}
-      {% for b in book.ancestor.all %}
-        {% if forloop.counter > 1 %}
-          <li>
-        {% endif %}
-        <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
-        <ol>
-      {% endfor %}
+
+    <div id="wltoc" class="box">
+      {% if book.parent %}
+        {% for b in book.ancestors %}
+          {% if forloop.counter > 1 %}
+            <li>
+          {% endif %}
+          <a href="{% if b.html_file %}{% url 'book_text' b.slug %}{% else %}{{ b.get_absolute_url }}{% endif %}">{{ b.title }}</a>
+          <ol>
+        {% endfor %}
         {% for b in book.get_siblings %}
           <li>
             {% if b == book %}
               <strong>{{ b.title }}</strong>
               <div id="heretoc"></div>
             {% else %}
-              <a href="{% url 'book_text' b.slug %}">{{ b.title }}</a>
+              <a href="{% url 'book_text' b.get_first_text.slug %}">{{ b.title }}</a>
             {% endif %}
           </li>
         {% endfor %}
 
         {% for b in book.ancestor.all %}
-        </ol>
-        {% if not forloop.counter.last %}
-          </li>
-        {% endif %}
+          </ol>
+          {% if not forloop.counter.last %}
+            </li>
+          {% endif %}
         {% endfor %}
-    {% else %}
-      <strong>{{ book.title }}</strong>
-      <div id="heretoc"></div>
-    {% endif %}
+      {% else %}
+        <strong>{{ book.title }}</strong>
+        <div id="heretoc"></div>
+        <ol>
+          {% for c in book.get_children %}
+            <li><a href="{% url 'book_text' c.get_first_text.slug %}">{{ c.title }}</a></li>
+          {% endfor %}
+        </ol>
+      {% endif %}
+    </div>
+
   </div>
+{% endblock %}
 
-  <div id="info" class="box">
-      {% book_info book %}
+
+
+
+{% block main %}
+  <div id="global-progress" class="l-container">
+    <div class="bar">
+      <span class="piece" style="flex-grow: 100;">
+        <span class="filled"></span>
+      </span>
+    </div>
+    <div class="progress-text">
+      Szacowany czas do końca: <span class="progress-text-value">56 min</span>
+    </div>
   </div>
 
-  {% if book.other_versions.exists %}
-    <div class="box" id="other">
-      <h2>{% trans "Other versions of the book" %}</h2>
-      <a class="other-text-close" href="#">{% trans "Close the other version" %}</a>
-      <ul>
-        {% spaceless %}
-          {% for other_version in book.other_versions %}
-            <li>
-              <a class="display-other"
-                 data-other="{{ other_version.html_url }}"
-                 href="{% url 'book_text' other_version.slug %}">
-                {{ other_version.mini_box_nolink }}
-              </a>
-            </li>
-          {% endfor %}
-        {% endspaceless %}
-      </ul>
+  <header class="l-text_header">
+    <img class="l-text_header_cover" src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}">
+
+    <div class="l-text_header__content">
+      <p class="l-text_header_author">{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
+      </p>
+      <h1 class="l-text_header_title"><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
+      {% with translators=book.translators %}
+        {% if translators %}
+          <p class="l-header__translators">
+            {% if translators.0 != 'tłumacz nieznany' %}
+              {% trans "tłum." %}
+            {% endif %}
+            {% for translator in translators %}
+              {{ translator }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+          </p>
+        {% endif %}
+      {% endwith %}
+      <div style="margin-top:1em;">
+        {% content_warning book %}
+      </div>
+
+    </div>
+  </header>
+
+
+  <article id="main-text">
+    {% with next=book.get_next_text prev=book.get_prev_text %}
+      {% if next %}
+        <a class="text_next-book" href="{% url 'book_text' next.slug %}">{{ next.title }}&nbsp;&rarr;</a>
+      {% endif %}
+      {% if prev %}
+        <a class="text_prev-book" href="{% url 'book_text' prev.slug %}">&larr;&nbsp;{{ prev.title }}</a>
+      {% endif %}
+      {{ book_text|safe }}
+    {% endwith %}
+
+
+
+
+
+
+    <article id="other-text">
+      <a class="other-text-close" href="#">{% trans "Zamknij" %}</a>
+      <div id="other-text-waiter">{% trans "Proszę czekać..." %}</div>
+      <div id="other-text-body" style="display: none;"></div>
+    </article>
+
+    <div id="reference-box">
+      <div id="reference-map"></div>
+      <a id="reference-close" href="#">x</a>
+      <div id="reference-images">
+      </div>
+      <a id="reference-link" target="_blank"></a>
     </div>
+
+
+    {% if book.other_versions.exists %}
+      <div class="box" id="other">
+        <h2>{% trans "Inne wersje utworu" %}</h2>
+        <a class="other-text-close" href="#">{% trans "Zamknij drugą wersję" %}</a>
+        <ul>
+          {% spaceless %}
+            {% for other_version in book.other_versions %}
+              <li>
+                <a class="display-other"
+                   data-other="{{ other_version.html_url }}"
+                   href="{% url 'book_text' other_version.slug %}">
+                  {{ other_version.mini_box_nolink }}
+                </a>
+              </li>
+            {% endfor %}
+          {% endspaceless %}
+        </ul>
+      </div>
+    {% endif %}
+
+    <div id="annoy-stubs">
+      {% annoy_banners 'book-text-intermission' %}
+
+      {% for insert in inserts %}
+        {% include 'annoy/dynamic_insert.html' %}
+      {% endfor %}
+    </div>
+
+  </article>
+
+
+
+  {% if book.has_sync_file %}
+    <div id="player-bar">
+      {% include 'catalogue/snippets/jplayer_reader.html' %}
+    </div>
+    <script type="application/json" id="smil">
+     {{ book.get_sync|safe }}
+    </script>
   {% endif %}
 
-  <div class="box" id="settings">
-    <h2>{% trans "Settings" %}</h2>
-    <a href="#" class="settings-switch" id="settings-line-numbers"
-       data-setting="always-hide-line-numbers">{% trans "Display line numbers" %}</a><br/>
-    <a href="#" class="settings-switch" id="settings-themes"
-       data-setting="always-hide-themes">{% trans "Display themes" %}</a><br/>
-    <a href="#" class="settings-switch" id="settings-annotations"
-       data-setting="no-annotations">{% trans "Display footnotes" %}</a><br/>
-  </div>
 
-  <div class="box" id="book-short">
-    {% include 'catalogue/book_short.html' %}
+  <div id="marker">
+
   </div>
 
-  <div id="annoy-stubs">
-    {% annoy_banners 'book-text-intermission' %}
+  {% localize off %}
+  <script type="application/json" id="interesting-references">
+   {
+       {% for ref in book.references %}
+       {% if ref.entity.is_interesting %}
+       "{{ ref.entity.uri }}": {
+           {% if ref.entity.lat and ref.entity.lon %}
+           "location": [{{ ref.entity.lat }}, {{ ref.entity.lon }}],
+           {% endif %}
+           "images": {{ ref.entity.images|safe }},
+           "label": "{{ ref.entity.label }}",
+           "description": "{{ ref.entity.description }}",
+           "wikipedia_link": "{{ ref.entity.wikipedia_link }}"
+       },
+       {% endif %}
+       {% endfor %}
+       "": null
+   }
+  </script>
 
-    {% for insert in inserts %}
-      {% include 'annoy/dynamic_insert.html' %}
-    {% endfor %}
-  </div>
-{% endblock footer %}
+  {% endlocalize %}
+
+{% endblock main %}