# HG changeset patch
# User Sascha L. Teichmann <sascha.teichmann@intevation.de>
# Date 1626366977 -7200
# Node ID 901741aa16788ab4870f04c2082a4cf4bd35f384
# Parent  d45d5fafdc5b8e2e2d672470d0cf6ffc2afe489b# Parent  d6a547f3af71a4daa2db0a15744d6a6550d29b8c
Merged uiimprovements branch into default.

diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/App.vue
--- a/client/src/components/App.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/App.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -2,7 +2,7 @@
   <div id="app" class="main" style="overflow-x:scroll">
     <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
       <div class="boxes d-flex p-2">
-        <div class="mr-auto d-flex">
+        <div class="d-flex">
           <Sidebar />
           <div :class="searchContainer">
             <Search v-if="isMapVisible" />
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/Bottlenecks.vue
--- a/client/src/components/Bottlenecks.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/Bottlenecks.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -13,12 +13,12 @@
           title: `${countryLabel}`,
           width: '100px'
         },
+        { id: 'properties.from', title: `${chainageLabel}`, width: '155px' },
         {
           id: 'properties.current',
           title: `${latestmeasurementLabel}`,
           width: '150px'
-        },
-        { id: 'properties.from', title: `${chainageLabel}`, width: '135px' }
+        }
       ]"
     />
     <UITableBody
@@ -33,20 +33,22 @@
           }}</a>
         </div>
         <div class="table-cell text-center" style="width: 100px">
-          {{ bottleneck.properties.responsible_country }}
+          <span class="mx-auto">{{
+            bottleneck.properties.responsible_country
+          }}</span>
         </div>
-        <div class="table-cell" style="width: 150px">
-          {{ bottleneck.properties.current | surveyDate }}
-        </div>
-        <div class="table-cell" style="width: 135px">
-          {{
+        <div class="table-cell" style="flex-grow:1;">
+          <span class="mx-auto">{{
             displayCurrentChainage(
               bottleneck.properties.from,
               bottleneck.properties.to
             )
-          }}
+          }}</span>
         </div>
-        <div class="table-cell center" style="flex-grow: 1">
+        <div class="table-cell" style="width: 150px">
+          <span class="ml-auto">{{
+            bottleneck.properties.current | surveyDate
+          }}</span>
           <UISpinnerButton
             @click="loadSurveys(bottleneck)"
             :loading="loading === bottleneck"
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/Contextbox.vue
--- a/client/src/components/Contextbox.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/Contextbox.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -1,13 +1,31 @@
 <template>
   <div :class="style">
-    <Bottlenecks v-if="contextBoxContent === 'bottlenecks'" />
+    <Bottlenecks
+      style="min-width: 650px"
+      v-if="contextBoxContent === 'bottlenecks'"
+    />
     <keep-alive>
-      <Staging v-if="contextBoxContent === 'staging'" />
-      <Stretches v-if="contextBoxContent === 'stretches'" />
-      <Sections v-if="contextBoxContent === 'sections'" />
-      <ImportConfiguration v-if="contextBoxContent === 'importconfiguration'" />
+      <Staging
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'staging'"
+      />
+      <Stretches
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'stretches'"
+      />
+      <Sections
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'sections'"
+      />
+      <ImportConfiguration
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'importconfiguration'"
+      />
     </keep-alive>
-    <ImportOverview v-if="contextBoxContent === 'importoverview'" />
+    <ImportOverview
+      style="min-width: 850px"
+      v-if="contextBoxContent === 'importoverview'"
+    />
   </div>
 </template>
 
@@ -47,7 +65,10 @@
         "ui-element shadow-xs contextbox",
         {
           contextboxcollapsed: !this.showContextBox,
-          contextboxextended: this.showContextBox,
+          contextboxextended:
+            this.showContextBox && this.contextBoxContent !== "bottlenecks",
+          contextboxbottlenecks:
+            this.showContextBox && this.contextBoxContent === "bottlenecks",
           "rounded-bottom": this.contextBoxContent !== "imports",
           rounded: this.contextBoxContent === "imports"
         }
@@ -79,9 +100,6 @@
   overflow: hidden;
   background: #fff;
 }
-.contextbox > div:last-child {
-  width: 860px;
-}
 
 .contextboxcollapsed {
   max-width: 0;
@@ -89,7 +107,15 @@
 }
 
 .contextboxextended {
-  max-width: 860px;
+  max-width: 858px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.contextboxbottlenecks {
+  max-width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .close-contextbox {
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/KeyboardHandler.vue
--- a/client/src/components/KeyboardHandler.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/KeyboardHandler.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div class="notice" v-if="showNotice">
-      <span>{{ noticeText }}</span>
+      <span @click="stopOperation">{{ noticeText }}</span>
     </div>
   </transition>
 </template>
@@ -70,28 +70,37 @@
       }
     }
   },
+  methods: {
+    closeCompareView() {
+      this.$store.commit("fairwayprofile/additionalSurvey", null);
+    },
+    stopDrawing() {
+      this.$store.commit("map/lineToolEnabled", false);
+      this.$store.commit("map/polygonToolEnabled", false);
+      this.$store.commit("map/cutToolEnabled", false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.openLayersMaps.forEach(m => {
+        m.getLayer("DRAWTOOL")
+          .getSource()
+          .clear();
+      });
+    },
+    stopOperation() {
+      if (
+        this.lineToolEnabled ||
+        this.polygonToolEnabled ||
+        this.cutToolEnabled
+      ) {
+        this.stopDrawing();
+      } else if (this.paneSetup.includes("COMPARESURVEYS")) {
+        this.closeCompareView();
+      }
+    }
+  },
   mounted() {
     window.addEventListener("keydown", e => {
       // Escape
-      if (e.keyCode === 27) {
-        if (
-          this.lineToolEnabled ||
-          this.polygonToolEnabled ||
-          this.cutToolEnabled
-        ) {
-          this.$store.commit("map/lineToolEnabled", false);
-          this.$store.commit("map/polygonToolEnabled", false);
-          this.$store.commit("map/cutToolEnabled", false);
-          this.$store.commit("map/setCurrentMeasurement", null);
-          this.openLayersMaps.forEach(m => {
-            m.getLayer("DRAWTOOL")
-              .getSource()
-              .clear();
-          });
-        } else if (this.paneSetup.includes("COMPARESURVEYS")) {
-          this.$store.commit("fairwayprofile/additionalSurvey", null);
-        }
-      }
+      if (e.key === "Esc" || e.key === "Escape") this.stopOperation();
     });
   }
 };
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/Pdftool.vue
--- a/client/src/components/Pdftool.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/Pdftool.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -334,7 +334,6 @@
           this.generatePDF(soundingInfo);
         })
         .catch(error => {
-          // console.log(error);
           let message = "Backend not reachable";
           if (error.response) {
             const { status, data } = error.response;
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/Search.vue
--- a/client/src/components/Search.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/Search.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -9,6 +9,10 @@
       :class="[
         'searchgroup',
         {
+          searchgroupwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === 'bottlenecks',
+          sgnobottlenecks:
+            this.showSearchbar && this.contextBoxContent !== 'bottlenecks',
           'searchgroup-collapsed': !showSearchbar,
           big:
             showContextBox &&
@@ -85,7 +89,36 @@
 <style lang="scss" scoped>
 .searchcontainer {
   opacity: 0.96;
+}
+
+.searchcontainerwitdh {
   width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchcontainerwitdhbottlenecks {
+  width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidth {
+  max-width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.sgnobottlenecks {
+  width: 817px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidthbottlenecks {
+  width: 617px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .searchcontainer .searchbar {
@@ -94,7 +127,6 @@
 }
 
 .searchgroup {
-  width: 827px;
   overflow: hidden;
 }
 
@@ -218,7 +250,15 @@
         {
           "d-flex": this.contextBoxContent !== "imports",
           "d-none": this.contextBoxContent === "imports" && this.showContextBox,
-          smallbox: !this.showSearchbar
+          smallbox: !this.showSearchbar,
+          searchcontainerwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchgroupwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchcontainerwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks",
+          searchgroupwidthbottleneks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks"
         }
       ];
     },
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/importoverview/ImportOverview.vue
--- a/client/src/components/importoverview/ImportOverview.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/importoverview/ImportOverview.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -280,7 +280,6 @@
                 saveAs(csvFile, "log.csv");
               })
               .catch(error => {
-                console.log(error);
                 const { status, data } = error.response;
                 app.$snotify.clear();
                 displayError({
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/layers/layers.js
--- a/client/src/components/layers/layers.js	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/layers/layers.js	Thu Jul 15 18:36:17 2021 +0200
@@ -79,13 +79,10 @@
           }
           vectorSource.addFeatures(features);
         } catch (error) {
-          console.log(error);
-          console.log("Loading failed for:", vectorSource);
           vectorSource.addFeatures([]);
         }
       })
-      .catch(error => {
-        console.log(error);
+      .catch(() => {
         vectorSource.removeLoadedExtent(extent);
         store.dispatch("application/reportBackendError");
       });
@@ -400,8 +397,7 @@
                 .then(response => {
                   tile.getImage().src = URL.createObjectURL(response.data);
                 })
-                .catch(error => {
-                  console.log(error);
+                .catch(() => {
                   store.dispatch("application/reportBackendError");
                 });
             } // TODO  tile.setState(TileState.ERROR);
@@ -431,8 +427,7 @@
                 .then(response => {
                   tile.getImage().src = URL.createObjectURL(response.data);
                 })
-                .catch(error => {
-                  console.log(error);
+                .catch(() => {
                   store.dispatch("application/reportBackendError");
                 });
             } // TODO  tile.setState(TileState.ERROR);
@@ -561,8 +556,7 @@
                 .then(response => {
                   tile.getImage().src = URL.createObjectURL(response.data);
                 })
-                .catch(error => {
-                  console.log(error);
+                .catch(() => {
                   store.dispatch("application/reportBackendError");
                 });
             } // TODO  tile.setState(TileState.ERROR);
@@ -693,8 +687,7 @@
                 .then(response => {
                   tile.getImage().src = URL.createObjectURL(response.data);
                 })
-                .catch(error => {
-                  console.log(error);
+                .catch(() => {
                   store.dispatch("application/reportBackendError");
                 });
             } // TODO  tile.setState(TileState.ERROR);
@@ -768,8 +761,7 @@
                 .then(response => {
                   tile.getImage().src = URL.createObjectURL(response.data);
                 })
-                .catch(error => {
-                  console.log(error);
+                .catch(() => {
                   store.dispatch("application/reportBackendError");
                 });
             } // TODO  tile.setState(TileState.ERROR);
diff -r d45d5fafdc5b -r 901741aa1678 client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Thu Jul 15 18:15:08 2021 +0200
+++ b/client/src/components/map/Map.vue	Thu Jul 15 18:36:17 2021 +0200
@@ -35,6 +35,9 @@
  * * Thomas Junk <thomas.junk@intevation.de>
  * * Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
+
+/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "_" }]*/
+
 import { HTTP } from "@/lib/http";
 import { mapState } from "vuex";
 import { Map, View } from "ol";
@@ -46,8 +49,6 @@
 import { styles } from "@/components/layers/styles";
 import "ol/ol.css";
 
-/* for the sake of debugging */
-/* eslint-disable no-console */
 export default {
   mixins: [pane],
   components: {
@@ -292,9 +293,8 @@
         crossOrigin: "anonymous",
         params: JSON.parse(this.config.ecdis_wms_params)
       });
-      source.on("imageloaderror", error => {
+      source.on("imageloaderror", _ => {
         if (this.ongoingPDFExport) {
-          console.log(error);
           displayError({
             title: this.$gettext("Loading Error"),
             message: this.$gettext(