From 26406ded52d46febd6e4e151ccae24bbeffc2b70 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 27 Sep 2024 16:34:44 +0200
Subject: [PATCH] feat: Reduce card size for map

---
 src/fellchensammlung/models.py                |  5 +++
 .../static/fellchensammlung/css/styles.css    |  4 +++
 .../partial-adoption-notice-minimal.html      | 33 +++++++++++++++++++
 .../partials/partial-map.html                 |  2 +-
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/fellchensammlung/templates/fellchensammlung/partials/partial-adoption-notice-minimal.html

diff --git a/src/fellchensammlung/models.py b/src/fellchensammlung/models.py
index eedd361..2e62827 100644
--- a/src/fellchensammlung/models.py
+++ b/src/fellchensammlung/models.py
@@ -186,6 +186,11 @@ class AdoptionNotice(models.Model):
         else:
             return self.location.latitude, self.location.longitude
 
+    @property
+    def description_short(self):
+        if len(self.description) > 200:
+            return self.description[:200] + f" ... [weiterlesen]({self.get_absolute_url()})"
+
     def get_absolute_url(self):
         """Returns the url to access a detailed page for the animal."""
         return reverse('adoption-notice-detail', args=[str(self.id)])
diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index ab5a8a9..c27d48f 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -427,6 +427,10 @@ select, .button {
     max-height: 250px;
 }
 
+.img-small img {
+    height: 100px;
+}
+
 .btn-notification {
     display: inline-block;
     position: relative;
diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-adoption-notice-minimal.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-adoption-notice-minimal.html
new file mode 100644
index 0000000..1765fd2
--- /dev/null
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-adoption-notice-minimal.html
@@ -0,0 +1,33 @@
+{% load custom_tags %}
+{% load i18n %}
+
+<div class="card">
+    <div>
+        <div class="header-card-adoption-notice">
+            <h1><a class="heading-card-adoption-notice"
+                   href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1>
+            <a class="adoption-card-report-link" href="{{ adoption_notice.get_report_url }}"><i
+                    class="fa-solid fa-flag"></i></a>
+        </div>
+        <p>
+            <b>Ort</b>
+            {% if adoption_notice.location %}
+                {{ adoption_notice.location }}
+            {% else %}
+                {{ adoption_notice.location_string }}
+            {% endif %}
+        </p>
+        <p>
+            {% if adoption_notice.description_short %}
+                {{ adoption_notice.description_short | render_markdown }}
+            {% endif %}
+        </p>
+        {% if adoption_notice.get_photo %}
+            <div class="adoption-notice-img img-small">
+                <img title="{{ adoption_notice.get_photo.title }}"
+                     src="{{ MEDIA_URL }}/{{ adoption_notice.get_photo.image }}"
+                     alt="{{ adoption_notice.get_photo.alt_text }}">
+            </div>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
index ab23df2..05de0ce 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
@@ -20,7 +20,7 @@
 
     {% for adoption_notice in adoption_notices %}
         // create the popup
-        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice.html" %}`);
+        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice-minimal.html" %}`);
 
         // create DOM element for the marker
         const el_{{ forloop.counter }} = document.createElement('div');