Update location popup

src/App.vue

@@ -40,6 +40,10 @@
   </div>
 </template>
 
+<style lang="scss">
+@import "styles/main";
+</style>
+
 <script>
 import { mapActions, mapState } from "vuex";
 import { BookIcon, GithubIcon, TwitterIcon } from "vue-feather-icons";
@@ -104,7 +108,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import "styles/main";
-</style>

src/components/LDeviceLocationPopup.vue

@@ -1,37 +1,73 @@
 <template>
   <LPopup>
-    <img v-if="face" class="location-popup-face" :src="faceImageDataURI" />
-    <b v-if="name">{{ name }}</b>
-    <b v-else>{{ user }}/{{ device }}</b>
-    <div class="location-popup-detail">
-      <span class="mdi mdi-16px mdi-calendar-clock"></span>
-      {{ new Date(timestamp * 1000).toLocaleString() }}
-    </div>
-    <div class="location-popup-detail">
-      <span class="mdi mdi-16px mdi-crosshairs-gps"></span>
-      {{ lat }}, {{ lon }}, {{ alt }}m
-    </div>
-    <div v-if="address" class="location-popup-detail">
-      <span class="mdi mdi-16px mdi-map-marker"></span>
-      {{ address }}
-    </div>
-    <div v-if="typeof battery === 'number'" class="location-popup-detail">
-      <span class="mdi mdi-16px mdi-battery"></span>
-      {{ battery }} %
-    </div>
-    <div v-if="typeof speed === 'number'" class="location-popup-detail">
-      <span class="mdi mdi-16px mdi-speedometer"></span>
-      {{ speed }} km/h
+    <div v-if="name" class="device">{{ name }}</div>
+    <div v-else class="device">{{ user }}/{{ device }}</div>
+    <div class="wrapper">
+      <img v-if="face" :src="faceImageDataURI" />
+      <ul class="info-list">
+        <li>
+          <ClockIcon size="1x" />
+          {{ new Date(timestamp * 1000).toLocaleString() }}
+        </li>
+        <li>
+          <MapPinIcon size="1x" />
+          {{ lat }}, {{ lon }}, {{ alt }}m
+        </li>
+        <li v-if="address">
+          <HomeIcon size="1x" />
+          {{ address }}
+        </li>
+        <li v-if="typeof battery === 'number'">
+          <BatteryIcon size="1x" />
+          {{ battery }} %
+        </li>
+        <li v-if="typeof speed === 'number'">
+          <ZapIcon size="1x" />
+          {{ speed }} km/h
+        </li>
+      </ul>
     </div>
   </LPopup>
 </template>
 
+<style lang="scss" scoped>
+.device {
+  display: inline-block;
+  position: relative;
+  top: -5px;
+  color: var(--color-primary);
+  font-weight: bold;
+}
+.wrapper {
+  display: flex;
+  margin-top: 10px;
+  margin-right: 20px;
+
+  img {
+    align-self: start;
+    margin-right: 20px;
+  }
+}
+</style>
+
 <script>
+import {
+  BatteryIcon,
+  ClockIcon,
+  HomeIcon,
+  MapPinIcon,
+  ZapIcon,
+} from "vue-feather-icons";
 import { LPopup } from "vue2-leaflet";
 
 export default {
   name: "LDeviceLocationPopup",
   components: {
+    BatteryIcon,
+    ClockIcon,
+    HomeIcon,
+    MapPinIcon,
+    ZapIcon,
     LPopup,
   },
   props: {

src/styles/_base.scss

@@ -82,8 +82,14 @@ ul {
     list-style: none;
 
     li {
+      // https://stackoverflow.com/a/17158366/5952681
+      margin-left: 25px;
+      text-indent: -25px;
+
       .feather {
-        margin-right: 10px;
+        font-size: 16px;
+        margin-right: 8px;
+        vertical-align: middle;
       }
 
       a {
@@ -92,7 +98,7 @@ ul {
       }
 
       & + li {
-        margin-top: 20px;
+        margin-top: 15px;
       }
     }
   }

src/styles/_map.scss

@@ -4,14 +4,31 @@
 
   .leaflet-popup {
     filter: var(--drop-shadow);
+    margin-bottom: 25px;
 
     .leaflet-popup-content-wrapper {
       border-radius: 3px;
       box-shadow: none;
+
+      .leaflet-popup-content {
+        margin: 30px;
+      }
     }
 
     a.leaflet-popup-close-button {
-      padding: 5px 5px 0 0;
+      color: inherit;
+      width: auto;
+      height: auto;
+      padding: 10px;
+      margin-top: 15px;
+      margin-right: 15px;
+      border-radius: 100px;
+
+      &:hover,
+      &:focus {
+        background: rgba(0, 0, 0, 0.1);
+        color: inherit;
+      }
     }
   }
 
@@ -19,16 +36,3 @@
     box-shadow: none;
   }
 }
-
-.location-popup-face {
-  border-radius: 50%;
-  border: 2px solid var(--color-background);
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.location-popup-detail {
-  white-space: nowrap;
-}