simple-s3-gallery/templates/card.html

62 lines
2.2 KiB
HTML
Raw Normal View History

2023-12-29 03:14:10 +00:00
<div class="col">
<div class="card shadow-sm">
2023-12-29 04:40:33 +00:00
<div class="card-header">
2023-12-29 17:24:33 +00:00
<span class="flex">{{ this.title }}</span>
2023-12-29 03:14:10 +00:00
<a
href="#"
2023-12-29 04:40:33 +00:00
class="btn btn-link float-end"
2023-12-29 03:14:10 +00:00
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Add a reaction"
>
2023-12-29 04:40:33 +00:00
<i class="bi-heart-fill text-end" style="font-size: 1rem; color: pink;"></i>
2023-12-29 03:14:10 +00:00
</a>
</div>
<img
class="card-image-top"
2023-12-29 17:24:33 +00:00
width="{{ this.width | default('100%') }}"
height="{{ this.height | default('100%') }}"
2023-12-29 17:24:33 +00:00
src="{{ this.src }}"
alt="{{ this.alt_text if this.alt_text else this.title }}"
2023-12-29 03:14:10 +00:00
/>
<div class="card-body">
2023-12-29 17:24:33 +00:00
<p class="card-text">{{ this.description | default('') }}</p>
2023-12-29 03:14:10 +00:00
</div>
2023-12-29 17:24:33 +00:00
{% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
2023-12-29 03:14:10 +00:00
<div class="card-footer text-body-secondary text-end">
2023-12-29 17:24:33 +00:00
{% set reaction_iterations = namespace(value=0) %}
{% for reaction, reaction_count in this.reactions|dictsort(by="value") %}
{# Don't render reaction if we've reached the max number, or its counter is 0 (or lower) #}
{% if reaction_iterations.value|int != gallery.max_reactions_per_card|int and reaction_count|int >= 1 %}
2023-12-29 17:24:33 +00:00
<button class="btn btn-link btn-sm disabled text-body position-relative">
{# TODO: Enable the button, and make clicking it toggle adding/removing that reaction to the counter, also color reaction button #}
2023-12-29 05:37:47 +00:00
<i class="bi-{{ reaction }}"></i>
2023-12-29 17:24:33 +00:00
{# Only show counter if more than 2 people gave the same reaction #}
{% if reaction_count|int >= 2 %}
2023-12-29 17:55:55 +00:00
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-body-inverted text-body-inverted">
2023-12-29 17:24:33 +00:00
{# Don't render reaction counts larger than 1000 #}
{{ reaction_count if reaction_count <= 999 else '1K+' }}
<span class="visually-hidden">
{{ reaction_count }} people reacted with {{ reaction }}
</span>
</span>
{% endif %}
</button>
{% set reaction_iterations.value = reaction_iterations.value + 1 %}
{% endif %}
{% endfor %}
2023-12-29 17:24:33 +00:00
{% set reaction_iterations = none %}
2023-12-29 03:14:10 +00:00
</div>
{% endif %}
2023-12-29 03:14:10 +00:00
</div>
</div>