Layout fixes
[wolnelektury.git] / src / picture / templates / picture / 2022 / picture_detail.html
1 {% extends '2022/base.html' %}
2 {% load i18n %}
3
4 {% load chunks %}
5 {% load static %}
6 {% load thumbnail %}
7 {% load catalogue_tags %}
8
9
10 {% block global-content %}
11   <div class="l-container">
12     <div class="l-breadcrumb">
13       <a href="/"><span>Strona główna</span></a>
14       <a href="/katalog/obraz/"><span>Obrazy</span></a>
15     </div>
16   </div>
17
18
19   <main class="l-main">
20     <section class="l-section lay-s-col-rev">
21       <aside class="l-aside">
22         <ul class="l-aside__info">
23           <li><span>Epoka:</span> {% for tag in picture.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
24           <li><span>Rodzaj:</span> {% for tag in picture.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
25           <li><span>Gatunek:</span> {% for tag in picture.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
26           {% with extra_info=picture.get_extra_info_json %}
27             {% if extra_info.styles %}
28               <li>
29                 <span>{% trans "Style" %}:</span>
30                 {% for tag in extra_info.styles %}
31                   <a>{{ tag }}</a>
32                   {% if not forloop.last %}, {% endif %}
33                 {% endfor %}
34               </li>
35             {% endif %}
36
37             {% if extra_info.medium %}
38               <li>
39                 <span>{% trans "Medium" %}:</span>
40                 <a>{{ extra_info.medium }}</a>
41               </li>
42             {% endif %}
43
44             {% if extra_info.original_dimensions %}
45               <li>
46                 <span>{% trans "Dimensions" %}:</span>
47                 <a>{{ extra_info.original_dimensions }}</a>
48               </li>
49             {% endif %}
50
51             <li>
52               <span>{% trans "Date" %}:</span>
53               <a>{{ extra_info.created_at }}</a>
54             </li>
55           {% endwith %}
56
57         </ul>
58       </aside>
59       <div class="l-content">
60         <header class="l-header">
61           <div class="l-header__content">
62             <p>{% for author in picture.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
63             </p>
64             <h1><a href="{{ picture.get_absolute_url }}">{{ picture.title }}</a></h1>
65           </div>
66         </header>
67         <article class="l-article">
68           <div class="c-media">
69             <div class="c-media__actions">
70               <div class="c-media__btn">
71                 <a href="{{ picture.image_file.url }}" class="l-button l-button--media"><i class="icon icon-picture"></i> pobierz obraz</a>
72               </div>
73               <div class="c-media__btn" style="padding-right: 0">
74                 <a href="{% url 'picture_viewer' picture.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> obejrzyj online</a>
75               </div>
76             </div>
77           </div>
78
79           <div class="l-article__overlay" data-max-height="327" style="margin-top:30px;">
80             {% thumbnail picture.image_file "850" upscale=0 as thumb %}
81             <a href="{% url 'picture_viewer' picture.slug %}">
82               <img class="l-art__preview" src="{{ thumb.url }}" />
83             </a>
84     {% endthumbnail %}
85           </div>
86           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Pokaż więcej" data-action="Pokaż mniej">Pokaż więcej</button>
87         </article>
88       </div>
89     </section>
90
91     {% for tag in picture.authors %}
92       <section class="l-section">
93         <div class="l-author">
94           {% include 'catalogue/2022/author_box.html' %}
95         </div>
96       </section>
97     {% endfor %}
98
99     <section class="l-section">
100       <div class="l-themes__wrapper">
101         {% if themes %}
102           <h2>Motywy obecne na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
103           <div class="l-themes l-article__overlay" data-max-height="80">
104             <ul>
105               {% for item in themes %}
106                 <li><a href="{% url 'picture_viewer' picture.slug %}#theme-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
107               {% endfor %}
108             </ul>
109           </div>
110           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
111
112         {% endif %}
113         {% if things %}
114           <h2>Obiekty na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie obiekty</span> <i class="icon icon-arrow-right"></i></a></h2>
115           <div class="l-themes l-article__overlay" data-max-height="80">
116             <ul>
117               {% for item in things %}
118                 <li><a href="{% url 'picture_viewer' picture.slug %}#object-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
119               {% endfor %}
120             </ul>
121           </div>
122           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
123
124         {% endif %}
125         <ul class="links">
126           {% if picture.wiki_link %}
127             <li><a href="{{ picture.wiki_link }}">strona obrazu w Wikipedii</a></li>
128           {% endif %}
129           <li>
130             <a href="{{ picture.xml_url }}">źródłowy plik XML</a>
131           </li>
132           <li>
133             <a target="_blank" href="{{ picture.get_extra_info_json.about }}">obraz na Platformie Redakcyjnej</a>
134           </li>
135         </ul>
136       </div>
137     </section>
138   </main>
139
140
141
142
143
144   <section class="l-section">
145     <div class="l-books__wrapper">
146       <div class="l-container">
147         <h2>Czytaj także</h2>
148         <dive class="l-books">
149           {% related_pictures_2022 picture=picture as related_books %}
150           {% for rel in related_books %}
151             <article class="l-books__item">
152               <figure class="l-books__item__img">
153                 <a href="{{ rel.get_absolute_url }}">
154                   <img src="{% if rel.cover_clean %}{{ rel.cover_clean.url }}{% endif %}" alt="{{ rel.pretty_title }}">
155                 </a>
156               </figure>
157               <h3>
158                 {% for author in rel.authors %}
159                   <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
160                 {% endfor %}
161               </h3>
162               <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
163             </article>
164           {% endfor %}
165
166           <article class="l-books__item l-books__item--link">
167             <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
168             <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
169           </article>
170
171         </div>
172       </div>
173     </div>
174   </section>
175
176
177 {% endblock %}