Merge branch 'master' into stage

Author: yvess

vue/src/App.vue

@@ -23,13 +23,31 @@ export default {
     return {};
   },
 
+  mounted() {
+    this.setInitialSnapshotnav();
+  },
+
   computed: {
     selectedLayout() {
       if (this.$route && this.$route.hasOwnProperty('meta') && this.$route.meta.hasOwnProperty('layout')) {
         return this.$route.meta.layout;
       }
       return LayoutDefault;
     }
+  },
+
+  methods: {
+    setInitialSnapshotnav() {
+      if (this.$route.params.hash) {
+        if (['lg', 'xl'].includes(this.$vuetify.breakpoint.name)) {
+          this.$store.commit('setSnapshotnav', false);
+        } else {
+          this.$store.commit('setSnapshotnav', true);
+        }
+      } else {
+        this.$store.commit('setSnapshotnav', false);
+      }
+    }
   }
 };
 </script>

vue/src/assets/styles/main.css

@@ -69,3 +69,22 @@ a {
 .content {
   max-width: 660px;
 }
+
+/* SNAPSHOTS */
+
+.snapshot-list-title {
+  color:black;
+  font-weight:700;
+}
+
+
+#snapshotnav {
+  height: calc(100vh - var(--vh-offset, 0px)) !important;
+  z-index: 9999; /* must be above mapbox interface */
+}
+
+#snapshotnavContent {
+  padding-bottom: 6em;
+}
+
+/* SNAPSHOTS END */

vue/src/components/SnapshotList.vue

@@ -13,12 +13,6 @@
   <v-list class="snapshotlist"
     three-line>
 
-      <v-subheader
-        v-if="snapshots.length != 0 && title"
-        style="color:black;font-weight:700;"
-        class="px-0">{{ title }}
-      </v-subheader>
-
       <v-list-item class="px-2 mb-4" dense
         v-for="snapshot in snapshots" :key="snapshot.id"
         :to="createRouteLink(snapshot.pk)">
@@ -64,11 +58,7 @@ export default {
       type: String,
       default: ''
     },
-    snapshots: Array,
-    title: {
-      type: String,
-      default: ''
-    }
+    snapshots: Array
   },
 
   methods: {

vue/src/components/SnapshotMap.vue

@@ -54,15 +54,6 @@ body,
   height: calc(100vh - var(--vh-offset, 0px));
 }
 
-#snapshotnav {
-  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%;
@@ -109,8 +100,7 @@ export default {
       legend: [],
       sources: [],
       layers: [],
-      geobounds: [],
-      snapshotnav: this.$store.snapshotnav
+      geobounds: []
     };
   },
 
@@ -120,7 +110,6 @@ export default {
   },
 
   created() {
-    this.setInitialSnapshotnav();
     this.geobounds = this.geoboundsIn;
   },
 
@@ -134,20 +123,19 @@ export default {
         case 'xs': return '280px';
         default: return '320px';
       }
+    },
+
+    snapshotnav: {
+      get() {
+        return this.$store.state.snapshotnav;
+      },
+      set(val) {
+        this.$store.commit('setSnapshotnav', val);
+      }
     }
   },
 
   methods: {
-    setInitialSnapshotnav() {
-      if (this.$route.params.hash) {
-        if (['lg', 'xl'].includes(this.$vuetify.breakpoint.name)) {
-          this.$store.commit('setSnapshotnav', true);
-        }
-        this.$store.commit('setSnapshotnav', false);
-      }
-      this.$store.commit('setSnapshotnav', true);
-    },
-
     createFeatureLayer(geojson, attribution) {
       const geoJsonExtended = L.geoJson(geojson, {
         attribution,

vue/src/views/Snapshot.vue

@@ -36,7 +36,8 @@
       id="snapshotnav"
       clipped="clipped"
       app
-      width="320">
+      width="320"
+      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>
@@ -47,34 +48,33 @@
         <search :dense="true" :term="municipalityName"/>
 
         <div class="nodata pb-8">
-          <div v-if="hash" class="smaller hint">
-            <h4>{{ $t('hasSnapshot.title') }}</h4>
-            <p>{{ $t('hasSnapshot.p1', { municipalityText: municipalityText }) }}</p>
-            <p>{{ $t('hasSnapshot.p2') }}</p>
-          </div>
-          <div v-else class="smaller hint">
+          <div v-if="!hash" class="smaller hint">
             <h4>{{ $t('noSnapshot.title') }}</h4>
             <p>{{ $t('noSnapshot.p1', { municipalityText: municipalityText }) }}</p>
             <p>{{ $t('noSnapshot.p2') }}</p>
           </div>
-          <div class="useractions">
-            <v-btn small block outlined color="primary">
-              <router-link key="signup" :to="'/' + $i18n.locale + '/signup/'">
-                {{ $t('calltoactionText', { municipalityText: municipalityText }) }}
-              </router-link>
-            </v-btn>
-          </div>
 
           <snapshot-list
             v-if="snapshotsMunicipality"
             :snapshots="snapshotsMunicipality"
           />
         </div>
 
+        <v-subheader
+          class="px-0 snapshot-list-title">{{ listtitleText }}
+        </v-subheader>
+
+        <div class="useractions">
+          <v-btn small block outlined color="primary">
+            <router-link key="signup" :to="'/' + $i18n.locale + '/signup/'">
+              {{ $t('calltoactionText', { municipalityText: municipalityText }) }}
+            </router-link>
+          </v-btn>
+        </div>
+
         <snapshot-list
           v-if="snapshotsExamples"
           :snapshots="snapshotsExamples"
-          :title="listtitleText"
         />
       </div>
 
@@ -169,6 +169,15 @@ export default {
         return this.$t('listtitleMore');
       }
       return this.$t('listtitle');
+    },
+
+    snapshotnav: {
+      get() {
+        return this.$store.state.snapshotnav;
+      },
+      set(val) {
+        this.$store.commit('setSnapshotnav', val);
+      }
     }
   },
 

vue/src/views/Workspace.vue

@@ -16,20 +16,20 @@
       id="snapshotnav"
       clipped="clipped"
       app
-      width="320">
+      width="320"
+      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>
 
       <v-divider />
 
       <div id="snapshotnavContent" class="ma-4">
-        <search :dense="true" :term="municipalityName"/>
 
         <div class="nodata pb-8">
           <div class="smaller hint">
             <h4>{{ title }}</h4>
-            <p>{{ description }}</p>
+            <p class="show-linebreaks">{{ description }}</p>
           </div>
         </div>
 
@@ -70,6 +70,10 @@
   font-weight: 900;
 }
 
+.show-linebreaks {
+  white-space: pre-wrap;
+}
+
 h4 {
   margin-bottom: 0.8em;
 }
@@ -113,6 +117,15 @@ export default {
         return this.$route.params.municipality;
       }
       return null;
+    },
+
+    snapshotnav: {
+      get() {
+        return this.$store.state.snapshotnav;
+      },
+      set(val) {
+        this.$store.commit('setSnapshotnav', val);
+      }
     }
   },