From 3dc011a22c31691c01a73b61c8b6223b94c53b0e Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 18 May 2025 14:07:31 +0200
Subject: [PATCH] refactor(bulma): Move animals to separate column

---
 .../details/bulma-detail-adoption-notice.html | 175 +++++++++---------
 .../partials/bulma-partial-animal-card.html   |   3 +-
 2 files changed, 91 insertions(+), 87 deletions(-)

diff --git a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
index 0ebc819..5345c25 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
@@ -6,106 +6,111 @@
 {% block title %}<title>{{ adoption_notice.name }}</title>{% endblock %}
 
 {% block content %}
-    <div class="card">
-        <div class="card-header">
-            <h1 class="card-header-title title is-2">{{ adoption_notice.name }}</h1>
-        </div>
-        <div class="card-content">
-            <div class="grid">
-                <div class="cell">
-                    <!--- General Information --->
+    <div class="columns">
+        <div class="column is-two-thirds">
+            <div class="card">
+                <div class="card-header">
+                    <h1 class="card-header-title title is-2">{{ adoption_notice.name }}</h1>
+                </div>
+                <div class="card-content">
                     <div class="grid">
+                        <div class="cell">
+                            <!--- General Information --->
+                            <div class="grid">
 
-                        <div class="cell">
-                            <h2><strong>{% translate "Ort" %}</strong></h2>
-                            <p>{% if adoption_notice.location %}
-                                {{ adoption_notice.location }}
-                            {% else %}
-                                {{ adoption_notice.location_string }}
-                            {% endif %}</p>
-                        </div>
-                        <div class="cell">
-                            {% include "fellchensammlung/partials/bulma-sex-overview.html" %}
+                                <div class="cell">
+                                    <h2><strong>{% translate "Ort" %}</strong></h2>
+                                    <p>{% if adoption_notice.location %}
+                                        {{ adoption_notice.location }}
+                                    {% else %}
+                                        {{ adoption_notice.location_string }}
+                                    {% endif %}</p>
+                                </div>
+                                <div class="cell">
+                                    {% include "fellchensammlung/partials/bulma-sex-overview.html" %}
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
 
-            <div class="columns">
-                <!--- Images --->
-                <div class="column block">
-                    <div class="card">
-                        <div class="grid card-content">
-                            <div class="cell" id="my-gallery">
-                                {% for photo in adoption_notice.get_photos %}
-                                    <a href="{{ MEDIA_URL }}/{{ photo.image }}"
-                                       data-pswp-width="{{ photo.image.width }}"
-                                       data-pswp-height="{{ photo.image.height }}"
-                                       target="_blank">
-                                        <img style="height: 12rem" src="{{ MEDIA_URL }}/{{ photo.image }}"
-                                             alt="{ photo.alt_text }}"/>
-                                    </a>
-                                {% endfor %}
+                    <div class="columns">
+                        <!--- Images --->
+                        <div class="column block">
+                            <div class="card">
+                                <div class="grid card-content">
+                                    <div class="cell" id="my-gallery">
+                                        {% for photo in adoption_notice.get_photos %}
+                                            <a href="{{ MEDIA_URL }}/{{ photo.image }}"
+                                               data-pswp-width="{{ photo.image.width }}"
+                                               data-pswp-height="{{ photo.image.height }}"
+                                               target="_blank">
+                                                <img style="height: 12rem" src="{{ MEDIA_URL }}/{{ photo.image }}"
+                                                     alt="{ photo.alt_text }}"/>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--- Description --->
+                        <div class="column block">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h1 class="card-header-title title is-2">{% translate "Beschreibung" %}</h1>
+                                </div>
+                                <div class="card-content">
+                                    <p class="expandable">{% if adoption_notice.description %}
+                                        {{ adoption_notice.description | render_markdown }}
+                                    {% else %}
+                                        {% translate "Keine Beschreibung angegeben" %}
+                                    {% endif %}
+                                    </p>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <!--- Description --->
-                <div class="column block">
-                    <div class="card">
-                        <div class="card-header">
-                            <h1 class="card-header-title title is-2">{% translate "Beschreibung" %}</h1>
+                <div class="card-footer">
+                    {% if has_edit_permission %}
+                        <div class="card-footer-item">
+                            <div class="column">
+                                <a class="button is-primary is-light"
+                                   href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">
+                                    {% translate 'Foto hinzufügen' %}
+                                </a>
+                            </div>
+                            <div class="card-footer-item">
+                                <a class="button is-primary"
+                                   href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
+                                    {% translate 'Bearbeiten' %}
+                                </a>
+                            </div>
                         </div>
-                        <div class="card-content">
-                            <p class="expandable">{% if adoption_notice.description %}
-                                {{ adoption_notice.description | render_markdown }}
-                            {% else %}
-                                {% translate "Keine Beschreibung angegeben" %}
-                            {% endif %}
-                            </p>
-                        </div>
-                    </div>
+                    {% endif %}
                 </div>
             </div>
-        </div>
-        <div class="card-footer">
-            {% if has_edit_permission %}
-                <div class="card-footer-item">
-                    <div class="column">
-                        <a class="button is-primary is-light"
-                           href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">
-                            {% translate 'Foto hinzufügen' %}
-                        </a>
-                    </div>
-                    <div class="card-footer-item">
-                        <a class="button is-primary"
-                           href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
-                            {% translate 'Bearbeiten' %}
-                        </a>
-                    </div>
-                </div>
-            {% endif %}
-        </div>
-    </div>
-    <div class="columns">
-        {% for animal in adoption_notice.animals %}
-            <div class="column">
-                {% include "fellchensammlung/partials/bulma-partial-animal-card.html" %}
+            <div class="block">
+                {% if adoption_notice.further_information %}
+                    <form method="get" action="{% url 'external-site' %}">
+                        <input type="hidden" name="url" value="{{ adoption_notice.further_information }}">
+                        <button class="button is-primary is-fullwidth" type="submit" id="submit">
+                            {{ adoption_notice.further_information | domain }} <i
+                                class="fa-solid fa-arrow-up-right-from-square"></i>
+                        </button>
+                    </form>
+                {% endif %}
             </div>
-        {% endfor %}
+        </div>
+        <div class="column">
+            {% for animal in adoption_notice.animals %}
+                <div class="block">
+                    {% include "fellchensammlung/partials/bulma-partial-animal-card.html" %}
+                </div>
+            {% endfor %}
+        </div>
     </div>
 
-    <div class="block">
-        {% if adoption_notice.further_information %}
-            <form method="get" action="{% url 'external-site' %}">
-                <input type="hidden" name="url" value="{{ adoption_notice.further_information }}">
-                <button class="button is-primary is-fullwidth" type="submit" id="submit">
-                    {{ adoption_notice.further_information | domain }} <i
-                        class="fa-solid fa-arrow-up-right-from-square"></i>
-                </button>
-            </form>
-        {% endif %}
-    </div>
+
 
     <div class="block">
         {% include "fellchensammlung/partials/bulma-partial-comment-section.html" %}
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 ec9a36f..456c8f2 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
@@ -4,7 +4,6 @@
     <div class="card-header">
         <h1 class="card-header-title">
             <a href="{% url 'animal-detail' animal_id=animal.pk %}">{{ animal.name }}</a>
-
         </h1>
 
         <div class="tags">
@@ -57,5 +56,5 @@
                href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
         </div>
     {% endif %}
-</div>
+
 </div>