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