From 6180e52f71f7c8cf9afbe8f342172448b543d06a Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Wed, 3 Jun 2020 20:33:26 +0100
Subject: [PATCH] Fix vertical offset of non-pin popups

---
 src/components/LDeviceLocationPopup.vue | 6 +++++-
 src/styles/_map.scss                    | 5 ++++-
 src/views/Map.vue                       | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/LDeviceLocationPopup.vue b/src/components/LDeviceLocationPopup.vue
index a1e96fd..399fed0 100644
--- a/src/components/LDeviceLocationPopup.vue
+++ b/src/components/LDeviceLocationPopup.vue
@@ -1,5 +1,5 @@
 <template>
-  <LPopup>
+  <LPopup :options="options">
     <div class="device">{{ deviceName }}</div>
     <div class="wrapper">
       <img
@@ -136,6 +136,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    options: {
+      type: Object,
+      default: () => {},
+    },
   },
   computed: {
     /**
diff --git a/src/styles/_map.scss b/src/styles/_map.scss
index a0b629e..7feafe1 100644
--- a/src/styles/_map.scss
+++ b/src/styles/_map.scss
@@ -4,7 +4,10 @@
 
   .leaflet-popup {
     filter: var(--drop-shadow);
-    margin-bottom: calc(var(--pin-width) * 1.5 + 20px);
+
+    &--for-pin {
+      margin-bottom: calc(var(--pin-width) * 1.5 + 20px);
+    }
 
     .leaflet-popup-content-wrapper {
       border-radius: 3px;
diff --git a/src/views/Map.vue b/src/views/Map.vue
index f163d71..07717fd 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -51,6 +51,7 @@
           :battery="l.batt"
           :speed="l.vel"
           :regions="l.inregions"
+          :options="{ className: 'leaflet-popup--for-pin' }"
         />
       </LMarker>
     </template>