Use tint colours throughout the app
[books.alexwlchan.net] / templates / _review_entry.html
1 {% set r = (tint_colors[review_entry.book.cover_image][0] * 255) | int %}
2 {% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
3 {% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
4
5 <style>
6   #review_preview_{{ r }}_{{ g }}_{{ b }} {
7     background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
8     border-color: rgb({{ r }}, {{ g }}, {{ b }});
9   }
10
11   #review_preview_{{ r }}_{{ g }}_{{ b }}.review_fave {
12     background: rgba({{ r }}, {{ g }}, {{ b }}, 0.2);
13     border-color: rgb({{ r }}, {{ g }}, {{ b }});
14   }
15
16   #review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
17     background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
18   }
19 </style>
20
21 <div class="review_preview {% if review_entry.review.rating == 5 %}review_fave{% endif %}"
22 id="review_preview_{{ r }}_{{ g }}_{{ b }}">
23   <a href="/{{ review_entry.out_path() }}">
24     <div class="book_thumbnail">
25       {% set book = review_entry.book %}
26       {% include "_book_cover.html" %}
27     </div>
28
29     <div class="book_metadata">
30       <p class="title">{{ review_entry.book.title | smartypants | safe }}</p>
31       <p>
32         <small>
33           by {{ review_entry.book.author }}
34           {%- if review_entry.book.publication_year %}
35             ({{ review_entry.book.publication_year}})
36           {%- endif -%}
37             <br/>
38           {% if review_entry.review.date_read %}
39           read {{ review_entry.review.date_read | render_date }}
40             <br/>
41           {% endif %}
42           {% if review_entry.review.rating %}
43             {% for _ in range(review_entry.review.rating) %}
44             ★
45             {% endfor %}
46             {% for _ in range(5 - review_entry.review.rating) %}
47             ☆
48             {% endfor %}
49           {% endif %}
50           {% if review_entry.review.did_not_finish %}
51             (did not finish)
52           {% endif %}
53         </small>
54       </p>
55     </div>
56   </a>
57 </div>