feat: Add animal cards to adoption display

src/fellchensammlung/migrations/0004_alter_animal_sex.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.3 on 2024-03-20 15:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('fellchensammlung', '0003_remove_image_uploaded_by'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='animal',
+            name='sex',
+            field=models.CharField(choices=[('M_N', 'neutered male'), ('M', 'male'), ('F_N', 'neutered female'), ('F', 'female')], max_length=20),
+        ),
+    ]

src/fellchensammlung/models.py

@@ -122,9 +122,9 @@ class Animal(models.Model):
     FEMALE_NEUTERED = "F_N"
     FEMALE = "F"
     SEX_CHOICES = {
-        MALE_NEUTERED: "male_neutered",
+        MALE_NEUTERED: "neutered male",
         MALE: "male",
-        FEMALE_NEUTERED: "female_neutered",
+        FEMALE_NEUTERED: "neutered female",
         FEMALE: "female",
     }
 
@@ -148,9 +148,18 @@ class Animal(models.Model):
         """Returns a human-readable age based on the date of birth."""
         return misc.age_as_hr_string(self.age)
 
-    @property
-    def photos_list(self):
-        """"""
+    def get_photo(self):
+        """
+        Selects a random photo from the animal
+        """
+        photos = self.photos.all()
+        if len(photos) > 0:
+            return photos[0]
+
+    def get_photos(self):
+        """
+        Selects all photos from the animal
+        """
         return self.photos.all()
 
     def get_absolute_url(self):

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -360,4 +360,24 @@ h1 {
 .card-adoption-notice img {
     max-width: 100%;
     border-radius: 10%;
-}
+}
+
+.animals {
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type:none;
+}
+
+.card-animal {
+    flex: 1 16%;
+    margin: 10px;
+    border-radius: 3%;
+    border: 4px grey solid;
+    padding: 5px;
+}
+
+.card-animal img {
+    max-width: 100%;
+    border-radius: 10%;
+    margin: 5px;
+}

src/fellchensammlung/templates/fellchensammlung/detail_adoption_notice.html

@@ -19,9 +19,9 @@
         </table>
     </div>
     <p>{{ adoption_notice.description }}</p>
-    <div class="list-animal">
+    <div class="animals">
         {% for animal in adoption_notice.animals %}
-            {% include "fellchensammlung/detail-animal-partial.html" %}
+            {% include "fellchensammlung/partial-animal-card.html" %}
         {% endfor %}
     </div>
 {% endblock %}

src/fellchensammlung/templates/fellchensammlung/partial-animal-card.html

@@ -0,0 +1,13 @@
+<div class="card-animal">
+    <div class="detail-animal-header">
+        <h1 class="inline">{{ animal.name }}</h1>
+        <div class="species">{{ animal.species }}</div>
+        <div class="species">{{ animal.get_sex_display }}</div>
+    </div>
+    {% if animal.get_photo %}
+        <img src="/media/{{ animal.get_photo.image }}" alt="{{ animal.get_photo.alt_text }}">
+        </div>
+    {% else %}
+        No photos
+    {% endif %}
+</div>