Various UI stuff (mainly implement mookup)

Fix lint

Disable modern mode

Fixes

UI fixes

Fixes

Ignore .po~ files

Fixes

Fix homepage

Fixes

Fixes

Mix format

Fix tests

Fix tests (yeah…)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Map.vue

@@ -1,8 +1,9 @@
 <template>
-    <div style="height: 100%; width: 100%">
+    <div class="map-container">
         <l-map
-                :zoom="16"
-                style="height: 80%; width: 100%"
+                :zoom="mergedOptions.zoom"
+                :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
+                class="leaflet-map"
                 :center="[lat, lon]"
         >
             <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
@@ -22,9 +23,16 @@ import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
 @Component({
   components: { LTileLayer, LMap, LMarker, LPopup },
 })
-export default class Event extends Vue {
+export default class Map extends Vue {
   @Prop({ type: String, required: true }) coords!: string;
   @Prop({ type: String, required: false }) popup!: string;
+  @Prop({ type: Object, required: false }) options!: object;
+
+  defaultOptions: object = {
+    zoom: 15,
+    height: '100%',
+    width: '100%',
+  };
 
   mounted() {
     // this part resolve an issue where the markers would not appear
@@ -38,7 +46,21 @@ export default class Event extends Vue {
     });
   }
 
+  get mergedOptions(): object {
+    return { ...this.defaultOptions, ...this.options };
+  }
+
   get lat() { return this.$props.coords.split(';')[0]; }
   get lon() { return this.$props.coords.split(';')[1]; }
 }
 </script>
+<style lang="scss" scoped>
+    div.map-container {
+        height: 100%;
+        width: 100%;
+
+        .leaflet-map {
+            z-index: 20;
+        }
+    }
+</style>