book page fix
[wolnelektury.git] / src / catalogue / templates / catalogue / 2022 / book_detail.html
index 118a059..c2db0b1 100644 (file)
@@ -1,65 +1,13 @@
-<!doctype html>
-{% load pipeline %}
+{% extends '2022/base.html' %}
+
+{% load chunks %}
 {% load static %}
 {% load choose_cites from social_tags %}
-{% load choose_fragment license_icon from catalogue_tags %}
 {% load catalogue_tags %}
 {% load likes_book from social_tags %}
-{% load piwik_tags %}
-
-
-<html class="no-js">
-  <head>
-    <meta charset="utf-8">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>WolneLektury.pl</title>
-    <link rel="apple-touch-icon" href="apple-touch-icon.png">
-
-    {% stylesheet '2022' %}
-      <script src="scripts/modernizr.js"></script>
-
-      <link rel="preconnect" href="https://fonts.googleapis.com">
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
-
-      {% tracking_code %}
-  </head>
-  <body>
-
-    <nav class="l-navigation">
-      <div class="l-change-pop">
-        <h3>Zmieniamy się!</h3>
-        <p>
-          Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd strony książki.
-          Będziemy bardzo! wdzięczni za Twoją opinię – <a href='/formularz/ux-strona-ksiazki-T1/' target="_blank">możesz nam ją przesłać tutaj</a>.
-          Jeżeli wolisz klasyczny wygląd - wystarczy, że <a class="quit-experiment" href="#">klikniesz tutaj</a>
-        </p>
-        <!-- button class="l-change-pop__close">
-             <i class="icon icon-close"></i>
-             </button -->
-      </div>
-      <div class="l-container">
-        <a href="/" class="l-navigation__logo">
-          <img src="{% static "2022/images/logo.png" %}" alt="WolneLektury.pl">
-        </a>
-        <div class="l-naviagion__search">
-          <form action="/szukaj/">
-            <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10">
-          </form>
-        </div>
-        <div class="l-navigation__actions">
-          <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
-          <!-- button class="l-navigation__button js-menu" aria-label="Menu">
-               <span class="c-hamburger">
-               <span class="bar"></span>
-               </span>
-               </button-->
-        </div>
-      </div>
-    </nav>
 
 
+{% block global-content %}
     <div class="l-container">
       <div class="l-breadcrumb">
         <a href="/"><span>Strona główna</span></a>
     </div>
 
 
-    <main class="l-main">
-      <section class="l-section">
+    <main class="l-main page-book">
+      <section class="l-section lay-s-col-rev">
         {% with first_text=book.get_first_text %}
           <aside class="l-aside">
-            <figure>
-              {% if first_text %}
+            <figure class="only-l">
+              {% if accessible and first_text %}
                 <a href="{% url 'book_text' first_text.slug %}">
               {% endif %}
               <img src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}" width="240">
-              {% if first_text %}
+              {% if accessible and first_text %}
                 </a>
               {% endif %}
             </figure>
                 <p>{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
                 </p>
                 <h1><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
-                {% if book.translators %}
+                {% with translators=book.translators %}
+                {% if translators %}
                   <p class="l-header__translators">
-                    tłum.
-                    {% for translator in book.translators %}
+                    {% if translators.0 != 'tłumacz nieznany' %}
+                      tłum.
+                    {% endif %}
+                    {% for translator in translators %}
                       {{ translator }}{% if not forloop.last %}, {% endif %}
                     {% endfor %}
                   </p>
                 {% endif %}
+                {% endwith %}
               </div>
-              <div class="l-header__actions">
-                {% likes_book book as likes %}
+
+
+
+              {% likes_book book as likes %}
+              <div class="l-header__actions only-l">
                 {% if likes %}
                   <form method='post' action='{% url 'social_unlike_book' book.slug %}'>
                     {% csrf_token %}
               </div>
             </header>
             <article class="l-article">
-              <div class="c-media">
-                <div class="c-media__actions">
-                  <div class="c-media__btn">
-                    {% if book.has_mp3_file %}
-                      <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
-                    {% endif %}
-                  </div>
-                  <div class="c-media__btn">
-                    <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
-                  </div>
-                  <div class="c-media__btn">
-                    {% if first_text %}
-                      <a href="{% url 'book_text' first_text.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</a>
-                    {% endif %}
-                  </div>
-                </div>
-
-
-
-                {% if book.has_mp3_file %}
-                  {% include 'catalogue/snippets/2022_jplayer.html' %}
-                {% else %}
-                  {% with ch=book.get_child_audiobook %}
-                    {% if ch %}
-                      {% include 'catalogue/snippets/2022_jplayer_link.html' with book=ch %}
-                    {% endif %}
-                  {% endwith %}
 
-                {% endif %}
 
 
 
 
-                <div class="c-media__popup" data-popup="ebook">
-                  <div class="c-media__popup__box">
-                    <div class="c-media__popup__box__lead">
-                      <h2>Pobieranie e-booka</h2>
-                      <p>Wybierz wersję dla siebie:</p>
-                    </div>
-                    <div class="c-media__popup__box__items">
-                      {% if book.pdf_file %}
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>.pdf</h3>
-                            <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
-                          </div>
-                          <div>
-                            <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
-                          </div>
-                        </div>
+              {% if accessible %}
+                <div class="c-media">
+                  <div class="lay-row lay-l-block lay-spread">
+                    <figure class="only-s book-cover-small">
+                      {% if accessible and first_text %}
+                        <a href="{% url 'book_text' first_text.slug %}">
                       {% endif %}
-                      {% if book.epub_file %}
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>.epub</h3>
-                            <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
-                          </div>
-                          <div>
-                            <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
-                          </div>
-                        </div>
+                      <img src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}">
+                      {% if accessible and first_text %}
+                        </a>
                       {% endif %}
-                      {% if book.mobi_file %}
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>.mobi</h3>
-                            <p>Natywny format dla czytnika Amazon Kindle.</p>
-                          </div>
-                          <div>
-                            <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
-                          </div>
+                    </figure>
+                    <div class="lay-col lay-spread lay-grow">
+                      <div class="l-header__actions only-s">
+                        {% if likes %}
+                          <form method='post' action='{% url 'social_unlike_book' book.slug %}'>
+                            {% csrf_token %}
+                            <button class="l-button l-button--fav">
+                              <img src="{% static '2022/images/faved.svg' %}" alt="Usuń z ulubionych">
+                            </button>
+                          </form>
+                        {% else %}
+                          <form method='post' action='{% url 'social_like_book' book.slug %}'>
+                            {% csrf_token %}
+                            <button class="l-button l-button--fav">
+                              <img src="{% static '2022/images/fav.svg' %}" alt="Dodaj do ulubionych">
+                            </button>
+                          </form>
+                        {% endif %}
+                      </div>
+                      <div class="c-media__actions lay-col lay-l-row">
+                        <div class="c-media__btn">
+                          {% if book.has_mp3_file %}
+                            <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
+                          {% endif %}
                         </div>
-                      {% endif %}
-                      {% if book.synchro_file %}
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>synchrobook (epub3)</h3>
-                            <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
-                          </div>
-                          <div>
-                            <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
-                          </div>
+                        <div class="c-media__btn">
+                          <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
                         </div>
-                      {% endif %}
-                      {% if book.txt_file or book.fb2_file %}
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>inne formaty</h3>
-                            <ul>
-                              <li><a href="{% url 'custom_pdf_form' book.slug %}">Stwórz własny PDF</a></li>
-                              {% if book.txt_file %}<li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>{% endif %}
-                              {% if book.fb2_file %}<li><a href="{{ book.fb2_url }}">FictionBook</a></li>{% endif %}
-                            </ul>
-                          </div>
+                        <div class="c-media__btn">
+                          {% if first_text %}
+                            <a href="{% url 'book_text' first_text.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</a>
+                          {% endif %}
                         </div>
-                      {% endif %}
+                      </div>
                     </div>
-                    <button class="c-media__popup__close">
-                      <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
-                    </button>
                   </div>
-                </div>
-                {% if book.has_mp3_file %}
-                  <div class="c-media__popup" data-popup="audiobook">
+
+
+
+                  {% if book.has_mp3_file %}
+                    {% include 'catalogue/snippets/2022_jplayer.html' %}
+                  {% else %}
+                    {% with ch=book.get_child_audiobook %}
+                      {% if ch %}
+                        {% include 'catalogue/snippets/2022_jplayer_link.html' with book=ch %}
+                      {% endif %}
+                    {% endwith %}
+
+                  {% endif %}
+
+
+
+
+                  <div class="c-media__popup" data-popup="ebook">
                     <div class="c-media__popup__box">
                       <div class="c-media__popup__box__lead">
-                        <h2>Pobieranie audiobooka</h2>
+                        <h2>Pobieranie e-booka</h2>
                         <p>Wybierz wersję dla siebie:</p>
                       </div>
                       <div class="c-media__popup__box__items">
-                        <div class="c-media__popup__box__item">
-                          <div>
-                            <h3>.mp3</h3>
-                            <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
-                          </div>
-                          <div>
-                            <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
+                        {% if book.pdf_file %}
+                          <div class="c-media__popup__box__item">
+                            <div>
+                              <h3>.pdf</h3>
+                              <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
+                            </div>
+                            <div>
+                              <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
+                            </div>
                           </div>
-                        </div>
-                        {% if book.has_ogg_file %}
+                        {% endif %}
+                        {% if book.epub_file %}
                           <div class="c-media__popup__box__item">
                             <div>
-                              <h3>OggVorbis</h3>
-                              <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
+                              <h3>.epub</h3>
+                              <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
                             </div>
                             <div>
-                              <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
+                              <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
                             </div>
                           </div>
                         {% endif %}
-                        {% if book.has_daisy_file %}
+                        {% if book.mobi_file %}
                           <div class="c-media__popup__box__item">
                             <div>
-                              <h3>DAISY</h3>
-                              <p>Format dla osób z dysfunkcjami czytania.</p>
+                              <h3>.mobi</h3>
+                              <p>Natywny format dla czytnika Amazon Kindle.</p>
                             </div>
                             <div>
-                              {% for dsy in book.media_daisy %}
-                                <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
-                              {% endfor %}
+                              <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
                             </div>
                           </div>
                         {% endif %}
-                        {% if book.has_synchro_file %}
+                        {% if book.synchro_file %}
                           <div class="c-media__popup__box__item">
                             <div>
-                              <h3>synchrobook</h3>
-                              <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
+                              <h3>synchrobook (epub3)</h3>
+                              <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
                             </div>
                             <div>
                               <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
                             </div>
                           </div>
                         {% endif %}
+                        {% if book.txt_file or book.fb2_file %}
+                          <div class="c-media__popup__box__item">
+                            <div>
+                              <h3>inne formaty</h3>
+                              <ul>
+                                <li><a href="{% url 'custom_pdf_form' book.slug %}">Stwórz własny PDF</a></li>
+                                {% if book.txt_file %}<li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>{% endif %}
+                                {% if book.fb2_file %}<li><a href="{{ book.fb2_url }}">FictionBook</a></li>{% endif %}
+                              </ul>
+                            </div>
+                          </div>
+                        {% endif %}
                       </div>
                       <button class="c-media__popup__close">
                         <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
                       </button>
                     </div>
                   </div>
-                {% endif %}
-              </div>
+                  {% if book.has_mp3_file %}
+                    <div class="c-media__popup" data-popup="audiobook">
+                      <div class="c-media__popup__box">
+                        <div class="c-media__popup__box__lead">
+                          <h2>Pobieranie audiobooka</h2>
+                          <p>Wybierz wersję dla siebie:</p>
+                        </div>
+                        <div class="c-media__popup__box__items">
+                          <div class="c-media__popup__box__item">
+                            <div>
+                              <h3>.mp3</h3>
+                              <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
+                            </div>
+                            <div>
+                              <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
+                            </div>
+                          </div>
+                          {% if book.has_ogg_file %}
+                            <div class="c-media__popup__box__item">
+                              <div>
+                                <h3>OggVorbis</h3>
+                                <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
+                              </div>
+                              <div>
+                                <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
+                              </div>
+                            </div>
+                          {% endif %}
+                          {% if book.has_daisy_file %}
+                            <div class="c-media__popup__box__item">
+                              <div>
+                                <h3>DAISY</h3>
+                                <p>Format dla osób z dysfunkcjami czytania.</p>
+                              </div>
+                              <div>
+                                {% for dsy in book.media_daisy %}
+                                  <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
+                                {% endfor %}
+                              </div>
+                            </div>
+                          {% endif %}
+                          {% if book.has_audio_epub_file %}
+                            <div class="c-media__popup__box__item">
+                              <div>
+                                <h3>EPUB + audiobook</h3>
+                                <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
+                              </div>
+                              <div>
+                                {% for epub in book.media_audio_epub %}
+                                  <a href="{{ epub.file.url }}" class="l-button l-button--media l-button--media--full">EPUB+audio</a>
+                                {% endfor %}
+                              </div>
+                            </div>
+                          {% endif %}
+                        </div>
+                        <button class="c-media__popup__close">
+                          <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
+                        </button>
+                      </div>
+                    </div>
+                  {% endif %}
+                </div>
+              {% else %}
+                <div style="margin-bottom: 1.5rem; font-size: 15px; like-height: 150%; color: #808080;">
+                  {% chunk 'book-preview-warn' %}
+                </div>
+
+                <div class="l-checkout__box">
+                  {% include 'club/2022/donation_step1_form.html' with form=donation_form %}
+                </div>
+              {% endif %}
 
               <div class="l-article__overlay" data-max-height="327">
+                {% content_warning book %}
                 {{ book.abstract|safe }}
 
                 {% if book.toc %}
-                  <h4>Spis treści:</h4>
-                  {{ book.toc|safe }}
+                  <div class="toc">
+                    <h4>Spis treści:</h4>
+                    {{ book.toc|safe }}
+                  </div>
                 {% endif %}
               </div>
               <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
             </article>
+            {% if accessible %}
             <div class="c-support">
               <div>
                 <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki <span>darowiznom</span> od osób takich jak <span>Ty</span>!</h2>
                 <a href="{% url 'club_join' %}?pk_campaign=layout">Dorzuć się!</a>
               </div>
-              <figure>
-                <img src="{% static '2022/images/dziecko.jpeg' %}" alt="Dorzuć się!">
-              </figure>
+              <div class="bg">
+                <!-- img src="{% static '2022/images/dziecko.jpeg' %}" alt="Dorzuć się!" -->
+              </div>
             </div>
+            {% endif %}
           </div>
         {% endwith %}
       </section>
 
-      {% for author in book.authors %}
+      {% for tag in book.authors %}
         <section class="l-section">
           <div class="l-author">
-            <div class="row">
-              <h2>O autorze</h2>
-              <div>
-                {% if author.photo %}
-                  <figure class="l-author__photo">
-                    <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
-                    <figcaption>
-                      {{ author.photo_attribution|safe }}
-                    </figcaption>
-                  </figure>
-                {% endif %}
-                <article class="l-author__info">
-                  <h3><a href="{{ author.get_absolute_url }}">{{ author.name }}</a></h3>
-                  <div class="l-article__overlay" data-max-height="327">
-                    {{ author.description|safe }}
-                  </div>
-                  <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
-                </article>
-              </div>
-            </div>
-
-            {% choose_cites book 3 as cites %}
-            {% if cites %}
-              <div class="row">
-                <div class="l-author__quotes">
-                  <div class="l-author__quotes__slider">
-                    {% for fragment in cites %}
-                      <a class="l-author__quotes__slider__item" href="{{ fragment.get_absolute_url }}">
-
-                        <em>
-                          {{ fragment.short_text|safe }}
-                        </em>
-                        <p>{{ fragment.book.pretty_title }}</p>
-                      </a>
-                    {% endfor %}
+            {% include 'catalogue/2022/author_box.html' %}
+
+            {% if forloop.first %}
+              {% choose_cites 3 book=book as cites %}
+              {% if cites %}
+                <div class="row">
+                  <div class="l-author__quotes">
+                    <div class="l-author__quotes__slider">
+                      {% for fragment in cites %}
+                        {% include "catalogue/2022/fragment_slider_box.html" %}
+                      {% endfor %}
+                    </div>
                   </div>
                 </div>
-              </div>
+              {% endif %}
             {% endif %}
           </div>
         </section>
             {% if book.wiki_link %}
               <li><a href="{{ book.wiki_link }}">strona utworu w Wikipedii</a></li>
             {% endif %}
+           {% if accessible %}
             <li>
               <a href="{{ book.xml_url }}">źródłowy plik XML</a>
             </li>
             <li>
               <a target="_blank" href="{{ book.get_extra_info_json.about }}">utwór na Platformie Redakcyjnej</a>
             </li>
+           {% endif %}
           </ul>
         </div>
       </section>
       </div>
     </section>
 
-    <div class="l-footer">
-      <div class="l-container">
-        <div class="l-footer__row">
-          <a href="#"><img src="{% static '2022/images/FNP-logo.png' %}" alt="FUNDACJA Nowoczesna Polska"></a>
-          <ul>
-            <li>ul. Marszałkowska 84/92 lok. 125</li>
-            <li>00-514 Warszawa</li>
-          </ul>
-          <ul class="teal">
-            <li>tel. <a href="#">(22) 621 30 17</a></li>
-            <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>
-          </ul>
-        </div>
-        <div class="l-footer__row">
-          <div>
-            Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
-            Hosting: <a href="#">ICM</a>.
-          </div>
-          <div>
-            <a href="#"><img src="{% static '2022/images/MKiDN.png' %}" alt="MKiDN"></a>
-          </div>
-          <div>
-            Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
-            pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <script src="{% static '2022/scripts/vendor.js' %}"></script>
-    <script src="{% static '2021/scripts/main.js' %}"></script>
-
-    {% javascript '2022' %}
-      {% javascript '2022_player' %}
-        <!-- Hotjar Tracking Code for https://wolnelektury.pl/ -->
-        <script>
-         (function(h,o,t,j,a,r){
-             h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-             h._hjSettings={hjid:2661024,hjsv:6};
-             a=o.getElementsByTagName('head')[0];
-             r=o.createElement('script');r.async=1;
-             r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-             a.appendChild(r);
-         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
-        </script>
-  </body>
-</html>
+{% endblock %}