src/assets/js/utils.js

@@ -12,4 +12,117 @@ export function fileConvertSizeToMo(aSize){
   aSize = Math.abs(parseInt(aSize, 10));
   const def = [1024*1024, 'Mo', 1];
   return (aSize/def[0]).toFixed(def[2]);
-}
\ No newline at end of file
+}
+
+/**
+ * Determines the likely field delimiter in a CSV string by analyzing the first few lines.
+ * The function counts the occurrences of common delimiters such as commas, semicolons, and tabs.
+ * The most frequently and consistently occurring delimiter across the sampled lines is chosen as the likely delimiter.
+ *
+ * @param {string} text - The CSV string to analyze for determining the delimiter.
+ * @returns {string|false} The most likely delimiter character if one can be determined, or false if none is found.
+ */
+export function determineDelimiter(text) {
+  const lines = text.split('\n').slice(0, 5); // Analyze the first 5 lines
+  const delimiters = [',', ';', '\t']; // List of possible delimiters
+  let delimiterCounts = new Map(delimiters.map(d => [d, 0])); // Initialize a map to count delimiter occurrences
+
+  // Count the occurrences of each delimiter in each line
+  lines.forEach(line => {
+    delimiters.forEach(delimiter => {
+      const count = line.split(delimiter).length - 1; // Count the occurrences of the delimiter in the line
+      delimiterCounts.set(delimiter, delimiterCounts.get(delimiter) + count); // Update the count in the map
+    });
+  });
+
+  let mostCommonDelimiter = '';
+  let maxCount = 0;
+
+  // Determine the most common delimiter
+  delimiterCounts.forEach((count, delimiter) => {
+    if (count > maxCount) {
+      mostCommonDelimiter = delimiter; // Set the most common delimiter found so far
+      maxCount = count; // Update the maximum count found so far
+    }
+  });
+
+  return mostCommonDelimiter || false; // Return the most common delimiter or false if none is found
+}
+
+/**
+ * Parses a CSV string into an array of rows, where each row is an array of fields.
+ * The function correctly handles multiline fields enclosed in double quotes, removes
+ * carriage return characters (\r) at the end of lines, and allows for different field
+ * delimiters.
+ * 
+ * @param {string} text - The CSV string to be parsed.
+ * @param {string} delimiter - The field delimiter character (default is comma ',').
+ * @returns {Array<Array<string>>} An array of rows, each row being an array of fields.
+ */
+export function parseCSV(text, delimiter = ',') {
+  let rows = [];     // This will hold the parsed rows
+  let row = [];      // Temporary array to hold the fields of the current row
+  let field = '';    // Temporary string to hold the current field
+  let inQuotes = false; // Boolean to track whether we are inside quotes
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]; // Current character
+
+    if (char === '"' && text[i - 1] !== '\\') {
+      inQuotes = !inQuotes; // Toggle the inQuotes flag if not escaped
+    } else if (char === delimiter && !inQuotes) {
+      // If the current character is the delimiter and we are not inside quotes,
+      // add the field to the row and reset the field variable
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      field = '';
+    } else if (char === '\n' && !inQuotes) {
+      // If the current character is a newline and we are not inside quotes,
+      // add the field to the row, add the row to the list of rows,
+      // and reset the field and row variables
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      rows.push(row);
+      row = [];
+      field = '';
+    } else {
+      // If the current character is part of a field, add it to the field variable
+      field += char;
+    }
+  }
+
+  // After the loop, check if there's a remaining field or row to be added
+  if (field) {
+    row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+    rows.push(row);
+  }
+
+  return rows; // Return the parsed rows
+}
+
+/**
+ * Checks if the values in 'lon' and 'lat' columns are decimal numbers in the provided CSV data.
+ *
+ * @param {Array<string>} headers - The array of headers from the CSV file.
+ * @param {Array<Array<string>>} data - The CSV data as an array of rows, each row being an array of field values.
+ * @returns {boolean} True if 'lon' and 'lat' are found and their values are decimal numbers, false otherwise.
+ */
+export function checkLonLatValues(headers, data) {
+  const lonIndex = headers.indexOf('lon');
+  const latIndex = headers.indexOf('lat');
+
+  // Check if both 'lon' and 'lat' headers are found
+  if (lonIndex === -1 || latIndex === -1) {
+    return false;
+  }
+
+  // Function to check if a string is a decimal number
+  const isDecimal = (str) => !isNaN(str) && str.includes('.');
+
+  for (const row of data) {
+    // Check if 'lon' and 'lat' values are decimal numbers
+    if (!isDecimal(row[lonIndex]) || !isDecimal(row[latIndex])) {
+      return false;
+    }
+  }
+
+  return true;
+}

src/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css

-/* required styles */
-/* For input, we add the strong #map selector to avoid conflicts with semantic-ui */
-
-#map .leaflet-control-geocoder {
-  border-radius: 4px;
-  background: white;
-  min-width: 26px;
-  min-height: 26px;
-}
-
-.leaflet-touch .leaflet-control-geocoder {
-  min-width: 30px;
-  min-height: 30px;
-}
-
-.leaflet-control-geocoder a,
-.leaflet-control-geocoder .leaflet-control-geocoder-icon {
-  border-bottom: none;
-  display: inline-block;
-}
-
-.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
-  width: inherit;
-  height: inherit;
-  line-height: inherit;
-}
-
-.leaflet-control-geocoder a:hover,
-.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
-  border-bottom: none;
-  display: inline-block;
-}
-
-.leaflet-control-geocoder-form {
-  display: none;
-  vertical-align: middle;
-}
-.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
-  display: inline-block;
-}
-#map .leaflet-control-geocoder-form input {
-  font-size: 120%;
-  border: 0;
-  background-color: transparent;
-  width: 246px;
-}
-
-.leaflet-control-geocoder-icon {
-  border-radius: 4px;
-  width: 26px;
-  height: 26px;
-  border: none;
-  background-color: white;
-  background-image: url(./images/geocoder.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-}
-
-.leaflet-touch .leaflet-control-geocoder-icon {
-  width: 30px;
-  height: 30px;
-}
-
-.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
-  background-image: url(./images/throbber.gif);
-}
-
-.leaflet-control-geocoder-form-no-error {
-  display: none;
-}
-
-#map .leaflet-control-geocoder-form input:focus {
-  outline: none;
-}
-
-.leaflet-control-geocoder-form button {
-  display: none;
-}
-.leaflet-control-geocoder-error {
-  margin-top: 8px;
-  margin-left: 8px;
-  display: block;
-  color: #444;
-}
-.leaflet-control-geocoder-alternatives {
-  display: block;
-  width: 272px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.leaflet-control-geocoder-alternatives-minimized {
-  display: none;
-  height: 0;
-}
-.leaflet-control-geocoder-alternatives li {
-  white-space: nowrap;
-  display: block;
-  overflow: hidden;
-  padding: 5px 8px;
-  text-overflow: ellipsis;
-  border-bottom: 1px solid #ccc;
-  cursor: pointer;
-}
-
-.leaflet-control-geocoder-alternatives li a,
-.leaflet-control-geocoder-alternatives li a:hover {
-  width: inherit;
-  height: inherit;
-  line-height: inherit;
-  background: inherit;
-  border-radius: inherit;
-  text-align: left;
-}
-
-.leaflet-control-geocoder-alternatives li:last-child {
-  border-bottom: none;
-}
-.leaflet-control-geocoder-alternatives li:hover,
-.leaflet-control-geocoder-selected {
-  background-color: #f5f5f5;
-}
-
-
-/* Custom style */
-.leaflet-control-geocoder-icon {
-  border-radius: 4px;
-  width: 35px;
-  height: 35px;
-}
-
-#map .leaflet-control-geocoder-form input {
-  height: 35px;
-}
-
-.leaflet-control-geocoder-alternatives li:first-of-type {
-  border-top: 1px solid #ccc;
-}
-
-.leaflet-control-geocoder-address-item {
-	font-weight: 600;
-}
-
-.leaflet-control-geocoder-address-detail {
-	font-size: 12px;
-	font-weight: normal;
-}
-
-.leaflet-control-geocoder-address-context {
-	color: #666;
-	font-size: 12px;
-	font-weight: lighter;
-}

src/assets/resources/leaflet-control-geocoder-1.13.0/images/geocoder.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file

src/assets/styles/base.css

 /* ---------------------------------- */
-            /* APP */
+/* APP */
 /* ---------------------------------- */
 
 body {
-  height:100%;
-  width:100%;
+  height: 100%;
+  width: 100%;
   margin: 0;
 }
 
 #app {
   position: relative;
-  min-height: 100vh; /* keep the space for loader, before page contents are injected */
-  display: flex;          /* used to fix height on sticky header and footer */
-  flex-direction: column; /* used to fix height on sticky header and footer */
+  min-height: 100vh;
+  /* keep the space for loader, before page contents are injected */
+  display: flex;
+  /* used to fix height on sticky header and footer */
+  flex-direction: column;
+  /* used to fix height on sticky header and footer */
 }
 
 #app-header {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: #373636;
+  background: var(--header-color, #373636);
+
+  .ui.inverted.menu {
+    background: var(--header-color, #373636);
+  }
+
+  .item {
+    background: var(--header-color, #373636);
+  }
 }
 
 #app-content {
   overflow: auto;
-  flex: 1 0 auto; /* used to fix height on sticky header and footer */
-  height: 61px; /* value by default of the header, defined here to be sync with anchor below */
-  position: relative; /* for anchor below */
+  flex: 1 0 auto;
+  /* used to fix height on sticky header and footer */
+  min-height: 61px;
+  /* value by default of the header, defined here to be sync with anchor below, in order to keep the page stuck to top */
+  position: relative;
+  /* for anchor below */
 }
 
 #scroll-top-anchor {
@@ -46,16 +60,19 @@ body {
   width: 100%;
   height: 100%;
   min-height: 250px;
-  touch-action: none; /* workaround for modifying feature on mobile */
+  touch-action: none;
+  /* workaround for modifying feature on mobile */
 }
 
 #app-footer {
   overflow: hidden;
   background-color: #464646;
   text-align: center;
-  flex-shrink: 0; /* used to fix height on sticky header and footer */
+  flex-shrink: 0;
+  /* used to fix height on sticky header and footer */
   position: sticky;
   bottom: 0;
+  z-index: 1000;
 }
 
 #app-footer .ui.text.menu {
@@ -68,66 +85,88 @@ body {
 }
 
 #app-footer .ui.text.menu a.item:hover {
-  color: #1ab2b6;
+  color: var(--primary-color, #008c86);
 }
 
 #app-footer .ui.text.menu .item:not(:first-child) {
-    border-left: 1px solid rgba(34,36,38,.15);
+  border-left: 1px solid rgba(34, 36, 38, .15);
 }
+
 /* ---------------------------------- */
-            /* UTILS */
+/* UTILS */
 /* ---------------------------------- */
 .inline {
   display: inline;
 }
+
 .no-margin {
   margin: 0 !important;
 }
+
 .margin-top {
   margin-top: 1rem;
 }
+
 .margin-bottom {
   margin-bottom: 1rem;
 }
+
 .tiny-margin {
-  margin:  0.1rem 0 0.1rem 0.1rem !important;
+  margin: 0.1rem 0 0.1rem 0.1rem !important;
 }
+
 .tiny-margin-left {
-  margin-left:  0.1rem !important;
+  margin-left: 0.1rem !important;
 }
+
 .ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
 .nowrap {
   white-space: nowrap;
 }
+
 .important-flex {
   display: flex !important;
 }
+
 .pointer:hover {
-  cursor: pointer;
+  cursor: pointer !important;
 }
+
 .dimmer-anchor {
   position: relative;
 }
+
+.full-width {
+  width: 100%;
+}
+
 /* ---------------------------------- */
-            /* MAIN */
+/* MAIN */
 /* ---------------------------------- */
 
 .button-hover-orange:hover {
   background: #fbbd08 !important;
 }
+
 .button-hover-green:hover {
   background: #5bba21 !important;
 }
+
 .button-hover-red:hover {
   background: #ee2e24 !important;
 }
-.ui.button.button-hover-red:hover, .ui.button.button-hover-red:hover i.icon,
-.ui.button.button-hover-green:hover, .ui.button.button-hover-green:hover i.icon {
+
+.ui.button.button-hover-red:hover,
+.ui.button.button-hover-red:hover i.icon,
+.ui.button.button-hover-green:hover,
+.ui.button.button-hover-green:hover i.icon {
   color: #fff !important;
 }
+
 .ui.button.button-hover-red:hover i.icon,
 .ui.button.button-hover-green:hover i.icon {
   transition: all 0.5s ease !important;
@@ -138,7 +177,7 @@ body {
 }
 
 .ui.horizontal.divider {
-  color: #1ab2b6!important;
+  color: var(--primary-color, #008c86) !important;
   padding-top: 1.5em;
 }
 
@@ -146,7 +185,7 @@ body {
   display: none;
 }
 
-.ui.dropdown .menu > .header {
+.ui.dropdown .menu>.header {
   font-size: 1em;
   text-transform: none;
 }
@@ -156,28 +195,28 @@ body {
   overflow: auto;
 }
 
-.ui.dropdown .menu.text-wrap > .item {
+.ui.dropdown .menu.text-wrap>.item {
   white-space: normal;
   word-wrap: normal;
 }
 
-.ui.checkbox.disabled > input {
+.ui.checkbox.disabled>input {
   cursor: default !important;
 }
 
 
 /* Add basemap view */
-#form-layers .ui.buttons{
-  margin-bottom: 1rem;
+#form-layers button.button:not(:last-of-type) {
+  margin-right: 0.5em !important;
 }
 
-#form-layers .errorlist{
+#form-layers .errorlist {
   list-style: none;
   padding-left: 0;
   color: #9f3a38;
 }
 
-#form-layers .infoslist{
+#form-layers .infoslist {
   list-style: none;
   padding-left: 0;
   color: #38989f;
@@ -198,9 +237,9 @@ body {
 }
 
 /* Thicker borders for each basemap segment */
-#form-layers [data-segments=basemap_set-SEGMENTS] > .ui.segment {
+#form-layers [data-segments=basemap_set-SEGMENTS]>.ui.segment {
   margin-bottom: 3rem;
-  border: 1px solid rgba(34,36,38,.30);
+  border: 1px solid rgba(34, 36, 38, .30);
 }
 
 
@@ -220,25 +259,17 @@ body {
 
 
 /* ---------------------------------- */
-      /* LEAFLET DRAW TOOLBAR */
+/* LEAFLET DRAW TOOLBAR */
 /* ---------------------------------- */
 
 .leaflet-draw-toolbar a.leaflet-draw-draw-circlemarker,
 .leaflet-draw-toolbar a.leaflet-draw-draw-polyline,
 .leaflet-draw-toolbar a.leaflet-draw-draw-polygon {
-    background-color: #FFA19E;
-}
-
-
-/* ---------------------------------- */
-      /* LEAFLET*/
-/* ---------------------------------- */
-.leaflet-container {
-  background: #FFF;
+  background-color: #FFA19E;
 }
 
 /* ---------------------------------- */
-      /* ERROR LIST */
+/* ERROR LIST */
 /* ---------------------------------- */
 .errorlist {
   margin-top: 1rem;
@@ -250,16 +281,16 @@ body {
   padding: 0;
 }
 
-.errorlist > li {
+.errorlist>li {
   list-style: none;
   color: rgb(177, 55, 55);
-  border:  thin solid rgb(197, 157, 157);
+  border: thin solid rgb(197, 157, 157);
   border-radius: 3px;
   background-color: rgb(250, 241, 242);
   padding: 0.5rem 1rem;
 }
 
-.infoslist > li {
+.infoslist>li {
   list-style: none;
   color: #38989f;
   border-radius: 3px;
@@ -268,7 +299,7 @@ body {
 }
 
 /* ---------------------------------- */
-      /* PAGINATION */
+/* PAGINATION */
 /* ---------------------------------- */
 
 .custom-pagination {
@@ -278,12 +309,13 @@ body {
   font-size: 1.2em;
 }
 
-.custom-pagination > .page-item > .page-link {
+.custom-pagination>.page-item>.page-link {
   border: none;
   font-weight: 400;
   color: #008080;
 }
-.custom-pagination  > .page-item.active > .page-link {
+
+.custom-pagination>.page-item.active>.page-link {
   color: #008080;
   background-color: transparent;
   font-weight: bolder;
@@ -291,18 +323,20 @@ body {
   padding: 0.325em 0.75em;
   pointer-events: none;
 }
-.custom-pagination > .page-item.disabled > .page-link {
+
+.custom-pagination>.page-item.disabled>.page-link {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.custom-pagination > div > .page-item > .page-link {
+.custom-pagination>div>.page-item>.page-link {
   border: none;
   font-weight: 400;
   color: #008080;
   padding: 0.325em 0.75em;
 }
-.custom-pagination > div > .page-item.active > .page-link {
+
+.custom-pagination>div>.page-item.active>.page-link {
   color: #008080;
   background-color: transparent;
   font-weight: bolder;
@@ -311,28 +345,32 @@ body {
   padding: 0.325em 0.75em;
   pointer-events: none;
 }
-.custom-pagination > div > .page-item.disabled > .page-link {
+
+.custom-pagination>div>.page-item.disabled>.page-link {
   opacity: 0.5;
   padding: 0.325em 0.75em;
   pointer-events: none;
 }
 
 /* ---------------------------------- */
-      /* MULTISELECT */
+/* MULTISELECT */
 /* ---------------------------------- */
 .multiselect {
-  font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+  font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
 }
 
 .multiselect__tags {
   border: 1px solid #ced4da;
   border-radius: 0 !important;
-  font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+  font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif) !important;
   font-size: 1rem !important;
 }
-.multiselect__tags > .multiselect__input {
+
+.multiselect__tags>.multiselect__input {
   border: none !important;
   font-size: 1rem !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .multiselect__placeholder {
@@ -341,7 +379,10 @@ body {
   padding-top: 0;
 }
 
-.multiselect__single, .multiselect__tags, .multiselect__content, .multiselect__option {
+.multiselect__single,
+.multiselect__tags,
+.multiselect__content,
+.multiselect__option {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -353,6 +394,11 @@ body {
 .multiselect__select {
   z-index: 1 !important;
 }
+
+.multiselect__content-wrapper {
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
+}
+
 .multiselect__clear {
   position: absolute;
   right: 1px;
@@ -362,7 +408,10 @@ body {
   cursor: pointer;
   z-index: 9;
   background-color: #fff;
+  padding: 0 4px;
+  text-align: center;
 }
+
 .multiselect__spinner {
   z-index: 2 !important;
   background-color: #fff;
@@ -370,10 +419,11 @@ body {
   top: 2px;
 }
 
-.menu.projects > .item > .multiselect {
+.menu.projects>.item>.multiselect {
   min-height: 0px !important;
 }
-.menu.projects > .item > .multiselect > .multiselect__tags {
+
+.menu.projects>.item>.multiselect>.multiselect__tags {
   min-height: 0px !important;
 }
 
@@ -381,18 +431,28 @@ body {
   background: #fff !important;
   color: #35495e !important;
 }
+
 .multiselect__option--highlight {
   background: #f3f3f3 !important;
   color: #35495e !important;
 }
+
 .multiselect__option--selected.multiselect__option--highlight {
   background: #f3f3f3 !important;
   color: #35495e !important;
 }
+
+.multiselect__clear i.icon {
+  font-size: .75em;
+  color: #999;
+  margin: 0;
+}
+
 /* ---------------------------------- */
-      /* OVERRIDE SEMANTIC STYLES */
+/* OVERRIDE SEMANTIC STYLES */
 /* ---------------------------------- */
 
-.ui.page.dimmer { /* keep the dimmer above the dropdown (z-index 1001: above the map)*/
+.ui.page.dimmer {
+  /* keep the dimmer above the dropdown (z-index 1001: above the map)*/
   z-index: 1002;
-}
+}
\ No newline at end of file

src/assets/styles/openlayers-custom.css

@@ -7,7 +7,7 @@
 .ol-popup {
   position: absolute;
   background-color: white;
-  padding: 15px;
+  padding: 15px 5px 15px 15px;
   border-radius: 10px;
   bottom: 12px;
   left: -120px;
@@ -18,12 +18,12 @@
 }
 
 .ol-popup #popup-content {
-  white-space: nowrap;
   line-height: 1.3;
   font-size: .95em;
 }
 .ol-popup #popup-content h4 {
-  margin-right: .5em;
+  margin-right: 15px;
+  margin-bottom: .5em;
   color: #cacaca;
 }
 .ol-popup #popup-content h4,
@@ -34,6 +34,21 @@
 .ol-popup #popup-content div {
   color: #434343;
 }
+.ol-popup #popup-content .fields {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 10px;
+  display: block; /* overide .ui.form.fields rule conflict in featureEdit page */
+  margin: 0; /* overide .ui.form.fields rule conflict in featureEdit page */
+}
+.ol-popup #popup-content .divider {
+  margin-bottom: 0;
+}
+.ol-popup #popup-content #customFields h5 {
+  max-height: 20;
+  margin: .5em 0;
+}
 
 .ol-popup:after, .ol-popup:before {
   top: 100%;
@@ -109,3 +124,48 @@
 .map-container > #popup.ol-popup {
   display: none;
 }
+
+.ol-full-screen {
+  top: calc(1em + 60px);
+  right: 5px !important;
+}
+
+/* Geolocation button */
+div.geolocation-container {
+  position: absolute;
+  right: 6px;
+  z-index: 9;
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+  border-radius: 4px;
+}
+button.button-geolocation {
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  background-color: #fff;
+  color: rgb(39, 39, 39);
+  width: 30px;
+  height: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  border-radius: 2px;
+  line-height: 1.15;
+  cursor: pointer;
+}
+button.button-geolocation:hover {
+    background-color: #ebebeb;
+  }
+button.button-geolocation.tracking {
+  background-color: rgba(255, 145, 0, 0.904);
+  color: #fff;
+}
+button.button-geolocation i {
+  margin: 0;
+  vertical-align: top; /* strangely top is the only value that center at middle */
+  background-image: url(../img/geolocation-icon.png);
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file

src/assets/styles/sidebar-layers.css

@@ -13,6 +13,7 @@
   border: 1px solid grey;
   top: 0;
   position: absolute;
+  z-index: 9;
 }
 
 .sidebar-layers {
@@ -60,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -130,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {

src/components/Account/UserActivity.vue

@@ -16,70 +16,55 @@
               :key="item.id"
               class="item"
             >
-              <div class="content ellipsis nowrap">
-                <span v-if="item.event_type === 'create'">
-                  <a
-                    v-if="item.object_type === 'feature'"
-                    :href="modifyUrl(item.related_feature.feature_url || item.project_url)"
-                  >
-                    Signalement créé
-                  </a>
-                  <a
-                    v-else-if="item.object_type === 'comment'"
-                    :href="modifyUrl(item.related_feature.feature_url)"
-                  >
-                    Commentaire créé
-                  </a>
-                  <a
-                    v-else-if="item.object_type === 'attachment'"
-                    :href="modifyUrl(item.related_feature.feature_url)"
-                  >
-                    Pièce jointe ajoutée
-                  </a>
-                  <a
-                    v-else-if="item.object_type === 'project'"
-                    :href="modifyUrl(item.project_url)"
-                  >
-                    Projet créé
-                  </a>
-                </span>
-                <span v-else-if="item.event_type === 'update'">
-                  <a
-                    v-if="item.object_type === 'feature'"
-                    :href="modifyUrl(item.related_feature.feature_url || item.project_url)"
-                  >
-                    Signalement mis à jour
-                  </a>
-                  <a
-                    v-else-if="item.object_type === 'project'"
-                    :href="modifyUrl(item.project_url)"
-                  >à Projet mis à jour
-                  </a>
-                </span>
-                <span v-else-if="item.event_type === 'delete'">
-                  <span v-if="item.object_type === 'feature'">
-                    Signalement supprimé({{ item.data.feature_title }})
-                  </span>
-                  <em v-else>Événement inconnu</em>
-                </span>
-                <span
-                  v-if="item.object_type !== 'project'"
-                  class="meta"
+              <div :class="['content', { 'ellipsis nowrap': item.related_feature.title }]">
+                {{ getNotificationName(item.event_type, item.object_type) }}
+
+                <div 
+                  v-if="item.object_type === 'project'"
                 >
-                  ({{ item.related_feature.title ?
-                    item.related_feature.title :
-                    'signalement supprimé'
-                  }})
-                </span>
+                  <router-link
+                    v-if="item.project_title"
+                    :to="{
+                      name: 'project_detail',
+                      params: { slug: item.project_slug },
+                    }"
+                  >
+                    {{ item.project_title }}
+                  </router-link>
+                  <span
+                    v-else
+                    class="meta"
+                  ><del>{{ item.project_slug }}</del>&nbsp;(supprimé)</span>
+                </div>
+
+                <div v-else>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: item.related_feature.title,
+                      ...item
+                    }"
+                  />
+                  <span
+                    v-else
+                    class="meta"
+                  ><del>{{ item.data.feature_title || item.feature_id }}</del>&nbsp;(supprimé)</span>
+                </div>
+
                 <div class="description">
                   <em>[ {{ item.created_on }}
-                    <span v-if="user.is_authenticated">
+                    <span v-if="user">
                       , par {{ item.display_user }}
                     </span>
                     ]</em>
                 </div>
               </div>
             </div>
+
             <em
               v-if="!events || events.length === 0"
             >Aucune notification pour le moment.</em>
@@ -103,18 +88,28 @@
             >
               <div class="content">
                 <div>
-                  <a
-                    v-if="item.related_feature && item.related_feature.feature_url"
-                    :href="modifyUrl(item.related_feature.feature_url)"
-                  >{{ item.related_feature.title }}</a>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: item.related_feature.title,
+                      ...item
+                    }"
+                  />
                   <span
                     v-else
                     class="meta"
-                  ><del>{{ item.data.feature_title }}</del>&nbsp;(supprimé)</span>
+                  >
+                    <del>{{ item.data.feature_title || item.feature_id }}</del>&nbsp;(supprimé)
+                  </span>
                 </div>
+
                 <div class="description">
                   <em>[ {{ item.created_on }}
-                    <span v-if="user.is_authenticated">
+                    <span v-if="user">
                       , par {{ item.display_user }}
                     </span>
                     ]</em>
@@ -144,19 +139,35 @@
             >
               <div class="content">
                 <div>
-                  <a
-                    :href="modifyUrl(item.related_feature.feature_url)"
-                  >"{{ item.related_comment.comment }}"</a>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: quoteComment(item.data.comment),
+                      ...item
+                    }"
+                  />
+                  <span
+                    v-else
+                    class="meta"
+                  >
+                    <del>{{ item.data.comment }}</del>&nbsp;(supprimé)
+                  </span>
                 </div>
+
                 <div class="description">
                   <em>[ {{ item.created_on }}
-                    <span v-if="user.is_authenticated">
+                    <span v-if="user">
                       , par {{ item.display_user }}
                     </span>
                     ]</em>
                 </div>
               </div>
             </div>
+
             <em
               v-if="!comments || comments.length === 0"
             >Aucun commentaire pour le moment.</em>
@@ -171,11 +182,15 @@
 import { mapState } from 'vuex';
 
 import miscAPI from '@/services/misc-api';
+import FeatureFetchOffsetRoute from '@/components/Feature/FeatureFetchOffsetRoute';
 
 export default {
-
   name: 'UserActivity',
 
+  components: {
+    FeatureFetchOffsetRoute,
+  },
+
   data() {
     return {
       events: [],
@@ -196,6 +211,8 @@ export default {
 
   created(){
     this.getEvents();
+    // unset project to avoid interfering with generating query in feature links 
+    this.$store.commit('projects/SET_PROJECT', null);
   },
 
   methods: {
@@ -208,12 +225,37 @@ export default {
         });
     },
 
-    modifyUrl(url) {
-      if (url && this.isSharedProject) {
-        return url.replace('projet', 'projet-partage');
+    getNotificationName(eventType, objectType) {
+      if (eventType === 'create') {
+        if (objectType === 'feature') {
+          return 'Signalement créé';
+        } else if (objectType === 'comment') {
+          return 'Commentaire créé';
+        } else if (objectType === 'attachment') {
+          return 'Pièce jointe ajoutée';
+        } else if (objectType === 'project') {
+          return 'Projet créé';
+        }
+      } else if (eventType === 'update') {
+        if (objectType === 'feature') {
+          return 'Signalement mis à jour';
+        } else if (objectType === 'project') {
+          return 'Projet mis à jour';
+        }
+      } else if (eventType === 'delete') {
+        if (objectType === 'feature') {
+          return 'Signalement supprimé';
+        } else if (objectType === 'project') {
+          return 'Projet mis à jour';
+        } else {
+          return 'Événement inconnu';
+        }
       }
-      return url;
-    }
+    },
+
+    quoteComment(comment) {
+      return `"${comment}"`;
+    },
   }
 
 };

src/components/Account/UserProfile.vue

@@ -49,19 +49,41 @@
         </div>
       </div>
     </div>
+
+    <div
+      v-if="qrcode"
+      class="qrcode"
+    >
+      <img
+        :src="qrcode"
+        alt="qrcode"
+      >
+      <p>
+        Ce QR code vous permet de vous connecter à l'application mobile GéoContrib (bientôt disponible)
+      </p>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
+import QRCode from 'qrcode';
 
 export default {
 
   name: 'UserProfile',
 
+  data() {
+    return {
+      qrcode: null
+    };
+  },
+
   computed: {
     ...mapState([
-      'user'
+      'configuration',
+      'user',
+      'userToken'
     ]),
 
     userFullname() {
@@ -70,7 +92,46 @@ export default {
       }
       return null;
     },
+  },
+
+  created() {
+    this.GET_USER_TOKEN()
+      .then(async () => {
+        try {
+          const qrcodeData = {
+            url: `${this.configuration.VUE_APP_DJANGO_BASE}/geocontrib/`,
+            token: this.userToken
+          };
+          this.qrcode = await QRCode.toDataURL(JSON.stringify(qrcodeData));
+        } catch (err) {
+          console.error(err);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  },
+
+  methods: {
+    ...mapActions([
+      'GET_USER_TOKEN'
+    ])
   }
 
 };
 </script>
+
+<style scoped lang="less">
+.qrcode {
+  img {
+    display: block;
+    margin: auto;
+    width: 12rem;
+  }
+  p {
+    font-size: 0.8rem;
+    font-style: italic;
+    text-align: center;
+  }
+}
+</style>

src/components/Account/UserProjectsList.vue

@@ -107,8 +107,7 @@
       <Pagination
         v-if="count"
         :nb-pages="Math.ceil(count/10)"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        @page-update="changePage"
       />
     </div>
   </div>

src/components/AppHeader.vue

 <template>
-  <div id="app-header">
+  <div
+    id="app-header"
+    :class="$route.name"
+  >
     <div class="menu container">
       <div class="ui inverted icon menu">
         <router-link
@@ -8,7 +11,7 @@
           :class="['header item', {disable: isSharedProject}]"
         >
           <img
-            class="ui mini right spaced image"
+            class="ui right spaced image"
             alt="Logo de l'application"
             :src="logo"
           >
@@ -40,8 +43,8 @@
           />
           <div
             :class="[
-              'menu dropdown-list',
-              { 'visible transition': menuIsOpen },
+              'menu dropdown-list transition',
+              { 'visible': menuIsOpen },
             ]"
             style="z-index: 401"
           >
@@ -73,9 +76,7 @@
             </router-link>
             <router-link
               v-if="
-                project && isOnline &&
-                  (user.is_administrator || user.is_superuser || isAdmin)
-              "
+                project && isOnline && hasAdminRights"
               :to="{
                 name: 'project_mapping',
                 params: { slug: project.slug },
@@ -89,9 +90,7 @@
             </router-link>
             <router-link
               v-if="
-                project && isOnline &&
-                  (user.is_administrator || user.is_superuser || isAdmin)
-              "
+                project && isOnline && hasAdminRights"
               :to="{
                 name: 'project_members',
                 params: { slug: project.slug },
@@ -120,7 +119,7 @@
                 class="item ui label vertical no-hover"
               >
                 <!-- super user rights are higher than others -->
-                {{ user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
+                {{ user && user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
                 <br>
               </div>
               <div
@@ -152,6 +151,7 @@
                   v-else
                   class="item"
                   :href="SSO_LOGIN_URL"
+                  target="_self"
                 >Se connecter</a>
               </div>
             </div>
@@ -165,7 +165,7 @@
         <div class="desktop flex push-right-desktop">
           <div
             v-if="!isOnline"
-            class="item"
+            class="item network-icon"
           >
             <span
               data-tooltip="Vous êtes hors-ligne,
@@ -196,7 +196,7 @@
             class="item ui label vertical no-hover"
           >
             <!-- super user rights are higher than others -->
-            {{ user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
+            {{ user && user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
             <br>
           </div>
           <div
@@ -228,6 +228,7 @@
               v-else
               class="item log-item"
               :href="SSO_LOGIN_URL"
+              target="_self"
             >Se connecter</a>
           </div>
         </div>
@@ -273,13 +274,17 @@ export default {
       return this.configuration.VUE_APP_APPLICATION_NAME;
     },
     APPLICATION_ABSTRACT() {
-      return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
+      return this.configuration.VUE_APP_APPLICATION_ABSTRACT;
     },
     DISABLE_LOGIN_BUTTON() {
       return this.configuration.VUE_APP_DISABLE_LOGIN_BUTTON;
     },
     SSO_LOGIN_URL() {
-      return this.configuration.VUE_APP_LOGIN_URL;
+      if (this.configuration.VUE_APP_LOGIN_URL) { 
+        // add a next parameter with the pathname as expected by OGS to redirect after login 
+        return `${this.configuration.VUE_APP_LOGIN_URL}/?next=${encodeURIComponent(window.location.pathname)}`;
+      }
+      return null;
     },
 
     logo() {
@@ -297,6 +302,9 @@ export default {
         ? true
         : false;
     },
+    hasAdminRights() {
+      return this.user && (this.user.is_administrator || this.user.is_superuser) || this.isAdmin;
+    },
     isSharedProject() {
       return this.$route.path.includes('projet-partage');
     }
@@ -326,6 +334,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.menu.container .header {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  &> img {
+    max-height: 30px;
+  }
+}
+
 .vertical {
   flex-direction: column;
   justify-content: center;
@@ -345,6 +361,10 @@ export default {
   text-align: center;
 }
 
+.network-icon {
+  padding: .5rem !important;
+}
+
 .crossed-out {
   position: relative;
   padding: .2em;
@@ -361,13 +381,13 @@ export default {
   }
 }
 
-@media screen and (max-width: 985px) {
+@media screen and (max-width: 1110px) {
   .abstract{
     display: none !important;
   }
 }
 
-@media screen and (min-width: 560px) {
+@media screen and (min-width: 726px) {
   .mobile {
     display: none !important;
   }
@@ -382,23 +402,36 @@ export default {
   }
 }
 
-@media screen and (max-width: 590px) {
+@media screen and (max-width: 725px) {
   .desktop {
     display: none !important;
   }
   div.dropdown-list {
     width: 100vw;
-    left: -70px !important; /* should be the same than belows */
   }
-  .menu.container a.header {
-    width: 70px;
+  .menu.container .header {
+    //width: 70px;
+    width: 100%;
   }
-  .menu.container a.header > img {
+  #app-header:not(.index) {
+    /*  make the logo disappear on scroll */
+    position: sticky;
+    top: -90px;
+    height: 80px;
+    .menu.container {
+      /*  make the logo disappear on scroll */
+      height: 30px;
+      position: sticky;
+      top: 0;
+    }
+  }
+  .menu.container .header > img {
     margin: 0;
+    margin: auto;
+    max-width: 100%;
   }
   #menu-dropdown {
-    width: calc(100vw - 70px);
-    //justify-content: space-between;
+    width: 100%;
   }
   #menu-dropdown > span {
     text-overflow: ellipsis;
@@ -418,9 +451,11 @@ export default {
 
 /* keep above map controls or buttons */
 #app-header {
-  z-index: 1001;
+  z-index: 9999;
   .menu.container .ui.inverted.icon.menu { /* avoid adding space when messages are displayed */
     margin: 0;
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 .ui.menu .ui.dropdown .menu {

src/components/Dropdown.vue

@@ -29,7 +29,7 @@
         <span class="italic">{{ selected[1] }}</span>
       </div>
       <div v-else>
-        {{ selected }}
+        {{ selectedDisplay }}
       </div>
     </div>
     <i
@@ -44,7 +44,7 @@
         :key="option + index"
         :class="[
           filteredOptions ? 'item' : 'message',
-          { 'active selected': option.name === selected },
+          { 'active selected': option.name === selected || option.id === selected },
         ]"
         @click="select(index)"
       >
@@ -114,6 +114,14 @@ export default {
     placehold() {
       return this.input ? '' : this.placeholder;
     },
+
+    selectedDisplay() { // for project attributes, option are object and selected is an id
+      if (this.options[0] && this.options[0].name) {
+        const option = this.options.find(opt => opt.id === this.selected);
+        if (option) return option.name;
+      }
+      return this.selected;
+    }
   },
 
   created() {
@@ -167,7 +175,7 @@ export default {
     },
 
     clear() {
-      if (this.clearable) {
+      if (this.clearable && this.selected) {
         this.input = '';
         this.$emit('update:selection', '');
         if (this.isOpen) {

src/components/Feature/Detail/FeatureComments.vue

@@ -142,6 +142,21 @@
             {{ comment_form.attachment_file.errors }}
           </div>
         </div>
+        <div
+          v-if="enableKeyDocNotif"
+          class="field"
+        >
+          <div class="ui checkbox">
+            <input
+              id="is_key_document"
+              v-model="comment_form.attachment_file.isKeyDocument"
+              class="hidden"
+              name="is_key_document"
+              type="checkbox"
+            >
+            <label for="is_key_document">Envoyer une notification de publication aux abonnés du projet</label>
+          </div>
+        </div>
         <ul
           v-if="comment_form.attachment_file.errors"
           class="errorlist"
@@ -181,6 +196,10 @@ export default {
       default: () => {
         return [];
       }
+    },
+    enableKeyDocNotif: {
+      type: Boolean,
+      default: false,
     }
   },
 
@@ -191,6 +210,7 @@ export default {
           errors: null,
           title: '',
           file: null,
+          isKeyDocument: false
         },
         comment: {
           id_for_label: 'add-comment',
@@ -233,20 +253,23 @@ export default {
       if (this.validateForm()) {
         featureAPI
           .postComment({
-            featureId: this.currentFeature.feature_id,
+            featureId: this.currentFeature.feature_id || this.currentFeature.id,
             comment: this.comment_form.comment.value,
           })
           .then((response) => {
             if (response && this.comment_form.attachment_file.file) {
               featureAPI
                 .postCommentAttachment({
-                  featureId: this.currentFeature.feature_id,
+                  featureId: this.currentFeature.feature_id || this.currentFeature.id,
                   file: this.comment_form.attachment_file.file,
                   fileName: this.comment_form.attachment_file.fileName,
                   title: this.comment_form.attachment_file.title,
+                  isKeyDocument: this.comment_form.attachment_file.isKeyDocument,
                   commentId: response.data.id,
                 })
                 .then(() => {
+                  // Reset isKeyDocument to default
+                  this.comment_form.attachment_file.isKeyDocument = false;
                   this.confirmComment();
                 });
             } else {