--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Fri May 17 14:07:16 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Fri May 17 14:08:09 2019 +0200
@@ -9,9 +9,7 @@
       <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
       <div class="box-body">
         <UISpinnerOverlay v-if="loading" />
-        <div
-          class="mb-3 d-flex flex-row justify-content-between align-items-center"
-        >
+        <div class="mb-2 d-flex justify-content-between align-items-center">
           <div>
             <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
             <small class="ml-1 text-muted">
@@ -31,111 +29,106 @@
             </small>
           </div>
         </div>
-        <div class="d-flex flex-column">
-          <select
-            :key="1"
-            v-if="type === $options.BOTTLENECKS"
-            @change="entrySelected"
-            class="form-control form-control-sm font-weight-bold"
-            v-model="selectedEntry"
+        <select
+          :key="1"
+          v-if="type === $options.BOTTLENECKS"
+          @change="entrySelected"
+          class="form-control font-weight-bold"
+          v-model="selectedEntry"
+        >
+          <option :value="null">{{ empty }}</option>
+          <optgroup
+            v-for="(bottlenecksForCountry, cc) in orderedBottlenecks"
+            :key="cc"
+            :label="cc"
           >
-            <option :value="null">{{ empty }}</option>
-            <optgroup
-              v-for="(bottlenecksForCountry, cc) in orderedBottlenecks"
-              :key="cc"
-              :label="cc"
+            <option
+              v-for="bn in bottlenecksForCountry"
+              :key="bn.properties.name"
+              :value="bn"
+            >
+              {{ bn.properties.name }}
+            </option>
+          </optgroup>
+        </select>
+        <select
+          :key="2"
+          v-else
+          @change="entrySelected"
+          class="form-control font-weight-bold"
+          v-model="selectedEntry"
+        >
+          <option :value="null">{{ empty }}</option>
+          <option
+            v-for="(entry, index) in entries"
+            :value="entry"
+            :key="index"
+            >{{ entry.properties.name }}</option
+          >
+        </select>
+        <div class="d-flex mt-2">
+          <div class="d-flex flex-column w-50 mr-1">
+            <small class="my-auto text-muted">
+              <translate>Type</translate>
+            </small>
+            <select
+              v-model="selectedFrequency"
+              class="form-control form-control-sm"
             >
               <option
-                v-for="bn in bottlenecksForCountry"
-                :key="bn.properties.name"
-                :value="bn"
-              >
-                {{ bn.properties.name }}
-              </option>
-            </optgroup>
-          </select>
-          <select
-            :key="2"
-            v-else
-            @change="entrySelected"
-            class="form-control form-control-sm font-weight-bold"
-            v-model="selectedEntry"
-          >
-            <option :value="null">{{ empty }}</option>
-            <option
-              v-for="(entry, index) in entries"
-              :value="entry"
-              :key="index"
-              >{{ entry.properties.name }}</option
-            >
-          </select>
-        </div>
-        <div class="d-flex flex-column mt-3">
-          <div class="d-flex flex-row w-100">
-            <div class="d-flex flex-column mb-3 w-50 mr-1">
-              <small class="my-auto text-muted"
-                ><translate>Type</translate></small
-              >
-              <select
-                v-model="selectedFrequency"
-                class="form-control form-control-sm"
+                v-for="(option, index) in $options.FREQUENCIES"
+                :value="option"
+                :key="index"
               >
-                <option
-                  v-for="(option, index) in $options.FREQUENCIES"
-                  :value="option"
-                  :key="index"
-                  ><translate>{{ option }}</translate></option
-                >
-              </select>
-            </div>
-            <div class="d-flex flex-column mb-3 w-50 ml-1">
-              <small class="my-auto text-muted"
-                ><translate>LOS</translate></small
-              >
-              <select v-model="los" class="form-control form-control-sm">
-                <option value="1">1</option>
-                <option value="2">2</option>
-                <option value="3">3</option>
-              </select>
-            </div>
+                <translate>{{ option }}</translate>
+              </option>
+            </select>
+          </div>
+          <div class="d-flex flex-column w-50 ml-1">
+            <small class="my-auto text-muted"><translate>LOS</translate></small>
+            <select v-model="los" class="form-control form-control-sm">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+            </select>
           </div>
-          <div class="d-flex flex-row w-100">
-            <div class="d-flex flex-column w-50 mr-1">
-              <small for="from" class="my-auto text-muted"
-                ><translate>Date from</translate></small
-              ><input
-                id="from"
-                v-model="fromDate"
-                class="form-control form-control-sm"
-                type="date"
-              />
-            </div>
-            <div class="d-flex flex-column w-50 ml-1">
-              <small for="to" class="my-auto text-muted"
-                ><translate>Date to</translate></small
-              ><input
-                id="to"
-                v-model="toDate"
-                class="form-control form-control-sm"
-                type="date"
-              />
-            </div>
+        </div>
+        <div class="d-flex mt-2">
+          <div class="d-flex flex-column w-50 mr-1">
+            <small for="from" class="my-auto text-muted">
+              <translate>Date from</translate>
+            </small>
+            <input
+              id="from"
+              v-model="fromDate"
+              class="form-control form-control-sm"
+              type="date"
+            />
+          </div>
+          <div class="d-flex flex-column w-50 ml-1">
+            <small for="to" class="my-auto text-muted">
+              <translate>Date to</translate>
+            </small>
+            <input
+              id="to"
+              v-model="toDate"
+              class="form-control form-control-sm"
+              type="date"
+            />
           </div>
         </div>
         <div class="mt-3">
           <button
-            @click="openFairwaydepth"
+            @click="openFairwaydepthDiagram"
             :disabled="isComplete"
-            class="btn btn-info btn-sm w-100"
+            class="btn btn-info btn-sm d-block w-100"
           >
             <translate>Available fairway depth</translate>
           </button>
-        </div>
-        <div class="mt-3">
           <button
-            @click="openFairwaydepthLNWL"
+            @click="openFairwaydepthLNWLDiagram"
             :disabled="isComplete"
-            class="btn btn-info btn-sm w-100"
+            class="btn btn-info btn-sm d-block w-100 mt-2"
           >
             <translate>Available fairway depth vs LNWL</translate>
           </button>
@@ -178,118 +171,6 @@
       loading: false
     };
   },
-  methods: {
-    openFairwaydepthLNWL() {
-      this.loading = true;
-      this.$store
-        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
-          feature: this.selectedFairwayAvailabilityFeature,
-          from: this.from,
-          to: this.to,
-          frequency: this.frequency,
-          LOS: this.los
-        })
-        .then(() => {
-          this.$store.commit(
-            "application/paneSetup",
-            "AVAILABLEFAIRWAYDEPTHLNWL"
-          );
-        })
-        .catch(error => {
-          console.log(error);
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    openFairwaydepth() {
-      this.loading = true;
-      this.$store
-        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
-          feature: this.selectedFairwayAvailabilityFeature,
-          from: this.from,
-          to: this.to,
-          frequency: this.frequency,
-          LOS: this.los
-        })
-        .then(() => {
-          this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
-        })
-        .catch(error => {
-          console.log(error);
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    close() {
-      this.$store.commit("application/showFairwayDepth", false);
-      this.$store.commit("application/showFairwayDepthLNWL", false);
-    },
-    entrySelected() {
-      if (this.type === this.$options.BOTTLENECKS) {
-        this.openLayersMap()
-          .getLayer("BOTTLENECKS")
-          .setVisible(true);
-        if (this.showProfiles) {
-          this.$store.dispatch(
-            "bottlenecks/setSelectedBottleneck",
-            this.selectedFairwayAvailabilityFeature.properties.name
-          );
-        }
-      }
-      if (this.type === this.$options.STRETCHES) {
-        this.openLayersMap()
-          .getLayer("STRETCHES")
-          .setVisible(true);
-      }
-      if (this.type === this.$options.SECTIONS) {
-        this.openLayersMap()
-          .getLayer("SECTIONS")
-          .setVisible(true);
-      }
-      if (this.selectedFairwayAvailabilityFeature) {
-        this.$store.dispatch("map/moveToFeauture", {
-          feature: this.selectedFairwayAvailabilityFeature,
-          zoom: 17,
-          preventZoomOut: true
-        });
-      }
-    },
-    setSelectedBottleneck() {
-      const bn = this.bottlenecksList.filter(
-        x => x.properties.name === this.selectedBottleneck
-      )[0];
-      this.$store.commit(
-        "fairwayavailability/setSelectedFairwayAvailability",
-        bn
-      );
-    },
-    setSelectedStretch() {
-      const stretch = this.stretches.find(x => x.id === this.selectedStretchId);
-      this.$store.commit(
-        "fairwayavailability/setSelectedFairwayAvailability",
-        stretch
-      );
-    },
-    setSelectedSection() {
-      const section = this.sections.find(x => x.id === this.selectedSectionId);
-      this.$store.commit(
-        "fairwayavailability/setSelectedFairwayAvailability",
-        section
-      );
-    }
-  },
   computed: {
     ...mapState("application", [
       "showFairwayDepth",
@@ -394,21 +275,26 @@
       this.type = this.$options.BOTTLENECKS;
       this.setSelectedBottleneck();
     },
-    type() {
-      if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
+    selectedStretchId() {
+      this.type = this.$options.STRETCHES;
+      this.setSelectedStretch();
+    },
+    selectedSectionId() {
+      this.type = this.$options.SECTIONS;
+      this.setSelectedSection();
+    },
+    type(type) {
+      if (type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
+        this.openLayersMap()
+          .getLayer("BOTTLENECKS")
+          .setVisible(true);
         this.setSelectedBottleneck();
-      } else if (
-        this.type === this.$options.STRETCHES &&
-        this.selectedStretchId
-      ) {
+      } else if (type === this.$options.STRETCHES && this.selectedStretchId) {
         this.openLayersMap()
           .getLayer("STRETCHES")
           .setVisible(true);
         this.setSelectedStretch();
-      } else if (
-        this.type === this.$options.SECTIONS &&
-        this.selectedSectionId
-      ) {
+      } else if (type === this.$options.SECTIONS && this.selectedSectionId) {
         this.openLayersMap()
           .getLayer("SECTIONS")
           .setVisible(true);
@@ -435,6 +321,118 @@
       }
     }
   },
+  methods: {
+    openFairwaydepthLNWLDiagram() {
+      this.loading = true;
+      this.$store
+        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          from: this.from,
+          to: this.to,
+          frequency: this.frequency,
+          LOS: this.los
+        })
+        .then(() => {
+          this.$store.commit(
+            "application/paneSetup",
+            "AVAILABLEFAIRWAYDEPTHLNWL"
+          );
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    openFairwaydepthDiagram() {
+      this.loading = true;
+      this.$store
+        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          from: this.from,
+          to: this.to,
+          frequency: this.frequency,
+          LOS: this.los
+        })
+        .then(() => {
+          this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    close() {
+      this.$store.commit("application/showFairwayDepth", false);
+      this.$store.commit("application/showFairwayDepthLNWL", false);
+    },
+    entrySelected() {
+      if (this.type === this.$options.BOTTLENECKS) {
+        this.openLayersMap()
+          .getLayer("BOTTLENECKS")
+          .setVisible(true);
+        if (this.showProfiles) {
+          this.$store.dispatch(
+            "bottlenecks/setSelectedBottleneck",
+            this.selectedFairwayAvailabilityFeature.properties.name
+          );
+        }
+      }
+      if (this.type === this.$options.STRETCHES) {
+        this.openLayersMap()
+          .getLayer("STRETCHES")
+          .setVisible(true);
+      }
+      if (this.type === this.$options.SECTIONS) {
+        this.openLayersMap()
+          .getLayer("SECTIONS")
+          .setVisible(true);
+      }
+      if (this.selectedFairwayAvailabilityFeature) {
+        this.$store.dispatch("map/moveToFeauture", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          zoom: 17,
+          preventZoomOut: true
+        });
+      }
+    },
+    setSelectedBottleneck() {
+      const bn = this.bottlenecksList.filter(
+        x => x.properties.name === this.selectedBottleneck
+      )[0];
+      this.$store.commit(
+        "fairwayavailability/setSelectedFairwayAvailability",
+        bn
+      );
+    },
+    setSelectedStretch() {
+      const stretch = this.stretches.find(x => x.id === this.selectedStretchId);
+      this.$store.commit(
+        "fairwayavailability/setSelectedFairwayAvailability",
+        stretch
+      );
+    },
+    setSelectedSection() {
+      const section = this.sections.find(x => x.id === this.selectedSectionId);
+      this.$store.commit(
+        "fairwayavailability/setSelectedFairwayAvailability",
+        section
+      );
+    }
+  },
   BOTTLENECKS: "bottlenecks",
   SECTIONS: "sections",
   STRETCHES: "stretches",