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

Compare commits

base: c0de:c8fd56837f3889cf222defaabc3d7584e3641f37
Branches Tags
c0de:master
c0de:2024-refactor
...
compare: c0de:1d24b8bcadfa05c3080a08b0f92edda01fcaaa51
Branches Tags
c0de:2024-refactor
c0de:master

4 Commits
c8fd56837f ... 1d24b8bcad

Author SHA1 Message Date
c0de 1d24b8bcad move reaction section to own template 2023-12-29 18:35:09 -06:00
c0de 129dfdd7c8 format the html 2023-12-29 18:34:55 -06:00
c0de bbc89f5969 have reactions enabled 2023-12-29 18:34:42 -06:00
c0de bb63b18391 Move the col class to gallery 2023-12-29 18:22:12 -06:00
5 changed files with 109 additions and 92 deletions
Show Stats 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>

39
templates/card_loading.html
View File

@ -1,23 +1,22 @@
<div class="col">
<div class="card" aria-hidden="true">
<div class="card-header">
<div class="d-flex align-items-center">
<strong role="status">Loading...</strong>
<div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>
</div>
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Loading..." preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Loading...</text></svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<div class="card" aria-hidden="true">
<div class="card-header">
<div class="d-flex align-items-center">
<strong role="status">Loading...</strong>
<div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>
</div>
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Loading..." preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Loading...</text></svg>
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
</div>
</div>

35
templates/card_reaction_section.html Normal file
View File

@ -0,0 +1,35 @@
{% 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 %}

4
templates/gallery.html
View File

@ -3,8 +3,8 @@
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" data-memory='{"PercentPossition": true}'>
{% for this in gallery_items %}
{% include 'card.html' %}
{% include 'card_loading.html' %}
<div class="col-md">{% include 'card.html' %}</div>
<div class="col-md">{% include 'card_loading.html' %}</div>
{% endfor %}
</div>

2
test.py
View File

@ -72,13 +72,13 @@ template_vars = {
},
"gallery": {
"max_reactions_per_card": 9,
"reactions_enabled": True,
},
"gallery_items": [
{
"src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
"headline": "Alopex-Vulpes",
"description": "An arctic fox :3",
"title": "fox",
"reactions": {
"0-circle": 1,
"1-circle": 2,