From 9613f553e9af509c194c286597b6db56e229c829 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 29 Sep 2020 20:21:27 +0200
Subject: [PATCH] #19 OSM-Map Styling

---
 .../static/icons/map-marker-icon.png          | Bin 0 -> 4021 bytes
 django_lostplaces/lostplaces/static/main.css  |  20 ++++++++++++++++++
 .../templates/partials/osm_map.html           |   8 +++----
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 django_lostplaces/lostplaces/static/icons/map-marker-icon.png

diff --git a/django_lostplaces/lostplaces/static/icons/map-marker-icon.png b/django_lostplaces/lostplaces/static/icons/map-marker-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..969f763188b5aa0c8d9214236f39048ba7c8f094
GIT binary patch
literal 4021
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
XlyZlMr;H@K9S1B-ZA~hTN!0%VEyW?K

literal 0
HcmV?d00001

diff --git a/django_lostplaces/lostplaces/static/main.css b/django_lostplaces/lostplaces/static/main.css
index c940834..ed06ba1 100644
--- a/django_lostplaces/lostplaces/static/main.css
+++ b/django_lostplaces/lostplaces/static/main.css
@@ -1641,6 +1641,26 @@ body {
   .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
     visibility: visible; }
 
+.LP-Map .ol-attribution {
+  font-family: "Montserrat", Helvetica, sans-serif;
+  color: #565656; }
+  .LP-Map .ol-attribution a {
+    color: #C09F80; }
+    .LP-Map .ol-attribution a:hover, .LP-Map .ol-attribution a:focus {
+      color: #D7CEC7; }
+
+.LP-Map .ol-zoom-in, .LP-Map .ol-zoom-out {
+  background-color: #C09F80; }
+  .LP-Map .ol-zoom-in:hover, .LP-Map .ol-zoom-in:focus, .LP-Map .ol-zoom-out:hover, .LP-Map .ol-zoom-out:focus {
+    background-color: #565656; }
+
+.LP-Map .LP-Map__Popup {
+  font-family: "Montserrat", Helvetica, sans-serif;
+  color: #565656;
+  background-color: #f9f9f9;
+  padding: .5em;
+  border-radius: 2px; }
+
 .LP-MainContainer {
   margin: 0 auto;
   max-width: 1280px; }
diff --git a/django_lostplaces/lostplaces/templates/partials/osm_map.html b/django_lostplaces/lostplaces/templates/partials/osm_map.html
index bc45c53..e89a86f 100644
--- a/django_lostplaces/lostplaces/templates/partials/osm_map.html
+++ b/django_lostplaces/lostplaces/templates/partials/osm_map.html
@@ -1,6 +1,6 @@
-
-<div tabindex="1" id="map" class="map" style="height: 300px"></div>
-    <div id="info" class="map-popup"></div>
+{% load static %}
+<div tabindex="1" id="map" class="LP-Map map" style="height: 300px"></div>
+    <div id="info" class="map-popup LP-Map__Popup"></div>
 
         <script type="text/javascript">
             var map = new ol.Map({
@@ -38,7 +38,7 @@
                             anchorXUnits: 'fraction',
                             anchorYUnits: 'pixels',
                             scale: 0.3,
-                            src: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/128/map-marker-icon.png'
+                            src: '{% static "icons/map-marker-icon.png" %}'
                         })
                 })
             });