From 7d1a07227dcaaa14d7834da870f15d90776659bc Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 27 Sep 2024 15:42:40 +0200
Subject: [PATCH] feat: Use card design for map

---
 .../static/fellchensammlung/css/styles.css             |  5 +++++
 .../fellchensammlung/partials/partial-map.html         | 10 ++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index df103f7..a83b0d4 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -580,4 +580,9 @@ textarea {
 
 .maplibregl-popup {
     max-width: 200px;
+}
+
+.maplibregl-popup-content {
+    background-color: var(--background-three) !important;
+    border-radius: 8px !important;
 }
\ 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 9b24ab4..ab23df2 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
@@ -1,5 +1,6 @@
 {% load static %}
 {% load custom_tags %}
+{% load i18n %}
 
 <!-- add MapLibre JavaScript and CSS -->
 <script src="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.js"></script>
@@ -17,19 +18,16 @@
         zoom: 5
     }).addControl(new maplibregl.NavigationControl());
 
-    {% for an in adoption_notices %}
+    {% for adoption_notice in adoption_notices %}
         // create the popup
-        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`
-            <h1>{{ an.name }}</h1><p>{{ an.description }}</p>
-            `
-        );
+        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice.html" %}`);
 
         // create DOM element for the marker
         const el_{{ forloop.counter }} = document.createElement('div');
         el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
         el_{{ forloop.counter }}.classList.add('marker');
 
-        const location_popup_{{ forloop.counter }} = [{{ an.location.longitude | pointdecimal }}, {{ an.location.latitude | pointdecimal }}];
+        const location_popup_{{ forloop.counter }} = [{{ adoption_notice.location.longitude | pointdecimal }}, {{ adoption_notice.location.latitude | pointdecimal }}];
         // create the marker
         new maplibregl.Marker({element: el_{{ forloop.counter }}})
             .setLngLat(location_popup_{{ forloop.counter }})