feat: Reduce card size for map

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)])

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;

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>

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');