From f50d0ae8739cf3877310802335c6449b5c3586ab Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Wed, 20 Mar 2024 14:04:51 +0100
Subject: [PATCH] refactor: Style photo display

---
 .../static/fellchensammlung/css/styles.css    | 20 +++++++++++++++++++
 .../detail-animal-partial.html                | 10 +++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index 9596be3..f7a22cc 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -1,3 +1,8 @@
+html, body {
+    margin: 0;
+    height: 100%;
+}
+
 .content-box {
     margin-top: 25px;
 }
@@ -321,4 +326,19 @@ h1 {
     .card-rule {
         width: 100%;
     }
+}
+
+.photos {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-photo {
+    flex: 1 16%;
+    margin: 10px;
+}
+
+.card-photo img {
+    max-width: 100%;
+    border-radius: 10%;
 }
\ No newline at end of file
diff --git a/src/fellchensammlung/templates/fellchensammlung/detail-animal-partial.html b/src/fellchensammlung/templates/fellchensammlung/detail-animal-partial.html
index 6c89087..06256ae 100644
--- a/src/fellchensammlung/templates/fellchensammlung/detail-animal-partial.html
+++ b/src/fellchensammlung/templates/fellchensammlung/detail-animal-partial.html
@@ -18,7 +18,11 @@
 </div>
 <p>{{ animal.description }}</p>
 <h2>Bilder</h2>
-{% for image in animal.photos_list %}
-<img src="/media/{{ image.image }}">
-{% endfor %}
+<div class="photos">
+    {% for image in animal.photos_list %}
+        <div class="card-photo">
+            <img src="/media/{{ image.image }}" alt="{{ image.alt_text }}">
+        </div>
+    {% endfor %}
+</div>
 </div>
\ No newline at end of file