c0de
/
simple-s3-gallery
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

format the html

This commit is contained in:
c0de 2023-12-29 18:34:55 -06:00
parent bbc89f5969
commit 129dfdd7c8
1 changed files with 52 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
templates/card.html
View File

@ -1,75 +1,58 @@
<div class="col">
<div class="card shadow-sm">
{% if this.title and this.title|length >= 1 and not this.headline %}
<div class="card-header position-relative">
{{ this.title }}
<a
href="#"
class="btn btn-link float-end"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Add a reaction"
>
<i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
</a>
</div>
{% endif %}
<div class="card shadow-sm">
<img
class="card-image-top"
src="{{ this.src }}"
alt="{{ this.alt_text if this.alt_text else this.title }}"
/>
{% if this.headline and this.headline|length >= 1 and not this.title %}
<div class="card-header position-relative">
{% if this.description and this.description|length >= 1 %}
<div class="card-body position-relative">
{% if this.headline and this.headline|length >= 1 %}
<h5 class="card-title">{{ this.headline }}</h5>
<a
href="#"
class="btn btn-link position-absolute bottom-1 end-0"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Add a reaction"
>
<i class="bi-heart-fill text-danger"></i>
</a>
{% endif %}
<p class="card-text">{{ this.description }}</p>
</div>
{% endif %}
{{ this.headline }}
{% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
<div class="card-footer text-body-secondary text-end">
{% 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 %}
<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 #}
<i class="bi-{{ reaction }}"></i>
{# Only show counter if more than 2 people gave the same reaction #}
{% if reaction_count|int >= 2 %}
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-body-inverted text-body-inverted">
{# 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 %}
{% set reaction_iterations = none %}
</div>
{% endif %}
{% if gallery.reactions_enabled|default(False) %}
<a href="#" class="btn btn-link float-end">
<i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
</a>
{% endif %}
</div>
{% endif %}
<img
class="card-image-top"
src="{{ this.src }}"
alt="{{ this.alt_text if this.alt_text else this.title }}"
/>
{% if this.description and this.description|length >= 1 %}
<div class="card-body position-relative">
{% if this.title and this.title|length >= 1 %}
<h5 class="card-title">{{ this.title }}</h5>
{% if this.subtitle and this.subtitle|length >= 1 %}
<h6 class="card-subtitle mb-2 text-body-secondary">{{ this.subtitle }}</h6>
{% endif %}
{% if gallery.reactions_enabled|default(False) %}
<a href="#" class="btn btn-link position-absolute bottom-1 end-0">
<i class="bi-heart-fill text-danger"></i>
</a>
{% endif %}
{% endif %}
<p class="card-text">{{ this.description }}</p>
{% if this.subtext and this.subtext|length >= 1 %}
<p class="card-text">
<small class="text-body-secondary">
{{ this.subtext }}
</small>
</p>
{% endif %}
</div>
{% endif %}
{# Don't render reaction section if disabled or max reactions are zero (or less) #}
{% if gallery.reactions_enabled|default(False) or gallery.max_reactions_per_card|int <= 0 %}
{% include 'card_reaction_section.html' %}
{% endif %}
</div>