Merge branch 'develop/sprint3' into release/0.2.x

Author: yvess

vue/src/components/LegendIcon.vue

@@ -0,0 +1,60 @@
+<template>
+  <svg
+    :class="isPrimary ? 'is-primary' : 'no-primary'"
+    viewBox="0 0 20 20"
+    width="20" height="20"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle v-if="shape === 'circle'"
+      cx="10" cy="10"
+      :r="attr.size * 10 - attr.strokeWidth / 2"
+      :stroke="attr.strokeColor"
+      :stroke-width="attr.strokeWidth"
+      :stroke-opacity="attr.strokeOpacity"
+      :fill="attr.fillColor"
+      :fill-opacity="attr.fillOpacity"
+    />
+    <rect v-else-if="shape === 'square'"
+      :x="'0'"
+      :y="'0'"
+      :width="attr.size * 20 - attr.strokeWidth"
+      :height="attr.size * 20 - attr.strokeWidth"
+      :stroke-width="attr.strokeWidth"
+      :stroke="attr.strokeColor"
+      :stroke-opacity="attr.strokeOpacity"
+      :fill="attr.fillColor"
+      :fill-opacity="attr.fillOpacity"
+      :transform="'translate('+
+        ( (20-(attr.size * 20 - attr.strokeWidth)) / 2) +
+        ' '+
+        ( (20-(attr.size * 20 - attr.strokeWidth)) / 2) +
+        ')'"
+    />
+    <line v-else-if="shape === 'line'"
+      x1="0" x2="20"
+      y1="10"
+      y2="10"
+      :stroke="attr.strokeColor"
+      :stroke-width="attr.strokeWidth"
+      :opacity="attr.strokeOpacity"
+    />
+  </svg>
+</template>
+
+<style>
+</style>
+
+
+<script>
+export default {
+  name: 'LegendIcon',
+  data() {
+    return {};
+  },
+
+  props: {
+    shape: String,
+    isPrimary: Boolean,
+    attr: Object
+  }
+};
+</script>

vue/src/components/SnapshotMeta.vue

@@ -18,19 +18,7 @@
         class="pa-0 mb-1"
         >
         <v-list-item-icon class="my-0 mr-2">
-          <v-icon v-if="item.shape === 'circle'"
-            :color="item.color"
-            :style="{ fontSize: 1.6 * item.size + 'em', opacity: item.opacity}">
-              mdi-circle-outline</v-icon>
-          <v-icon v-else-if="item.shape === 'square'"
-            :color="item.color"
-            :style="{ fontSize: 1.6 * item.size + 'em', opacity: item.opacity}">mdi-square</v-icon>
-          <span v-else-if="item.shape === 'line'" class="legend--line"
-            :style="{
-              backgroundColor: item.color,
-              height: 0.5 * item.size + 'em',
-              opacity: item.opacity}">&nbsp;
-          </span>
+          <legend-icon :shape="item.shape" :isPrimary="item.primary" :attr="item" />
         </v-list-item-icon>
         <v-list-item-content class="py-0">
           <v-list-item-title>
@@ -45,16 +33,24 @@
 
 <style>
 .legend .v-list-item--dense,
-.legend.v-list--dense .v-list-item {
+.legend.v-list--dense .v-list-item,
+.legend .v-list-item__content {
   min-height: 24px;
 }
+
 .v-list-item__icon {
   min-width: auto;
 }
+
+.legend .v-list-item__content {
+  padding-bottom: 4px !important;
+}
+
 .legend--line {
   margin: auto 0;
   width: 2em;
 }
+
 a.legend--hash,
 .legend--hash:visited,
 .legend--hash:hover,
@@ -65,6 +61,11 @@ a.legend--hash,
 </style>
 
 <script>
+import Vue from 'vue';
+import LegendIcon from './LegendIcon.vue';
+
+Vue.component('legend-icon', LegendIcon);
+
 export default {
   name: 'SnapshotMeta',
   data() {

vue/src/views/Snapshot.vue

@@ -33,8 +33,7 @@
       clipped="clipped"
       app
       width="320"
-      v-model="snapshotnav"
-      >
+      v-model="snapshotnav">
       <router-link id="logo" :to="'/' + $i18n.locale + '/'" class="px-4 py-1 d-block">
         <img alt="gemeindescan logo" height="50" src="@/assets/images/gemeindescan-logo.svg">
       </router-link>
@@ -68,9 +67,9 @@
       </div>
 
       <v-toolbar
-       width="320"
-       absolute
-       bottom>
+        width="320"
+        absolute
+        bottom>
         <div class="useractions">
           <user-actions noRequest="1" />
         </div>
@@ -109,7 +108,7 @@
         class="px-4 py-2"
         :style="'width:' + legendWidth"
         v-bind:class="{open: mapinfoopen}"
-      >
+        >
         <v-icon
           style="position: absolute; top:0; right:0;"
           class="pa-2"
@@ -133,13 +132,16 @@ body,
   height: calc(100vh - var(--vh-offset, 0px)) !important;
   z-index: 9999; /* must be above mapbox interface */
 }
+
 #snapshotnavContent {
   padding-bottom: 6em;
 }
+
 #map {
   position: relative;
   width: 100%;
 }
+
 #mapinfo {
   position: absolute;
   bottom: 2em;
@@ -157,6 +159,7 @@ body,
 #snapshotview .v-text-field--outlined fieldset {
   border-color: rgba(0, 0, 0, 0.12);
 }
+
 #snapshotview .gemeindesuche input::placeholder {
   color: #000;
   opacity: 1;
@@ -226,7 +229,7 @@ export default {
   methods: {
     getInitialSnapshotnav() {
       if (this.$route.params.hash) {
-        if (this.$vuetify.breakpoint.name === 'lg') {
+        if (['lg', 'xl'].includes(this.$vuetify.breakpoint.name)) {
           return true;
         }
         return false;
@@ -310,8 +313,9 @@ export default {
       this.$store.commit('setBfsname', result.data.municipality.fullname);
     },
 
-    createFeatureLayer(geojson) {
+    createFeatureLayer(geojson, attribution) {
       const geoJsonExtended = L.geoJson(geojson, {
+        attribution,
         pointToLayer: (feature, latlng) => {
           if (feature.properties.radius) {
             // properties need to match https://leafletjs.com/reference-1.6.0.html#circle
@@ -361,7 +365,9 @@ export default {
               attribution: this.geojson.views[0].spec.attribution
             }));
           } else if (layer.mediatype === 'application/vnd.simplestyle-extended') {
-            this.map.addLayer(this.createFeatureLayer(layer.data.features));
+            this.map.addLayer(this.createFeatureLayer(
+              layer.data.features, this.geojson.views[0].spec.attribution
+            ));
           }
         });
       } else if (this.bfsNumber) { // empty municipality