new layout fixes
[wolnelektury.git] / src / catalogue / templates / catalogue / 2022 / book_detail.html
1 <!doctype html>
2 {% load pipeline %}
3 {% load static %}
4 {% load choose_cites from social_tags %}
5 {% load choose_fragment license_icon from catalogue_tags %}
6 {% load catalogue_tags %}
7
8
9 <html class="no-js">
10   <head>
11     <meta charset="utf-8">
12     <meta name="description" content="">
13     <meta name="viewport" content="width=device-width,initial-scale=1">
14     <title>WolneLektury.pl</title>
15     <link rel="apple-touch-icon" href="apple-touch-icon.png">
16
17     {% stylesheet '2022' %}
18       <script src="scripts/modernizr.js"></script>
19
20       <link rel="preconnect" href="https://fonts.googleapis.com">
21       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22       <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">
23   </head>
24   <body>
25
26     <nav class="l-navigation">
27       <div class="l-change-pop">
28         <h3>Zmieniamy się!</h3>
29         <p>
30           Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd strony książki.
31           Będziemy bardzo! wdzięczni za Twoją opinię – <a href='{% url 'suggest' %}' target="_blank">możesz nam ją przesłać tutaj</a>.
32           Jeżeli wolisz klasyczny wygląd - wystarczy, że <a class="quit-experiment" href="#">klikniesz tutaj</a>
33         </p>
34         <!-- button class="l-change-pop__close">
35           <i class="icon icon-close"></i>
36         </button -->
37       </div>
38       <div class="l-container">
39         <a href="/" class="l-navigation__logo">
40           <img src="{% static "2022/images/logo.png" %}" alt="WolneLektury.pl">
41         </a>
42         <div class="l-naviagion__search">
43           <form action="/szukaj/">
44             <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10">
45           </form>
46         </div>
47         <div class="l-navigation__actions">
48           <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
49           <!-- button class="l-navigation__button js-menu" aria-label="Menu">
50             <span class="c-hamburger">
51               <span class="bar"></span>
52             </span>
53           </button-->
54         </div>
55       </div>
56     </nav>
57
58
59     <div class="l-container">
60       <div class="l-breadcrumb">
61         <a href="/"><span>Strona główna</span></a>
62         <a href="/katalog/lektury/"><span>Literatura</span></a>
63         {% for ancestor in book.ancestors %}
64           <a href="{{ ancestor.get_absolute_url }}">{{ ancestor.title }}</a>
65         {% endfor %}
66       </div>
67     </div>
68
69
70     <main class="l-main">
71       <section class="l-section">
72         <aside class="l-aside">
73           <figure>
74             <a href="{% url 'book_text' book.slug %}">
75               <img src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}" width="240">
76             </a>
77           </figure>
78           <ul class="l-aside__info">
79             <li><span>Epoka:</span> {% for tag in book.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
80             <li><span>Rodzaj:</span> {% for tag in book.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
81             <li><span>Gatunek:</span> {% for tag in book.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
82           </ul>
83           {% if book.parent or book.get_children %}
84             <ul class="l-aside__zbiory">
85               {% if book.parent %}
86                 {% for b in book.ancestors %}
87                   <li>
88                     <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
89                     <ul>
90                 {% endfor %}
91                 {% for b in book.get_siblings %}
92                   <li>
93                     {% if b == book %}
94                       <strong>{{ b.title }}</strong>
95                       <ul>
96                         {% for c in book.get_children %}
97                           <li>
98                             <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
99                           </li>
100                         {% endfor %}
101                       </ul>
102                     {% else %}
103                       <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
104                     {% endif %}
105                   </li>
106                 {% endfor %}
107
108                 {% for b in book.ancestor.all %}
109                     </ul>
110                   </li>
111                 {% endfor %}
112               {% else %}
113                 <li>
114                   <strong>{{ book.title }}</strong>
115                   <ul>
116                     {% for c in book.get_children %}
117                       <li>
118                         <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
119                       </li>
120                     {% endfor %}
121                   </ul>
122                 </li>
123               {% endif %}
124             </ul>
125           {% endif  %}
126         </aside>
127         <div class="l-content">
128           <header class="l-header">
129             <div class="l-header__content">
130               <p>{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
131               </p>
132               <h1><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h1>
133               {% if book.translators %}
134                 <p class="l-header__translators">
135                   tłum.
136                   {% for translator in book.translators %}
137                     {{ translator }}{% if not forloop.last %}, {% endif %}
138                   {% endfor %}
139                 </p>
140               {% endif %}
141             </div>
142             <div class="l-header__actions">
143               <form method='post' action='{% url 'social_like_book' book.slug %}'>
144                 {% csrf_token %}
145                 <button class="l-button l-button--fav">
146                   <img src="{% static '2022/images/fav.svg' %}" alt="Dodaj do ulubionych">
147                 </button>
148               </form>
149             </div>
150           </header>
151           <article class="l-article">
152             <div class="c-media">
153               <div class="c-media__actions">
154                 <div class="c-media__btn">
155                   {% if book.has_mp3_file %}
156                     <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
157                   {% endif %}
158                 </div>
159                 <div class="c-media__btn">
160                   <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
161                 </div>
162                 <div class="c-media__btn">
163                   {% with t=book.get_first_text %}
164                     {% if t %}
165                       <a href="{% url 'book_text' t.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</a>
166                     {% endif %}
167                   {% endwith %}
168                 </div>
169               </div>
170
171
172
173               {% if book.has_mp3_file %}
174                 {% include 'catalogue/snippets/2022_jplayer.html' %}
175               {% else %}
176                 {% with ch=book.get_child_audiobook %}
177                   {% if ch %}
178                     {% include 'catalogue/snippets/2022_jplayer_link.html' with book=ch %}
179                   {% endif %}
180                 {% endwith %}
181
182               {% endif %}
183
184
185
186
187               <div class="c-media__popup" data-popup="ebook">
188                 <div class="c-media__popup__box">
189                   <div class="c-media__popup__box__lead">
190                     <h2>Pobieranie e-booka</h2>
191                     <p>Wybierz wersję dla siebie:</p>
192                   </div>
193                   <div class="c-media__popup__box__items">
194                     {% if book.pdf_file %}
195                       <div class="c-media__popup__box__item">
196                         <div>
197                           <h3>.pdf</h3>
198                           <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
199                         </div>
200                         <div>
201                           <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
202                         </div>
203                       </div>
204                     {% endif %}
205                     {% if book.epub_file %}
206                       <div class="c-media__popup__box__item">
207                         <div>
208                           <h3>.epub</h3>
209                           <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
210                         </div>
211                         <div>
212                           <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
213                         </div>
214                       </div>
215                     {% endif %}
216                     {% if book.mobi_file %}
217                       <div class="c-media__popup__box__item">
218                         <div>
219                           <h3>.mobi</h3>
220                           <p>Natywny format dla czytnika Amazon Kindle.</p>
221                         </div>
222                         <div>
223                           <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
224                         </div>
225                       </div>
226                     {% endif %}
227                     {% if book.synchro_file %}
228                       <div class="c-media__popup__box__item">
229                         <div>
230                           <h3>synchrobook (epub3)</h3>
231                           <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
232                         </div>
233                         <div>
234                           <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
235                         </div>
236                       </div>
237                     {% endif %}
238                     {% if book.txt_file or book.fb2_file %}
239                       <div class="c-media__popup__box__item">
240                         <div>
241                           <h3>inne formaty</h3>
242                           <ul>
243                             {% if book.txt_file %}<li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>{% endif %}
244                             {% if book.fb2_file %}<li><a href="{{ book.fb2_url }}">FictionBook</a></li>{% endif %}
245                           </ul>
246                         </div>
247                       </div>
248                     {% endif %}
249                   </div>
250                   <button class="c-media__popup__close">
251                     <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
252                   </button>
253                 </div>
254               </div>
255               {% if book.has_mp3_file %}
256                 <div class="c-media__popup" data-popup="audiobook">
257                   <div class="c-media__popup__box">
258                     <div class="c-media__popup__box__lead">
259                       <h2>Pobieranie audiobooka</h2>
260                       <p>Wybierz wersję dla siebie:</p>
261                     </div>
262                     <div class="c-media__popup__box__items">
263                       <div class="c-media__popup__box__item">
264                         <div>
265                           <h3>.mp3</h3>
266                           <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
267                         </div>
268                         <div>
269                           <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
270                         </div>
271                       </div>
272                       {% if book.has_ogg_file %}
273                         <div class="c-media__popup__box__item">
274                           <div>
275                             <h3>OggVorbis</h3>
276                             <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
277                           </div>
278                           <div>
279                             <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
280                           </div>
281                         </div>
282                       {% endif %}
283                       {% if book.has_daisy_file %}
284                         <div class="c-media__popup__box__item">
285                           <div>
286                             <h3>DAISY</h3>
287                             <p>Format dla osób z dysfunkcjami czytania.</p>
288                           </div>
289                           <div>
290                             {% for dsy in book.media_daisy %}
291                               <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
292                             {% endfor %}
293                           </div>
294                         </div>
295                       {% endif %}
296                       {% if book.has_synchro_file %}
297                         <div class="c-media__popup__box__item">
298                           <div>
299                             <h3>synchrobook</h3>
300                             <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
301                           </div>
302                           <div>
303                             <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
304                           </div>
305                         </div>
306                       {% endif %}
307                     </div>
308                     <button class="c-media__popup__close">
309                       <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
310                     </button>
311                   </div>
312                 </div>
313               {% endif %}
314             </div>
315
316             <div class="l-article__overlay" data-max-height="327">
317               {{ book.abstract|safe }}
318
319               {% if book.toc %}
320                 <h4>Spis treści:</h4>
321                 {{ book.toc|safe }}
322               {% endif %}
323             </div>
324             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
325           </article>
326           <div class="c-support">
327             <div>
328               <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>
329               <a href="{% url 'club_join' %}">Dorzuć się!</a>
330             </div>
331             <figure>
332               <img src="{% static '2022/images/dziecko.jpeg' %}" alt="Dorzuć się!">
333             </figure>
334           </div>
335         </div>
336       </section>
337
338       {% for author in book.authors %}
339         <section class="l-section">
340           <div class="l-author">
341             <div class="row">
342               <h2>O autorze</h2>
343               <div>
344                 {% if author.photo %}
345                   <figure class="l-author__photo">
346                     <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
347                     <figcaption>
348                       {{ author.photo_attribution|safe }}
349                     </figcaption>
350                   </figure>
351                 {% endif %}
352                 <article class="l-author__info">
353                   <h3>{{ author.name }}</h3>
354                   <div class="l-article__overlay" data-max-height="327">
355                     {{ author.description|safe }}
356                   </div>
357                   <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
358                 </article>
359               </div>
360             </div>
361
362             {% choose_cites book 3 as cites %}
363             {% if cites %}
364               <div class="row">
365                 <div class="l-author__quotes">
366                   <div class="l-author__quotes__slider">
367                     {% for fragment in cites %}
368                       <a class="l-author__quotes__slider__item" href="{{ fragment.get_absolute_url }}">
369
370                         <em>
371                           {{ fragment.short_text|safe }}
372                         </em>
373                         <p>{{ fragment.book.pretty_title }}</p>
374                       </a>
375                     {% endfor %}
376                   </div>
377                 </div>
378               </div>
379             {% endif %}
380           </div>
381       </section>
382       {% endfor %}
383
384       <section class="l-section">
385         <div class="l-themes__wrapper">
386           {% with book.related_themes as themes %}
387             {% if themes %}
388               <h2>Motywy występujące w tym utworze <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
389               <div class="l-themes l-article__overlay" data-max-height="80">
390                 <ul>
391                   {% for item in themes %}
392                     <li><a href="{% url 'book_fragments' book.slug item.slug %}">{{ item }}&nbsp;({{ item.count}})</a></li>
393                   {% endfor %}
394                 </ul>
395               </div>
396               <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
397
398             {% endif %}
399           {% endwith %}
400           <ul class="links">
401             <li>
402               <a href="{{ book.xml_url }}">źródłowy plik XML</a>
403             </li>
404             <li>
405               <a target="_blank" href="{% url 'poem_from_book' book.slug %}">miksuj treść utworu</a>
406             </li>
407             <li>
408               <a target="_blank" href="{{ book.get_extra_info_json.about }}">utwór na Platformie Redakcyjnej</a>
409             </li>
410           </ul>
411         </div>
412       </section>
413     </main>
414
415
416
417
418
419     <section class="l-section">
420       <div class="l-books__wrapper">
421         <div class="l-container">
422           <h2>Czytaj także</h2>
423           <div class="l-books">
424             {% if book.other_versions %}
425               {% for rel in book.other_versions %}
426                 <article class="l-books__item">
427                   <figure class="l-books__item__img">
428                     <a href="{{ rel.get_absolute_url }}">
429                       <img src="{% if rel.cover %}{{ rel.cover.url }}{% endif %}" alt="{{ rel.pretty_title }}">
430                     </a>
431                   </figure>
432                   <h3>
433                     {% for author in rel.authors %}
434                       <a href="{{ author.get_absolute_url }}">{{ author }}</a>
435                     {% endfor %}
436                   </h3>
437                   <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
438                 </article>
439               {% endfor %}
440             {% endif %}
441
442
443             {% related_books_2022 book taken=book.other_versions|length as related_books %}
444             {% for rel in related_books %}
445               <article class="l-books__item">
446                 <figure class="l-books__item__img">
447                   <a href="{{ rel.get_absolute_url }}">
448                     <img src="{% if rel.cover %}{{ rel.cover.url }}{% endif %}" alt="{{ rel.pretty_title }}">
449                   </a>
450                 </figure>
451                 <h3>
452                   {% for author in rel.authors %}
453                     <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
454                   {% endfor %}
455                 </h3>
456                 <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
457               </article>
458             {% endfor %}
459
460             <article class="l-books__item l-books__item--link">
461               <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
462               <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
463             </article>
464
465           </div>
466         </div>
467       </div>
468     </section>
469
470     <div class="l-footer">
471       <div class="l-container">
472         <div class="l-footer__row">
473           <a href="#"><img src="{% static '2022/images/FNP-logo.png' %}" alt="FUNDACJA Nowoczesna Polska"></a>
474           <ul>
475             <li>ul. Marszałkowska 84/92 lok. 125</li>
476             <li>00-514 Warszawa</li>
477           </ul>
478           <ul class="teal">
479             <li>tel. <a href="#">(22) 621 30 17</a></li>
480             <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>
481           </ul>
482         </div>
483         <div class="l-footer__row">
484           <div>
485             Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
486             Hosting: <a href="#">ICM</a>.
487           </div>
488           <div>
489             <a href="#"><img src="{% static '2022/images/MKiDN.png' %}" alt="MKiDN"></a>
490           </div>
491           <div>
492             Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
493             pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
494           </div>
495         </div>
496       </div>
497     </div>
498
499     <script src="{% static '2022/scripts/vendor.js' %}"></script>
500     <script src="{% static '2021/scripts/main.js' %}"></script>
501
502     {% javascript '2022' %}
503     {% javascript '2022_player' %}
504   </body>
505 </html>