diff --git a/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css b/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css index 748690b..95f40ea 100644 --- a/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css +++ b/src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css @@ -27,8 +27,34 @@ padding: 10px; } +/*******/ +/* MAP */ +/*******/ + .map { border-radius: 8px; width:100%; height:100% -} \ No newline at end of file +} + +.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%; +} diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-adoption-notice-minimal-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-adoption-notice-minimal-map.html new file mode 100644 index 0000000..bf0e5d7 --- /dev/null +++ b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-adoption-notice-minimal-map.html @@ -0,0 +1,40 @@ +{% load custom_tags %} +{% load i18n %} + + +

+ {{ adoption_notice.name }} +

+ +
+
+ +
+ +
+ +

+ + {% if adoption_notice.location %} + {{ adoption_notice.location }} + {% else %} + {{ adoption_notice.location_string }} + {% endif %}

+
+
+ {% include "fellchensammlung/partials/bulma-sex-overview.html" %} +
+
+
+
+ +{% if adoption_notice.get_photo %} +
+ {{ adoption_notice.get_photo.alt_text }} +
+{% endif %} + + + + diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html index 0360f86..a2eb0ad 100644 --- a/src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html +++ b/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');