From 9253fde2e5a7544d5289e4a464a625492c0c046f Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 15 Jun 2025 20:43:39 +0200
Subject: [PATCH] feat: Move tags to content and only show gallery when there
 are pictures

---
 .../partials/bulma-partial-animal-card.html   | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
index 049c40c..09be782 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
@@ -5,35 +5,27 @@
         <h1 class="card-header-title">
             <a href="{% url 'animal-detail' animal_id=animal.pk %}">{{ animal.name }}</a>
         </h1>
-
-        <div class="tags">
-            <div class="tag species">{{ animal.species }}</div>
-            <div class="tag sex">{{ animal.get_sex_display }}</div>
-        </div>
     </div>
     <div class="card-content">
+        <div class="grid">
+            <div class="tag cell">{{ animal.species }}</div>
+            <div class="tag cell">{{ animal.get_sex_display }}</div>
+        </div>
+        <div class="block">
+            <strong>{% trans 'Alter' %}</strong> {{ animal.hr_age }}
+            <strong>{% trans 'Alter' %}</strong> {{ animal.hr_age }}
+        </div>
         {% if animal.description %}
             <div class="content">
                 <p>{{ animal.description | render_markdown }}</p>
             </div>
         {% endif %}
 
-        <div class="gallery">
-            {% with photo=animal.get_photos.0 %}
-                <div class="main-photo">
-                    <a href="{{ MEDIA_URL }}{{ photo.image }}"
-                       data-pswp-width="{{ photo.image.width }}"
-                       data-pswp-height="{{ photo.image.height }}"
-                       target="_blank">
-                        <img src="{{ MEDIA_URL }}{{ photo.image }}"
-                             alt="{{ photo.alt_text }}">
-                    </a>
-                </div>
-            {% endwith %}
+        {% if animal.get_photos %}
 
-            <div class="thumbnail-row">
-                {% for photo in animal.get_photos|slice:"1:4" %}
-                    <div class="thumbnail">
+            <div class="gallery">
+                {% with photo=animal.get_photos.0 %}
+                    <div class="main-photo">
                         <a href="{{ MEDIA_URL }}{{ photo.image }}"
                            data-pswp-width="{{ photo.image.width }}"
                            data-pswp-height="{{ photo.image.height }}"
@@ -42,11 +34,26 @@
                                  alt="{{ photo.alt_text }}">
                         </a>
                     </div>
-                {% endfor %}
+                {% endwith %}
+
+                <div class="thumbnail-row">
+                    {% for photo in animal.get_photos|slice:"1:4" %}
+                        <div class="thumbnail">
+                            <a href="{{ MEDIA_URL }}{{ photo.image }}"
+                               data-pswp-width="{{ photo.image.width }}"
+                               data-pswp-height="{{ photo.image.height }}"
+                               target="_blank">
+                                <img src="{{ MEDIA_URL }}{{ photo.image }}"
+                                     alt="{{ photo.alt_text }}">
+                            </a>
+                        </div>
+                    {% endfor %}
+                </div>
             </div>
-        </div>
+        {% endif %}
     </div>
 
+
     <!--- Assume a user does not have edit permissions on animal if they have no other edit permission   --->
     {% if has_edit_permission %}
         <div class="card-footer">