Compare commits
No commits in common. "1d24b8bcadfa05c3080a08b0f92edda01fcaaa51" and "c8fd56837f3889cf222defaabc3d7584e3641f37" have entirely different histories.
1d24b8bcad
...
c8fd56837f
@ -1,58 +1,75 @@
|
|||||||
<div class="card shadow-sm">
|
<div class="col">
|
||||||
|
<div class="card shadow-sm">
|
||||||
{% if this.headline and this.headline|length >= 1 and not this.title %}
|
{% if this.title and this.title|length >= 1 and not this.headline %}
|
||||||
<div class="card-header position-relative">
|
<div class="card-header position-relative">
|
||||||
|
{{ this.title }}
|
||||||
{{ this.headline }}
|
<a
|
||||||
|
href="#"
|
||||||
{% if gallery.reactions_enabled|default(False) %}
|
class="btn btn-link float-end"
|
||||||
<a href="#" class="btn btn-link float-end">
|
data-bs-toggle="tooltip"
|
||||||
<i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
|
data-bs-placement="top"
|
||||||
</a>
|
data-bs-title="Add a reaction"
|
||||||
{% endif %}
|
>
|
||||||
|
<i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
|
||||||
</div>
|
</a>
|
||||||
{% endif %}
|
</div>
|
||||||
|
|
||||||
<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 %}
|
{% endif %}
|
||||||
|
|
||||||
{% if gallery.reactions_enabled|default(False) %}
|
<img
|
||||||
<a href="#" class="btn btn-link position-absolute bottom-1 end-0">
|
class="card-image-top"
|
||||||
<i class="bi-heart-fill text-danger"></i>
|
src="{{ this.src }}"
|
||||||
</a>
|
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.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 %}
|
{% endif %}
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<p class="card-text">{{ this.description }}</p>
|
{% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
|
||||||
|
<div class="card-footer text-body-secondary text-end">
|
||||||
|
|
||||||
{% if this.subtext and this.subtext|length >= 1 %}
|
{% set reaction_iterations = namespace(value=0) %}
|
||||||
<p class="card-text">
|
{% for reaction, reaction_count in this.reactions|dictsort(by="value") %}
|
||||||
<small class="text-body-secondary">
|
{# Don't render reaction if we've reached the max number, or its counter is 0 (or lower) #}
|
||||||
{{ this.subtext }}
|
{% if reaction_iterations.value|int != gallery.max_reactions_per_card|int and reaction_count|int >= 1 %}
|
||||||
</small>
|
|
||||||
</p>
|
<button class="btn btn-link btn-sm disabled text-body position-relative">
|
||||||
{% endif %}
|
{# 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 %}
|
||||||
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|||||||
@ -1,22 +1,23 @@
|
|||||||
<div class="card" aria-hidden="true">
|
<div class="col">
|
||||||
<div class="card-header">
|
<div class="card" aria-hidden="true">
|
||||||
<div class="d-flex align-items-center">
|
<div class="card-header">
|
||||||
<strong role="status">Loading...</strong>
|
<div class="d-flex align-items-center">
|
||||||
<div class="spinner-border ms-auto" aria-hidden="true"></div>
|
<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>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
{% 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 %}
|
|
||||||
@ -3,8 +3,8 @@
|
|||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" data-memory='{"PercentPossition": true}'>
|
<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 %}
|
{% for this in gallery_items %}
|
||||||
<div class="col-md">{% include 'card.html' %}</div>
|
{% include 'card.html' %}
|
||||||
<div class="col-md">{% include 'card_loading.html' %}</div>
|
{% include 'card_loading.html' %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
2
test.py
2
test.py
@ -72,13 +72,13 @@ template_vars = {
|
|||||||
},
|
},
|
||||||
"gallery": {
|
"gallery": {
|
||||||
"max_reactions_per_card": 9,
|
"max_reactions_per_card": 9,
|
||||||
"reactions_enabled": True,
|
|
||||||
},
|
},
|
||||||
"gallery_items": [
|
"gallery_items": [
|
||||||
{
|
{
|
||||||
"src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
|
"src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
|
||||||
"headline": "Alopex-Vulpes",
|
"headline": "Alopex-Vulpes",
|
||||||
"description": "An arctic fox :3",
|
"description": "An arctic fox :3",
|
||||||
|
"title": "fox",
|
||||||
"reactions": {
|
"reactions": {
|
||||||
"0-circle": 1,
|
"0-circle": 1,
|
||||||
"1-circle": 2,
|
"1-circle": 2,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user