From f5b89456ab4a565647048e92906eb2557f7533ed Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 18 May 2025 13:16:47 +0200
Subject: [PATCH] refactor(bulma): make thumbnail row use same width images and
 crop when necessary

---
 .../fellchensammlung/css/bulma-styles.css     | 24 +++++++-
 .../partials/bulma-partial-animal-card.html   | 60 ++++++++++---------
 2 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css b/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css
index 5f66771..1b2b027 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css
@@ -63,6 +63,28 @@
 IMAGES
  *****/
 
-.crop {
+#my-gallery .main-photo img {
+    width: 100%;
+    height: 300px;
     object-fit: cover;
+    border-radius: 6px;
 }
+
+.thumbnail-row {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.thumbnail img {
+    width: 100%;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+/* Ensure each thumbnail takes equal width */
+.thumbnail {
+    flex: 1;
+}
+
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 d042d32..ec9a36f 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
@@ -13,45 +13,49 @@
         </div>
     </div>
     <div class="card-content">
-        <div class="content">
-            {% if animal.description %}
+        {% if animal.description %}
+            <div class="content">
                 <p>{{ animal.description | render_markdown }}</p>
-            {% endif %}
-        </div>
-        <div class="cell block" id="my-gallery">
-            <div class="grid">
-                <div class="cell is-col-span-3">
-                    {% with photo=animal.get_photos.0 %}
-                        <a href="{{ MEDIA_URL }}/{{ photo.image }}"
-                           data-pswp-width="{{ photo.image.width }}"
-                           data-pswp-height="{{ photo.image.height }}"
-                           target="_blank">
-                            <img class="image is-square" src="{{ MEDIA_URL }}/{{ photo.image }}"
-                                 alt="{{ photo.alt_text }}">
-                        </a>
-                    {% endwith %}
+            </div>
+        {% endif %}
+
+        <div id="my-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>
-                {% for photo in animal.get_photos %}
-                    <div class="cell">
+            {% 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 class="image is-square crop" src="{{ MEDIA_URL }}/{{ photo.image }}"
+                            <img src="{{ MEDIA_URL }}/{{ photo.image }}"
                                  alt="{{ photo.alt_text }}">
                         </a>
                     </div>
                 {% endfor %}
             </div>
         </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">
-                <a class="card-footer-item button"
-                   href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
-                <a class="card-footer-item button"
-                   href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
-            </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">
+            <a class="card-footer-item button"
+               href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
+            <a class="card-footer-item button"
+               href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
+        </div>
+    {% endif %}
+</div>
 </div>