feat: map

src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css

@@ -27,8 +27,34 @@
     padding: 10px;
 }
 
+/*******/
+/* MAP */
+/*******/
+
 .map {
     border-radius: 8px;
     width:100%;
     height:100%
-}
+}
+
+.marker {
+    background-image: url('../img/logo_transparent.png');
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+}
+
+.animal-shelter-marker {
+    background-image: url('../img/animal_shelter.png');
+!important;
+}
+
+.maplibregl-popup {
+    max-width: 600px !important;
+}
+
+.map-in-content #map {
+    max-height: 500px;
+    width: 90%;
+}

src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-adoption-notice-minimal-map.html

@@ -0,0 +1,40 @@
+{% load custom_tags %}
+{% load i18n %}
+
+
+<h2 class="heading-card-adoption-notice title is-4">
+    <a href="{{ adoption_notice.get_absolute_url_bulma }}"> {{ adoption_notice.name }}</a>
+</h2>
+
+<div class="grid mb-0">
+    <div class="cell">
+        <!--- General Information --->
+        <div class="grid">
+
+            <div class="cell">
+
+                <p>
+                    <b><i class="fa-solid fa-location-dot"></i></b>
+                    {% 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>
+
+{% if adoption_notice.get_photo %}
+    <div class="adoption-notice-img img-small">
+        <img src="{{ MEDIA_URL }}/{{ adoption_notice.get_photo.image }}"
+             alt="{{ adoption_notice.get_photo.alt_text }}">
+    </div>
+{% endif %}
+
+
+
+

src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html

@@ -40,7 +40,7 @@
     {% for adoption_notice in adoption_notices_map %}
         {% if adoption_notice.location %}
             // create the popup
-            const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/bulma-partial-adoption-notice-minimal.html" %}`);
+            const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/bulma-partial-adoption-notice-minimal-map.html" %}`);
 
             // create DOM element for the marker
             const el_{{ forloop.counter }} = document.createElement('div');