--- a/client/src/components/map/contextbox/Bottlenecks.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -1,21 +1,28 @@
 <template>
   <div>
     <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon><translate>Bottlenecks</translate>
+      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
+      <translate>Bottlenecks</translate>
     </h6>
     <div class="row p-2 text-left small">
       <div class="col-5">
-        <a href="#" @click="sortBy('name')" class="sort-link"><translate>Name</translate></a>
+        <a href="#" @click="sortBy('name')" class="sort-link">
+          <translate>Name</translate>
+        </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon>
       </div>
       <div class="col-2">
-        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link"><translate>Latest</translate>
-          <br><translate>Measurement</translate>
+        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">
+          <translate>Latest</translate>
+          <br>
+          <translate>Measurement</translate>
         </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon>
       </div>
       <div class="col-3">
-        <a href="#" @click="sortBy('chainage')" class="sort-link"><translate>Chainage</translate></a>
+        <a href="#" @click="sortBy('chainage')" class="sort-link">
+          <translate>Chainage</translate>
+        </a>
         <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon>
       </div>
       <div class="col-2"></div>
@@ -31,17 +38,12 @@
         class="border-top row bottleneck-row mx-0"
       >
         <div class="col-5 py-2 text-left">
-          <a
-            href="#"
-            @click="selectBottleneck(bottleneck)"
-          >{{ bottleneck.properties.name }}</a>
+          <a href="#" @click="selectBottleneck(bottleneck)">{{ bottleneck.properties.name }}</a>
         </div>
-        <div class="col-2 py-2">
-          {{ displayCurrentSurvey(bottleneck.properties.current) }}
-        </div>
-        <div class="col-3 py-2">
-          {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
-        </div>
+        <div class="col-2 py-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div>
+        <div
+          class="col-3 py-2"
+        >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div>
         <div class="col-2 pr-0 text-right">
           <button
             type="button"
@@ -49,12 +51,27 @@
             @click="loadSurveys(bottleneck.properties.name)"
             v-if="bottleneck.properties.current"
           >
-            <font-awesome-icon icon="spinner" fixed-width spin v-if="loading === bottleneck.properties.name"></font-awesome-icon>
-            <font-awesome-icon icon="angle-down" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"></font-awesome-icon>
-            <font-awesome-icon icon="angle-up" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"></font-awesome-icon>
+            <font-awesome-icon
+              icon="spinner"
+              fixed-width
+              spin
+              v-if="loading === bottleneck.properties.name"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-down"
+              fixed-width
+              v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-up"
+              fixed-width
+              v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"
+            ></font-awesome-icon>
           </button>
         </div>
-        <div :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
+        <div
+          :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"
+        >
           <a
             href="#"
             class="d-block px-3 py-2"
@@ -65,7 +82,9 @@
         </div>
       </div>
     </div>
-    <div v-else class="small text-center py-3 border-top"><translate>No results.</translate></div>
+    <div v-else class="small text-center py-3 border-top">
+      <translate>No results.</translate>
+    </div>
   </div>
 </template>
 
@@ -192,9 +211,9 @@
           }
         })
           .then(response => {
-            this.openBottleneckSurveys = response.data.surveys.sort(
-              (a, b) => (a.date_info < b.date_info ? 1 : -1)
-            );
+            this.openBottleneckSurveys = response.data.surveys.sort((a, b) => {
+              return a.date_info < b.date_info ? 1 : -1;
+            });
           })
           .catch(error => {
             const { status, data } = error.response;
@@ -219,28 +238,36 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.bottleneck-list
-  overflow-y: auto
-  .bottleneck-row
-    a
-      text-decoration: none
-    &:hover
-      background: #fbfbfb
+<style lang="scss" scoped>
+.bottleneck-list {
+  overflow-y: auto;
+}
+
+.bottleneck-list .bottleneck-row a {
+  text-decoration: none;
+}
+
+.bottleneck-list .bottleneck-row:hover {
+  background: #fbfbfb;
+}
 
-.surveys
-  max-height: 0
-  min-height: 0
-  overflow: hidden
-  a
-    &:hover
-      background: #f3f3f3
+.surveys {
+  max-height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.surveys a:hover {
+  background: #f3f3f3;
+}
 
-.surveys.open
-  max-height: 250px
-  overflow: auto
+.surveys.open {
+  max-height: 250px;
+  overflow: auto;
+}
 
-.sort-link
-  color: #444
-  font-weight: bold
+.sort-link {
+  color: #444;
+  font-weight: bold;
+}
 </style>