move reaction section to own template

templates/card.html

@@ -1,61 +1,58 @@
-<div class="col">
-  <div class="card shadow-sm">
-    <div class="card-header">
-      <span class="flex">{{ this.title }}</span>
-      <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 text-end" style="font-size: 1rem; color: pink;"></i>
+<div class="card shadow-sm">
+
+{% if this.headline and this.headline|length >= 1 and not this.title %}
+  <div class="card-header position-relative">
+
+  {{ this.headline }}
+
+  {% 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"
-      width="{{ this.width | default('100%') }}"
-      height="{{ this.height | default('100%') }}"
     src="{{ this.src }}"
     alt="{{ this.alt_text if this.alt_text else this.title }}"
   />
 
-    <div class="card-body">
-      <p class="card-text">{{ this.description | default('') }}</p>
-    </div>
+{% if this.description and this.description|length >= 1 %}
+  <div class="card-body position-relative">
 
-    {% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
-    <div class="card-footer text-body-secondary text-end">
+  {% if this.title and this.title|length >= 1 %}
+    <h5 class="card-title">{{ this.title }}</h5>
 
-      {% 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>
+    {% if this.subtitle and this.subtitle|length >= 1 %}
+    <h6 class="card-subtitle mb-2 text-body-secondary">{{ this.subtitle }}</h6>
     {% endif %}
 
-      </button>
-
-          {% set reaction_iterations.value = reaction_iterations.value + 1 %}
+    {% 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 %}
-      {% endfor %}
-      {% set reaction_iterations = none %}
-    </div>
+  {% 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>

templates/card_loading.html

@@ -1,5 +1,4 @@
-<div class="col">
-  <div class="card" aria-hidden="true">
+<div class="card" aria-hidden="true">
   <div class="card-header">
     <div class="d-flex align-items-center">
       <strong role="status">Loading...</strong>
@@ -19,5 +18,5 @@
       <span class="placeholder col-8"></span>
     </p>
   </div>
-  </div>
 </div>
+

templates/card_reaction_section.html

@@ -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 %}

templates/gallery.html

@@ -1,10 +1,10 @@
 <div class="album py-5 bg-body-tertiary">
   <div class="container">
-    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+    <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>

test.py

@@ -19,12 +19,18 @@ template_vars = {
     "static": {
         "scripts": {
             "bootstrap": {
-                "src": "./templates/static/bootstrap.bundle.min.js",
+                "src": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js",
+            },
+            "theme": {
+                "src": "./templates/static/color-modes.js",
+                "place_in_head": True,
+            },
+            "masonry": {
+                "src": "https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"
             },
-            "theme": {"src": "./templates/static/color-modes.js", "place_in_head": True},
         },
         "css": {
-            "bootstrap": {"src": "./templates/static/bootstrap.min.css"},
+            "bootstrap": {"src": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"},
             "theme": {"src": "./templates/static/gallery.css"},
             "icons": {
                 "src": "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"
@@ -49,7 +55,7 @@ template_vars = {
         "extra_lines": ["This is another line", "This is yet another line"],
     },
     "call_to_action": {
-        "active": True,
+        "active": False,
         "header": "This is a call to action",
         "lead_text": "Some interesting text for the user",
         "buttons": [
@@ -66,12 +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,
@@ -109,8 +116,8 @@ template_vars = {
         {
             "src": "https://c0defox.es/paw-tail.svg",
             "alt_text": "a fox tail next to a paw print",
-            "title": ""
-        }
+            "title": "",
+        },
     ],
 }