src/assets/js/utils.js

@@ -14,28 +14,115 @@ export function fileConvertSizeToMo(aSize){
   return (aSize/def[0]).toFixed(def[2]);
 }
 
-export function csvToJson(csv, delimiter) {
-  const result = [];
+/**
+ * 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
 
-  const allLines = csv.split('\n');
-  const headers = allLines[0].split(delimiter).map(el => {
-    return el.replace('\r', '');
+  // 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
+    });
   });
-  const [, ...lines] = allLines;
 
-  for (const line of lines) {
-    if (line) {
-      const obj = {};
-      const currentLine = line.split(delimiter).map(el => {
-        return el.replace('\r', '');
-      });
+  let mostCommonDelimiter = '';
+  let maxCount = 0;
 
-      for (let i = 0; i < headers.length; i++) {
-        obj[headers[i]] = currentLine[i];
-      }
+  // 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;
+    }
+  }
 
-      result.push(obj);
+  // 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 JSON.parse(JSON.stringify(result));
+
+  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/resources/semantic-ui-2.4.2/semantic.min.css

@@ -10,6 +10,7 @@
  */
 @import url('https://fonts.googleapis.com/css?family=Roboto Condensed:400,700,400italic,700italic&subset=latin');
+
 /*!
   * # Semantic UI 2.4.2 - Reset
   * http://github.com/semantic-org/semantic-ui/
@@ -271,7 +272,7 @@ body {
     overflow-x: hidden;
     min-width: 320px;
     background: #fff;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 14px;
     line-height: 1.4285em;
     color: #252525;
@@ -279,7 +280,7 @@ body {
 }
 h1, h2, h3, h4, h5 {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     line-height: 1.28571429em;
     margin: calc(2rem - .14285714em) 0 1rem;
     font-weight: 700;
@@ -420,7 +421,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
     vertical-align: baseline;
     background: #e0e1e2 none;
     color: rgba(0, 0, 0, .6);
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     margin: 0 .25em 0 0;
     padding: .78571429em 1.5em .78571429em;
     text-transform: none;
@@ -2924,7 +2925,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.teal.button, .ui.teal.buttons .button {
-    background-color: #00b5ad;
+    background-color: var(--primary-color, #00b5ad);
     color: #fff;
     text-shadow: none;
     background-image: none
@@ -2936,60 +2937,68 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.teal.button:hover, .ui.teal.buttons .button:hover {
-    background-color: #009c95;
+    background-color: var(--primary-highlight-color, #009c95)
+;
     color: #fff;
     text-shadow: none
 }
 .ui.teal.button:focus, .ui.teal.buttons .button:focus {
-    background-color: #008c86;
+    background-color: var(--primary-highlight-color, #008c86);
     color: #fff;
     text-shadow: none
 }
 .ui.teal.button:active, .ui.teal.buttons .button:active {
-    background-color: #00827c;
+    background: var(--primary-highlight-color, #00827c);
     color: #fff;
     text-shadow: none
 }
 .ui.teal.active.button, .ui.teal.button .active.button:active, .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active {
-    background-color: #009c95;
+    background-color: var(--primary-highlight-color, #009c95)
+;
     color: #fff;
     text-shadow: none
 }
 .ui.basic.teal.button, .ui.basic.teal.buttons .button {
-    -webkit-box-shadow: 0 0 0 1px #00b5ad inset!important;
-    box-shadow: 0 0 0 1px #00b5ad inset!important;
-    color: #00b5ad!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-color, #00b5ad) inset!important;
+    box-shadow: 0 0 0 1px var(--primary-color, #00b5ad) inset!important;
+    color: var(--primary-color, #00b5ad)!important
 }
 .ui.basic.teal.button:hover, .ui.basic.teal.buttons .button:hover {
     background: 0 0!important;
-    -webkit-box-shadow: 0 0 0 1px #009c95 inset!important;
-    box-shadow: 0 0 0 1px #009c95 inset!important;
-    color: #009c95!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-highlight-color, #009c95)
+ inset!important;
+    box-shadow: 0 0 0 1px var(--primary-highlight-color, #009c95)
+ inset!important;
+    color: var(--primary-highlight-color, #009c95)
+!important
 }
 .ui.basic.teal.button:focus, .ui.basic.teal.buttons .button:focus {
     background: 0 0!important;
-    -webkit-box-shadow: 0 0 0 1px #008c86 inset!important;
-    box-shadow: 0 0 0 1px #008c86 inset!important;
-    color: #009c95!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-highlight-color, #008c86) inset!important;
+    box-shadow: 0 0 0 1px var(--primary-highlight-color, #008c86) inset!important;
+    color: var(--primary-highlight-color, #009c95)
+!important
 }
 .ui.basic.teal.active.button, .ui.basic.teal.buttons .active.button {
     background: 0 0!important;
-    -webkit-box-shadow: 0 0 0 1px #009c95 inset!important;
-    box-shadow: 0 0 0 1px #009c95 inset!important;
-    color: #00827c!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-highlight-color, #009c95)
+ inset!important;
+    box-shadow: 0 0 0 1px var(--primary-highlight-color, #009c95)
+ inset!important;
+    color: var(--primary-highlight-color, #00827c)!important
 }
 .ui.basic.teal.button:active, .ui.basic.teal.buttons .button:active {
-    -webkit-box-shadow: 0 0 0 1px #00827c inset!important;
-    box-shadow: 0 0 0 1px #00827c inset!important;
-    color: #00827c!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-highlight-color, #00827c) inset!important;
+    box-shadow: 0 0 0 1px var(--primary-highlight-color, #00827c) inset!important;
+    color: var(--primary-highlight-color, #00827c)!important
 }
 .ui.buttons:not(.vertical)>.basic.teal.button:not(:first-child) {
@@ -3905,7 +3914,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.text.container {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     max-width: 700px!important;
     line-height: 1.5
 }
@@ -5146,7 +5155,7 @@ i.flag.zimbabwe:before, i.flag.zw:before {
     border: none;
     margin: calc(2rem - .14285714em) 0 1rem;
     padding: 0 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-weight: 700;
     line-height: 1.28571429em;
     text-transform: none;
@@ -5516,15 +5525,16 @@ a.ui.inverted.green.header:hover {
 }
 .ui.teal.header {
-    color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important
 }
 a.ui.teal.header:hover {
-    color: #009c95!important
+    color: var(--primary-highlight-color, #009c95)
+!important
 }
 .ui.teal.dividing.header {
-    border-bottom: 2px solid #00b5ad
+    border-bottom: 2px solid var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.header {
@@ -6027,7 +6037,7 @@ i.inverted.bordered.green.icon, i.inverted.circular.green.icon {
 }
 i.teal.icon {
-    color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important
 }
 i.inverted.teal.icon {
@@ -6035,7 +6045,7 @@ i.inverted.teal.icon {
 }
 i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -11654,7 +11664,7 @@ img.ui.image {
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     text-align: left;
     line-height: 1.21428571em;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     padding: .67857143em 1em;
     background: #fff;
     border: 1px solid rgba(34, 36, 38, .15);
@@ -12658,14 +12668,16 @@ a.ui.active.label:hover, a.ui.labels .active.label:hover {
 }
 .ui.teal.label, .ui.teal.labels .label {
-    background-color: #00b5ad!important;
-    border-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
+    border-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
 .ui.teal.labels .label:hover, a.ui.teal.label:hover {
-    background-color: #009c95!important;
-    border-color: #009c95!important;
+    background-color: var(--primary-highlight-color, #009c95)
+!important;
+    border-color: var(--primary-highlight-color, #009c95)
+!important;
     color: #fff!important
 }
@@ -12674,19 +12686,21 @@ a.ui.active.label:hover, a.ui.labels .active.label:hover {
 }
 .ui.teal.ribbon.label {
-    border-color: #00827c!important
+    border-color: var(--primary-highlight-color, #00827c)!important
 }
 .ui.basic.teal.label {
     background: none #fff!important;
-    color: #00b5ad!important;
-    border-color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important;
+    border-color: var(--primary-color, #00b5ad)!important
 }
 .ui.basic.teal.labels a.label:hover, a.ui.basic.teal.label:hover {
     background-color: #fff!important;
-    color: #009c95!important;
-    border-color: #009c95!important
+    color: var(--primary-highlight-color, #009c95)
+!important;
+    border-color: var(--primary-highlight-color, #009c95)
+!important
 }
 .ui.blue.label, .ui.blue.labels .label {
@@ -13236,7 +13250,7 @@ a.ui.basic.label:hover {
 .ui.list .list>.item .header, .ui.list>.item .header {
     display: block;
     margin: 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-weight: 700;
     color: #252525
 }
@@ -15298,11 +15312,11 @@ ol.ui.list li[value]:before {
 }
 .ui.teal.segment:not(.inverted) {
-    border-top: 2px solid #00b5ad!important
+    border-top: 2px solid var(--primary-color, #00b5ad)!important
 }
 .ui.inverted.teal.segment {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -15627,7 +15641,7 @@ ol.ui.list li[value]:before {
 }
 .ui.steps .step .title {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1.14285714em;
     font-weight: 700
 }
@@ -16174,7 +16188,7 @@ ol.ui.list li[value]:before {
 }
 .ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url] {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     margin: 0;
     outline: 0;
     -webkit-appearance: none;
@@ -17827,7 +17841,7 @@ ol.ui.list li[value]:before {
 }
 .ui.grid>.row>.teal.column, .ui.grid>.teal.column, .ui.grid>.teal.row {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff
 }
@@ -18237,7 +18251,7 @@ ol.ui.list li[value]:before {
     display: -ms-flexbox;
     display: flex;
     margin: 1rem 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     background: #fff;
     font-weight: 400;
     border: 1px solid rgba(34, 36, 38, .15);
@@ -19355,8 +19369,8 @@ ol.ui.list li[value]:before {
 }
 .ui.menu .teal.active.item, .ui.teal.menu .active.item {
-    border-color: #00b5ad!important;
-    color: #00b5ad!important
+    border-color: var(--primary-color, #00b5ad)!important;
+    color: var(--primary-color, #00b5ad)!important
 }
 .ui.blue.menu .active.item, .ui.menu .blue.active.item {
@@ -19391,13 +19405,13 @@ ol.ui.list li[value]:before {
 .ui.inverted.menu {
     border: 0 solid transparent;
-    background: #373636;
+    background: var(--primary-color, #373636);
     -webkit-box-shadow: none;
     box-shadow: none
 }
 .ui.inverted.menu .item, .ui.inverted.menu .item>a:not(.ui) {
-    background: 0 0;
+    background: var(--primary-color, 0 0);
     color: rgba(255, 255, 255, .9)
 }
@@ -19429,7 +19443,7 @@ ol.ui.list li[value]:before {
 }
 .ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover, .ui.link.inverted.menu .item:hover {
-    background: rgba(255, 255, 255, .08);
+    background: var(--primary-highlight-color, rgba(255, 255, 255, 0.08));
     color: #fff
 }
@@ -19439,12 +19453,12 @@ ol.ui.list li[value]:before {
 }
 .ui.inverted.menu .link.item:active, .ui.inverted.menu a.item:active {
-    background: #757575;
+    background: var(--primary-color, #757575);
     color: #fff
 }
 .ui.inverted.menu .active.item {
-    background: #757575;
+    background: var(--primary-highlight-color, rgba(255, 255, 255, 0.08));
     color: #fff!important
 }
@@ -19462,7 +19476,7 @@ ol.ui.list li[value]:before {
 }
 .ui.inverted.menu .active.item:hover {
-    background: #757575;
+    background: var(--primary-highlight-color, #757575);
     color: #fff!important
 }
@@ -19545,7 +19559,7 @@ ol.ui.list li[value]:before {
 }
 .ui.inverted.menu .teal.active.item, .ui.inverted.teal.menu {
-    background-color: #00b5ad
+    background-color: var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.menu .item:before {
@@ -20019,10 +20033,10 @@ ol.ui.list li[value]:before {
     padding: 1em 1.5em;
     line-height: 1.4285em;
     color: #252525;
-    -webkit-transition: opacity .5s ease, color .5s ease, background .5s ease, -webkit-box-shadow .5s ease;
-    transition: opacity .5s ease, color .5s ease, background .5s ease, -webkit-box-shadow .5s ease;
-    transition: opacity .5s ease, color .5s ease, background .5s ease, box-shadow .5s ease;
-    transition: opacity .5s ease, color .5s ease, background .5s ease, box-shadow .5s ease, -webkit-box-shadow .5s ease;
+    -webkit-transition: padding .5s ease, max-height .5s ease, opacity .5s ease, color .5s ease, background .5s ease, -webkit-box-shadow .5s ease;
+    transition: padding .5s ease, max-height .5s ease, opacity .5s ease, color .5s ease, background .5s ease, -webkit-box-shadow .5s ease;
+    transition: padding .5s ease, max-height .5s ease, opacity .5s ease, color .5s ease, background .5s ease, box-shadow .5s ease;
+    transition: padding .5s ease, max-height .5s ease, opacity .5s ease, color .5s ease, background .5s ease, box-shadow .5s ease, -webkit-box-shadow .5s ease;
     border-radius: .07142857rem;
     -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent;
     box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent
@@ -20038,7 +20052,7 @@ ol.ui.list li[value]:before {
 .ui.message .header {
     display: block;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-weight: 700;
     margin: -.14285714em 0 0 0
 }
@@ -21016,11 +21030,11 @@ ol.ui.list li[value]:before {
 }
 .ui.teal.table {
-    border-top: .2em solid #00b5ad
+    border-top: .2em solid var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.table {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -21766,7 +21780,7 @@ ol.ui.list li[value]:before {
 .ui.card>.content>.header, .ui.cards>.card>.content>.header {
     display: block;
     margin: '';
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     color: rgba(0, 0, 0, .85)
 }
@@ -22039,13 +22053,15 @@ ol.ui.list li[value]:before {
 }
 .ui.cards>.teal.card, .ui.teal.card, .ui.teal.cards>.card {
-    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5;
-    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5
+    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-color, #00b5ad), 0 1px 3px 0 #d4d4d5;
+    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-color, #00b5ad), 0 1px 3px 0 #d4d4d5
 }
 .ui.cards>.teal.card:hover, .ui.teal.card:hover, .ui.teal.cards>.card:hover {
-    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #009c95, 0 1px 3px 0 #bcbdbd;
-    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #009c95, 0 1px 3px 0 #bcbdbd
+    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-highlight-color, #009c95)
+, 0 1px 3px 0 #bcbdbd;
+    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-highlight-color, #009c95)
+, 0 1px 3px 0 #bcbdbd
 }
 .ui.blue.card, .ui.blue.cards>.card, .ui.cards>.blue.card {
@@ -22994,7 +23010,7 @@ ol.ui.list li[value]:before {
 .ui.items>.item>.content>.header {
     display: inline-block;
     margin: -.21425em 0 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-weight: 700;
     color: rgba(0, 0, 0, .85)
 }
@@ -23341,7 +23357,7 @@ ol.ui.list li[value]:before {
 }
 .ui.statistic>.value, .ui.statistics .statistic>.value {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 4rem;
     font-weight: 400;
     line-height: 1em;
@@ -23351,7 +23367,7 @@ ol.ui.list li[value]:before {
 }
 .ui.statistic>.label, .ui.statistics .statistic>.label {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1em;
     font-weight: 700;
     color: #252525;
@@ -23550,7 +23566,7 @@ ol.ui.list li[value]:before {
 }
 .ui.statistics .teal.statistic>.value, .ui.teal.statistic>.value, .ui.teal.statistics .statistic>.value {
-    color: #00b5ad
+    color: var(--primary-color, #00b5ad)
 }
 .ui.blue.statistic>.value, .ui.blue.statistics .statistic>.value, .ui.statistics .blue.statistic>.value {
@@ -23744,7 +23760,7 @@ ol.ui.list li[value]:before {
 .ui.accordion .title:not(.ui) {
     padding: .5em 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1em;
     color: #252525
 }
@@ -24305,7 +24321,7 @@ ol.ui.list li[value]:before {
 }
 .ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
-    background-color: #ee2e24!important
+    background-color: #2185d0!important
 }
 .ui.toggle.checkbox input:checked~.box:after, .ui.toggle.checkbox input:checked~label:after {
@@ -24319,7 +24335,7 @@ ol.ui.list li[value]:before {
 }
 .ui.toggle.checkbox input:focus:checked~.box:before, .ui.toggle.checkbox input:focus:checked~label:before {
-    background-color: #e90c00!important
+    background-color: #0d71bb!important
 }
 .ui.fitted.checkbox .box, .ui.fitted.checkbox label {
@@ -24605,7 +24621,7 @@ body.dimmable>.dimmer {
 .ui.dropdown>.dropdown.icon {
     position: relative;
     width: auto;
-    font-size: .85714286em;
+    font-size: .9em;
     margin: 0 0 0 1em
 }
@@ -24823,9 +24839,9 @@ select.ui.dropdown {
     z-index: 3;
     margin: -.78571429em;
     padding: .91666667em;
-    opacity: .8;
-    -webkit-transition: opacity .5s ease;
-    transition: opacity .5s ease
+    color: #999;
+    -webkit-transition: transform .2s ease;
+    transition: transform .2s ease
 }
 .ui.compact.selection.dropdown {
@@ -24942,7 +24958,7 @@ select.ui.dropdown {
 }
 .ui.active.selection.dropdown>.dropdown.icon, .ui.visible.selection.dropdown>.dropdown.icon {
-    opacity: '';
+    transform: rotate(180deg);
     z-index: 3
 }
@@ -25976,7 +25992,7 @@ select.ui.dropdown {
 .ui.modal>.header {
     display: block;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     background: #fff;
     margin: 0;
     padding: 1.25rem 1.5rem;
@@ -26593,7 +26609,7 @@ a.ui.nag {
 .ui.popup>.header {
     padding: 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1.14285714em;
     line-height: 1.2;
     font-weight: 700
@@ -27564,7 +27580,7 @@ a.ui.nag {
 }
 .ui.teal.progress .bar {
-    background-color: #00b5ad
+    background-color: var(--primary-color, #00b5ad)
 }
 .ui.teal.inverted.progress .bar {
@@ -27957,7 +27973,7 @@ a.ui.nag {
 .ui.search>.results .result .title {
     margin: -.14285714em 0 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-weight: 700;
     font-size: 1em;
     color: rgba(0, 0, 0, .85)
@@ -27979,7 +27995,7 @@ a.ui.nag {
 }
 .ui.search>.results>.message .header {
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1rem;
     font-weight: 700;
     color: #252525
@@ -28143,7 +28159,7 @@ a.ui.nag {
     width: 100px;
     white-space: nowrap;
     background: 0 0;
-    font-family: 'Roboto Condensed', Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-family: var(--font-family, 'Roboto Condensed', 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif);
     font-size: 1em;
     padding: .4em 1em;
     font-weight: 700;

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"
           >
@@ -22,8 +25,16 @@
           :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
           @click="menuIsOpen = !menuIsOpen"
         >
-          <!-- empty span to occupy space for style if no project -->
-          <span>
+          <div
+            v-if="!isOnline"
+            class="crossed-out mobile"
+          >
+            <i
+              class="wifi icon"
+              aria-hidden="true"
+            />
+          </div>
+          <span class="expand-center">
             <span v-if="project"> Projet : {{ project.title }} </span>
           </span>
           <i
@@ -32,8 +43,8 @@
           />
           <div
             :class="[
-              'menu dropdown-list',
-              { 'visible transition': menuIsOpen },
+              'menu dropdown-list transition',
+              { 'visible': menuIsOpen },
             ]"
             style="z-index: 401"
           >
@@ -65,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 },
@@ -81,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 },
@@ -112,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
@@ -144,6 +151,7 @@
                   v-else
                   class="item"
                   :href="SSO_LOGIN_URL"
+                  target="_self"
                 >Se connecter</a>
               </div>
             </div>
@@ -155,6 +163,23 @@
           </span>
         </div>
         <div class="desktop flex push-right-desktop">
+          <div
+            v-if="!isOnline"
+            class="item network-icon"
+          >
+            <span
+              data-tooltip="Vous êtes hors-ligne,
+                vos changements pourront être envoyés au serveur au retour de la connexion"
+              data-position="bottom right"
+            >
+              <div class="crossed-out">
+                <i
+                  class="wifi icon"
+                  aria-hidden="true"
+                />
+              </div>
+            </span>
+          </div>
           <router-link
             :is="isOnline ? 'router-link' : 'span'"
             v-if="user"
@@ -171,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
@@ -203,25 +228,26 @@
               v-else
               class="item log-item"
               :href="SSO_LOGIN_URL"
+              target="_self"
             >Se connecter</a>
           </div>
         </div>
       </div>
-      <MessageInfo />
+      <MessageInfoList />
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import MessageInfo from '@/components/MessageInfo';
+import MessageInfoList from '@/components/MessageInfoList';
 
 export default {
 
   name: 'AppHeader',
 
   components: {
-    MessageInfo
+    MessageInfoList
   },
 
   data() {
@@ -248,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() {
@@ -272,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');
     }
@@ -301,6 +334,111 @@ 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;
+}
+
+.flex {
+  display: flex;
+}
+
+/* keep above loader */
+#menu-dropdown {
+  z-index: 1001;
+}
+
+.expand-center {
+  width: 100%;
+  text-align: center;
+}
+
+.network-icon {
+  padding: .5rem !important;
+}
+
+.crossed-out {
+  position: relative;
+  padding: .2em;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 45%;
+    left: -8%;
+    width: 100%;
+    border-top: 2px solid #ee2e24;
+    transform: rotate(45deg);
+    box-shadow: 0px 0px 0px 1px #373636;
+    border-radius: 3px;
+  }
+}
+
+@media screen and (max-width: 1110px) {
+  .abstract{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 726px) {
+  .mobile {
+    display: none !important;
+  }
+  #app-header {
+    min-width: 560px;
+  }
+  .menu.container {
+    width: auto !important;
+  }
+  .push-right-desktop {
+    margin-left: auto;
+  }
+}
+
+@media screen and (max-width: 725px) {
+  .desktop {
+    display: none !important;
+  }
+  div.dropdown-list {
+    width: 100vw;
+  }
+  .menu.container .header {
+    //width: 70px;
+    width: 100%;
+  }
+  #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: 100%;
+  }
+  #menu-dropdown > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
 
 .menu.container {
   position: relative;
@@ -313,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 {
@@ -348,4 +488,4 @@ export default {
   height: 100% !important;
 }
 
-</style>
+</style>
\ No newline at end of file

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/ExtraForm.vue

+<template>
+  <div
+    :class="['field', { 'disabled': field.disabled }]"
+    :data-field_type="field.field_type"
+    data-test="extra-form"
+    name="extra-form"
+  >
+    <div
+      v-if="field && field.field_type === 'boolean'"
+      :class="['ui checkbox', { 'disabled': field.disabled }]"
+    >
+      <!-- JSON.parse is used in case of receiving a string 'true' or 'false'-->
+      <input
+        :id="field.name"
+        type="checkbox"
+        :checked="JSON.parse(field.value)"
+        :name="field.name"
+        @change="updateStore_extra_form"
+      >
+      <label :for="field.name">
+        {{ displayLabels ? field.label : '' }}
+      </label>
+    </div>
+
+    <template v-else>
+      <label
+        v-if="displayLabels"
+        :for="field.name"
+        :class="{ required: field.is_mandatory }"
+      >
+        {{ field.label }}
+      </label>
+
+      <input
+        v-if="field && field.field_type === 'char'"
+        :id="field.name"
+        :value="field.value"
+        type="text"
+        :name="field.name"
+        :required="field.is_mandatory"
+        @blur="updateStore_extra_form"
+      >
+
+      <textarea
+        v-else-if="field && field.field_type === 'text'"
+        :value="field.value"
+        :name="field.name"
+        :required="field.is_mandatory"
+        rows="3"
+        @blur="updateStore_extra_form"
+      />
+
+      <input
+        v-else-if="field && field.field_type === 'integer'"
+        :id="field.name"
+        :value="field.value"
+        type="number"
+        :name="field.name"
+        :required="field.is_mandatory"
+        @change="updateStore_extra_form"
+      >
+
+      <input
+        v-else-if="field && field.field_type === 'decimal'"
+        :id="field.name"
+        :value="field.value"
+        type="number"
+        step=".01"
+        :name="field.name"
+        :required="field.is_mandatory"
+        @change="updateStore_extra_form"
+      >
+
+      <input
+        v-else-if="field && field.field_type === 'date'"
+        :id="field.name"
+        :value="field.value"
+        type="date"
+        :name="field.name"
+        :required="field.is_mandatory"
+        @change="updateStore_extra_form"
+      >
+
+      <Dropdown
+        v-else-if="field && (field.field_type === 'list' || field.field_type === 'notif_group')"
+        :options="field.field_type === 'notif_group' ? usersGroupsFeatureOptions : field.options"
+        :selected="selected_extra_form_list"
+        :selection.sync="selected_extra_form_list"
+        :required="field.is_mandatory"
+        :search="true"
+        :clearable="true"
+      />
+
+      <div
+        v-else-if="field && field.field_type === 'multi_choices_list'"
+        class="checkbox_list"
+      >
+        <div
+          v-for="option in field.options"
+          :key="option.id || option"
+          class="ui checkbox"
+        >
+          <input
+            :id="option.id || option"
+            type="checkbox"
+            :checked="field.value && field.value.includes(option.id || option)"
+            :name="option.id || option"
+            @change="selectMultipleCheckbox"
+          >
+          <label :for="option.id || option">
+            {{ option.name || option }}
+          </label>
+        </div>
+      </div>
+
+      <Multiselect
+        v-else-if="field && field.field_type === 'pre_recorded_list'"
+        v-model="selectedPrerecordedValue"
+        :options="selectedPrerecordedListValues[field.options[0]] || []"
+        :options-limit="10"
+        :allow-empty="!field.is_mandatory"
+        track-by="label"
+        label="label"
+        :reset-after="false"
+        select-label=""
+        selected-label=""
+        deselect-label=""
+        :searchable="true"
+        :placeholder="'Recherchez une valeur de la liste pré-définie ...'"
+        :show-no-results="true"
+        :loading="loadingPrerecordedListValues"
+        :clear-on-select="false"
+        :preserve-search="false"
+        @search-change="search"
+        @select="selectPrerecordedValue"
+      >
+        <template slot="clear">
+          <div
+            v-if="selectedPrerecordedValue"
+            class="multiselect__clear"
+            @click.prevent.stop="clearPrerecordedValue"
+          >
+            <i
+              class="close icon"
+              aria-hidden="true"
+            />
+          </div>
+        </template>
+        <span slot="noResult">
+          Aucun résultat.
+        </span>
+        <span slot="noOptions">
+          Saisissez les premiers caractères ...
+        </span>
+      </Multiselect>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
+import Multiselect from 'vue-multiselect';
+
+import Dropdown from '@/components/Dropdown.vue';
+
+export default {
+  name: 'ExtraForm',
+
+  components: {
+    Dropdown,
+    Multiselect
+  },
+
+  props: {
+    field: {
+      type: Object,
+      default: null,
+    },
+    useValueOnly: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
+  data() {
+    return {
+      error: null,
+      prerecordedListSearchQuery: null,
+      loadingPrerecordedListValues: false,
+      selectedPrerecordedValue: null,
+      selectedMultipleCheckbox: [],
+    };
+  },
+
+  computed: {
+    ...mapState('feature-type', [
+      'selectedPrerecordedListValues'
+    ]),
+    ...mapState('feature', [
+      'extra_forms',
+    ]),
+    ...mapGetters(['usersGroupsFeatureOptions']),
+
+    selected_extra_form_list: {
+      get() {
+        if (this.field.field_type === 'notif_group') {
+          const usersGroup = this.usersGroupsFeatureOptions.find((group) => group.value === this.field.value);
+          return usersGroup ? usersGroup.name : '';
+        }
+        return this.field.value || '';
+      },
+      set(newValue) {
+        //* set the value selected in the dropdown
+        if (this.useValueOnly) {
+          this.$emit('update:value', newValue.id || newValue);
+        } else {
+          const newExtraForm = this.field;
+          newExtraForm['value'] = this.field.field_type === 'notif_group' ? newValue.value : newValue;
+          this.$store.commit('feature/UPDATE_EXTRA_FORM', newExtraForm);
+        }
+      },
+    },
+
+    displayLabels() {
+      return this.$route.name === 'editer-signalement' || this.$route.name === 'ajouter-signalement' || this.$route.name === 'editer-attribut-signalement';
+    },
+  },
+
+  watch: {
+    /**
+     * Watches for changes in the 'field.value' and updates the form state accordingly.
+     * This watcher handles specific field types, ensuring their values are correctly initialized
+     * and updated in scenarios like fast edition mode where certain values might not be auto-refreshed.
+     *
+     * @param {*} newValue - The new value of the field.
+     * @param {*} oldValue - The previous value of the field before the change.
+     */
+    'field.value': function(newValue, oldValue) {
+      // Check if the field object exists.
+      if (this.field) {
+        // Handle pre-recorded list fields specifically.
+        if (this.field.field_type === 'pre_recorded_list') {
+          // Update the form value if both new and old values are defined and different,
+          // or if either value is undefined, indicating a change.
+          if ((newValue && oldValue && (newValue.label !== oldValue.label || newValue !== oldValue))
+              || !newValue || !oldValue) {
+            this.initPrerecordedXform(); // Reinitialize the field to reflect the updated value.
+          }
+        } else if (this.field.field_type === 'multi_choices_list') {
+          // For multi-choice lists, reinitialize the field if the array values have changed.
+          // This is crucial in fast edition modes to prevent overriding the current value with a stale value.
+          this.initMultipleCheckboxXform();
+        }
+        // Reset any error states for the field.
+        this.error = null;
+      }
+    },
+
+    prerecordedListSearchQuery(newValue) {
+      this.loadingPrerecordedListValues = true;
+      this.GET_SELECTED_PRERECORDED_LIST_VALUES({
+        name: this.field.options[0],
+        pattern: newValue
+      })
+        .then(() => {
+          this.loadingPrerecordedListValues = false;
+        })
+        .catch(() => {
+          this.loadingPrerecordedListValues = false;
+        });
+    }
+  },
+
+  created() {
+    if (this.field) {
+      if (this.field.field_type === 'pre_recorded_list') {
+        this.initPrerecordedXform();
+      } else if (this.field.field_type === 'multi_choices_list') {
+        this.initMultipleCheckboxXform();
+      }
+    }
+  },
+  
+  mounted() {
+    // autoset field to false if is a boolean, since user doesn't need to select it, when false value is expected
+    if (this.field.field_type === 'boolean' && (this.field.value === undefined || this.field.value === null)) {
+      this.updateStore_extra_form(false);
+    }
+  },
+
+  methods: {
+    ...mapActions('feature-type', [
+      'GET_SELECTED_PRERECORDED_LIST_VALUES'
+    ]),
+    ...mapMutations('feature', [
+      'UPDATE_EXTRA_FORM',
+      'SET_EXTRA_FORMS',
+    ]),
+
+    initMultipleCheckboxXform() {
+      this.selectedMultipleCheckbox = typeof this.field.value === 'string' ? this.field.value.split(',') : this.field.value || [];
+    },
+
+    initPrerecordedXform() {
+      const { options, value } = this.field;
+      this.loadingPrerecordedListValues = true;
+      this.GET_SELECTED_PRERECORDED_LIST_VALUES({
+        name: options[0],
+        pattern: ''
+      })
+        .then(() => {
+          this.loadingPrerecordedListValues = false;
+        })
+        .catch(() => {
+          this.loadingPrerecordedListValues = false;
+        });
+      if (value) {
+        this.selectedPrerecordedValue = { label: value.label ? value.label : value };
+      } else {
+        this.selectedPrerecordedValue = null;
+      }
+    },
+    /**
+     * Updates the Vuex store or component state with the new value for a form field.
+     * This function handles different types of form fields including boolean, multi-choice lists, and others.
+     * 
+     * @param {Event|*} val - The new value or an event object.
+     */
+    updateStore_extra_form(val) {
+      // Check if the field object is defined.
+      if (this.field) {
+        let newValue;
+        // If the function is triggered by an event from a template input.
+        if (val && val.target) {
+          // For boolean fields (like checkboxes), use the 'checked' property.
+          if (this.field.field_type === 'boolean') {
+            newValue = val.target.checked;
+          } else {
+            // For other input types, use the 'value' property.
+            newValue = val.target.value;
+          }
+        } else if (this.field.field_type === 'multi_choices_list') {
+          // For multi-choice lists, the value is stored in component state.
+          newValue = this.selectedMultipleCheckbox;
+        } else {
+          // If the function is called directly with a value (not from an event).
+          newValue = val;
+        }
+        // Set the new value for the field.
+        if (this.useValueOnly) {
+          // If the component is used to update directly a returned value, emit an event with the new value.
+          this.$emit('update:value', newValue);
+        } else {
+          // Otherwise, update the Vuex store with the new value for the extra form field.
+          this.UPDATE_EXTRA_FORM({ ...this.field, value: newValue });
+        }
+      }
+    },
+
+    checkForm() {
+      let isValid = true;
+      if (this.field && this.field.is_mandatory && !this.field.value) {
+        isValid = false;
+        this.error = 'Ce champ est obligatoire';
+      } else {
+        this.error = null;
+      }
+      return isValid;
+    },
+
+    search(text) {
+      this.prerecordedListSearchQuery = text;
+    },
+
+    selectPrerecordedValue(e) {
+      this.selectedPrerecordedValue = e;
+      this.prerecordedListSearchQuery = null;
+      this.updateStore_extra_form({ target: { value:  this.selectedPrerecordedValue.label } });
+    },
+    
+    clearPrerecordedValue() {
+      this.selectedPrerecordedValue = null;
+      this.prerecordedListSearchQuery = null;
+      this.updateStore_extra_form({ target: { value:  null } });
+    },
+
+    /**
+     * Handles the selection and deselection of checkboxes in a form.
+     * This function updates an array to track the selected checkboxes by their names.
+     * It's typically called on the change event of each checkbox.
+     * 
+     * @param {Event} e - The event object from the checkbox input.
+     */
+    selectMultipleCheckbox(e) {
+      // Destructure the 'checked' status and 'name' of the checkbox from the event target.
+      const { checked, name } = e.target;
+
+      // If the checkbox is checked, add its name to the array of selected checkboxes.
+      // Cloning the array to allow unsaved changes detection (it wasn't working with Array.push)
+      if (checked) {
+        this.selectedMultipleCheckbox = [...this.selectedMultipleCheckbox, name];
+      } else {
+        // If the checkbox is unchecked, remove its name from the array.
+        this.selectedMultipleCheckbox = this.selectedMultipleCheckbox.filter((el) => el !== name);
+      }
+
+      // Call a method to update the Vuex store or component state with the latest selection.
+      this.updateStore_extra_form();
+    },
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+label.required:after {
+	content: ' *';
+	color: rgb(209, 0, 0);
+}
+.checkbox_list {
+  display: flex;
+  flex-direction: column;
+  .ui.checkbox {
+    margin: .25rem 0;
+    font-weight: normal;
+  }
+}
+</style>
+
+<style>
+.multiselect__placeholder {
+  position: absolute;
+  width: calc(100% - 48px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.multiselect__tags {
+  position: relative;
+}
+
+
+/* keep font-weight from overide of semantic classes */
+.multiselect__placeholder, .multiselect__content, .multiselect__tags  {
+  font-weight: initial !important;
+}
+/* keep placeholder eigth */
+.multiselect .multiselect__placeholder {
+  margin-bottom: 9px !important;
+  padding-top: 1px;
+}
+/* keep placeholder height when opening dropdown without selection */
+input.multiselect__input {
+  padding: 3px 0 0 0 !important;
+}
+/* keep placeholder height when opening dropdown with already a value selected */
+.multiselect__tags .multiselect__single {
+  padding: 1px 0 0 0 !important;
+  margin-bottom: 9px;
+}
+</style>

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 {

src/components/Feature/Detail/FeatureHeader.vue

@@ -2,145 +2,162 @@
   <div>
     <h1 class="ui header">
       <div class="content">
-        <span
-          v-if="fastEditionMode && form && canEditFeature"
-          class="form ui half-block"
-        >
-          <input
-            id="feature_detail_title_input"
-            :value="form.title"
-            type="text"
-            required
-            maxlength="128"
-            name="title"
-            @blur="updateTitle"
+        <div class="two-block">
+          <div
+            v-if="fastEditionMode && form && canEditFeature"
+            class="form ui half-block"
+          >
+            <input
+              id="feature_detail_title_input"
+              :value="form.title"
+              type="text"
+              required
+              maxlength="128"
+              name="title"
+              @blur="updateTitle"
+            >
+          </div>
+          <div
+            v-else
+            class="ellipsis"
           >
-        </span>
-        <span v-else>
-          {{ currentFeature.title || currentFeature.feature_id }}
-        </span>
+            {{ currentFeature.properties ?
+              currentFeature.properties.title : currentFeature.id }}
+          </div>
 
-        <div class="ui icon right floated compact buttons">
-          <router-link
-            v-if="displayToListButton"
-            id="feature-detail-to-features-list"
-            :to="{
-              name: 'liste-signalements',
-              params: { slug: $route.params.slug },
-            }"
-            custom
+          <div
+            id="feature-actions"
+            class="ui icon compact buttons"
           >
-            <div class="ui button tiny-margin teal">
-              <i class="ui icon arrow right" />
-              Retour à la liste des signalements
+            <div
+              v-if="queryparams"
+              class="fast_browsing"
+            >
+              <div>
+                <div>
+                  <strong>
+                    Tri en cours:
+                  </strong>
+                  <span>
+                    par&nbsp;{{ currentSort }}
+                  </span>
+                </div>
+                <div>
+                  <strong>
+                    Filtre en cours:
+                  </strong>
+                  <span>
+                    {{ currentFilters }}
+                  </span>
+                </div>
+              </div>
+              <span
+                class="feature-count"
+              >
+                {{ parseInt($route.query.offset) + 1 }} sur {{ featuresCount }}
+              </span>
+              <button
+                id="previous-feature"
+                :class="['ui button button-hover-green tiny-margin', { disabled: queryparams.previous < 0 }]"
+                data-tooltip="Voir le précédent signalement"
+                data-position="bottom center"
+                @click="toFeature('previous')"
+              >
+                <i
+                  class="angle left fitted icon"
+                  aria-hidden="true"
+                />
+              </button>
+              <button
+                id="next-feature"
+                :class="[
+                  'ui button button-hover-green tiny-margin',
+                  { disabled: queryparams.next >= featuresCount }
+                ]"
+                data-tooltip="Voir le prochain signalement"
+                data-position="bottom center"
+                @click="toFeature('next')"
+              >
+                <i
+                  class="angle right fitted icon"
+                  aria-hidden="true"
+                />
+              </button>
             </div>
-          </router-link>
-          <span
-            v-if="featuresCount"
-            id="feature-count"
-            class="ui button tiny-margin basic"
-          >
-            {{ parseInt($route.query.offset) + 1 }} sur {{ featuresCount }}
-          </span>
-          <button
-            v-if="queryparams"
-            id="previous-feature"
-            :class="['ui button button-hover-green tiny-margin', { disabled: queryparams.previous < 0 }]"
-            data-tooltip="Voir le précédent signalement"
-            data-position="bottom center"
-            @click="toFeature('previous')"
-          >
-            <i
-              class="angle left fitted icon"  
-              aria-hidden="true"
-            />
-          </button>
-          <button
-            v-if="queryparams"
-            id="next-feature"
-            :class="[
-              'ui button button-hover-green tiny-margin',
-              { disabled: queryparams.next >= featuresCount }
-            ]"
-            data-tooltip="Voir le prochain signalement"
-            data-position="bottom center"
-            @click="toFeature('next')"
-          >
-            <i
-              class="angle right fitted icon"
-              aria-hidden="true"
-            />
-          </button>
+            <div>
+              <button
+                v-if="fastEditionMode && canEditFeature"
+                id="save-fast-edit"
+                :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
+                data-tooltip="Enregistrer les modifications"
+                data-position="bottom center"
+                @click="fastEditFeature"
+              >
+                <i
+                  class="save fitted icon"
+                  aria-hidden="true"
+                />
+              </button>
+              <router-link
+                v-if="permissions && permissions.can_create_feature 
+                  && (featureType && !featureType.geom_type.includes('multi'))"
+                id="add-feature"
+                :to="{
+                  name: 'ajouter-signalement',
+                  params: {
+                    slug_type_signal: $route.params.slug_type_signal || featureType ? featureType.slug : '',
+                  },
+                }"
+                class="ui button button-hover-green tiny-margin"
+                data-tooltip="Ajouter un signalement"
+                data-position="bottom center"
+              >
+                <i
+                  class="plus icon"
+                  aria-hidden="true"
+                />
+              </router-link>
 
-          <button
-            v-if="fastEditionMode && canEditFeature"
-            id="save-fast-edit"
-            :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
-            data-tooltip="Enregistrer les modifications"
-            data-position="bottom center"
-            @click="$store.dispatch('feature/SEND_FEATURE', $route.name)"
-          >
-            <i
-              class="save fitted icon"  
-              aria-hidden="true"
-            />
-          </button>
+              <router-link
+                v-if="slugSignal && canEditFeature"
+                id="edit-feature"
+                :to="{
+                  name: 'editer-signalement',
+                  params: {
+                    slug_signal: slugSignal,
+                    slug_type_signal: $route.params.slug_type_signal || featureType ? featureType.slug : '',
+                  },
+                  query: $route.query
+                }"
+                class="ui button button-hover-orange tiny-margin"
+                data-tooltip="Éditer le signalement"
+                data-position="bottom center"
+              >
+                <i
+                  class="inverted grey pencil alternate icon"
+                  aria-hidden="true"
+                />
+              </router-link>
 
-          <router-link
-            v-if="permissions && permissions.can_create_feature"
-            id="add-feature"
-            :to="{
-              name: 'ajouter-signalement',
-              params: {
-                slug_type_signal: $route.params.slug_type_signal || featureType.slug,
-              },
-            }"
-            class="ui button button-hover-green tiny-margin"
-            data-tooltip="Ajouter un signalement"
-            data-position="bottom center"
-          >
-            <i
-              class="plus icon"
-              aria-hidden="true"
-            />
-          </router-link>
+              <a
+                v-if="canDeleteFeature && isOnline"
+                id="currentFeature-delete"
+                class="ui button button-hover-red tiny-margin"
+                data-tooltip="Supprimer le signalement"
+                data-position="bottom right"
+                @click="$emit('setIsDeleting')"
+              >
+                <i
+                  class="inverted grey trash alternate icon"
+                  aria-hidden="true"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
 
-          <router-link
-            v-if="slugSignal && canEditFeature"
-            id="edit-feature"
-            :to="{
-              name: 'editer-signalement',
-              params: {
-                slug_signal: slugSignal,
-                slug_type_signal: $route.params.slug_type_signal || featureType.slug,
-              },
-              query: $route.query
-            }"
-            class="ui button button-hover-orange tiny-margin"
-            data-tooltip="Éditer le signalement"
-            data-position="bottom center"
-          >
-            <i
-              class="inverted grey pencil alternate icon"
-              aria-hidden="true"
-            />
-          </router-link>
+        <!-- <div class="ui hidden divider" /> -->
 
-          <a
-            v-if="canDeleteFeature && isOnline"
-            id="currentFeature-delete"
-            class="ui button button-hover-red tiny-margin"
-            data-tooltip="Supprimer le signalement"
-            data-position="bottom right"
-            @click="$emit('setIsDeleting')"
-          >
-            <i
-              class="inverted grey trash alternate icon"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-        <div class="ui hidden divider" />
         <div class="sub header prewrap">
           <span
             v-if="fastEditionMode && canEditFeature && form"
@@ -153,8 +170,8 @@
               @blur="updateDescription"
             />
           </span>
-          <span v-else>
-            {{ currentFeature.description }}
+          <span v-else-if="currentFeature && currentFeature.properties">
+            {{ currentFeature.properties.description }}
           </span>
         </div>
       </div>
@@ -188,10 +205,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    displayToListButton: {
-      type: Boolean,
-      default: false,
-    },
     isFeatureCreator: {
       type: Boolean,
       default: false,
@@ -215,6 +228,9 @@ export default {
       'currentFeature',
       'form',
     ]),
+    ...mapState('projects', [
+      'project'
+    ]),
     ...mapGetters([
       'permissions',
     ]),
@@ -225,6 +241,39 @@ export default {
         next: parseInt(this.$route.query.offset) + 1
       } : null;
     },
+
+    currentSort() {
+      const sort = this.$route.query.ordering;
+      if (sort) {
+        if (sort.includes('status')) {
+          return 'statut';
+        } else if (sort.includes('feature_type')) {
+          return 'type de signalement';
+        } else if (sort.includes('title')) {
+          return 'nom';
+        } else if (sort.includes('updated_on')) {
+          return 'date de modification';
+        } else if (sort.includes('creator')) {
+          return 'auteur';
+        } else if (sort.includes('last_editor')) {
+          return 'dernier éditeur';
+        }
+      }
+      return 'date de création';
+    },
+    
+    currentFilters() {
+      let filters = [];
+      if (this.$route.query.feature_type_slug) filters.push('type de signalement');
+      if (this.$route.query.status__value) filters.push('statut');
+      if (this.$route.query.title) filters.push('titre');
+
+      if (filters.length > 0) {
+        return `par ${filters.join(', ')}`;
+      } else {
+        return 'désactivé';
+      }
+    }
   },
 
   methods: {
@@ -232,7 +281,7 @@ export default {
       this.$emit('tofeature', {
         name: 'details-signalement-filtre',
         params: {
-          slug_type_signal: this.currentFeature.feature_type.slug,
+          slug_type_signal: this.currentFeature.properties.feature_type.slug,
         },
         query: {
           ...this.$route.query,
@@ -247,26 +296,60 @@ export default {
 
     updateDescription(e) {
       this.$store.commit('feature/UPDATE_FORM_FIELD', { name: 'description', value: e.target.value });
+    },
+
+    fastEditFeature() {
+      this.$emit('fastEditFeature');
     }
   }
 };
+
 </script>
 
-<style>
-#next-feature {
-  margin-right: .5rem !important;
-}
-#feature-detail-to-features-list {
-  line-height: 0;
-  margin-right: 5px;
-}
-.half-block {
-  display: inline-block;
-  width: 50%;
-}
+<style lang="less">
 #feature_detail_title_input {
   font-weight: bold;
   font-size: 2em;
   padding: .25em;
 }
+.two-block {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: .5em;
+}
+#feature-actions {
+  flex-direction: column;
+  > div {
+    line-height: initial;
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+  > .fast_browsing {
+    display: flex;
+    align-items: center;
+    margin-bottom: .25rem;
+    span {
+      margin-left: .1em;
+    }
+    span, div {
+      font-size: 1rem;
+      color: #666666;
+      margin-right: 1rem;
+      font-weight: normal;
+
+      opacity: 1 !important;
+    }
+  } 
+}
+
+@media screen and (max-width: 700px) {
+  .two-block {
+    flex-direction: column-reverse;
+  }
+  #feature-actions.ui.buttons {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
 </style>
\ No newline at end of file