# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1557323680 -7200
# Node ID 25a26f666ee852b797b6803bcb35290c3752a1c2
# Parent  b0328646e34f4eb745319037626e7e9bb382ffae
statistics: layout

diff -r b0328646e34f -r 25a26f666ee8 client/src/components/Statistics.vue
--- a/client/src/components/Statistics.vue	Wed May 08 15:26:59 2019 +0200
+++ b/client/src/components/Statistics.vue	Wed May 08 15:54:40 2019 +0200
@@ -9,7 +9,9 @@
       <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">
+        <div
+          class="mb-3 d-flex flex-row justify-content-between align-items-center"
+        >
           <div>
             <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
             <small class="ml-1 text-muted">
@@ -32,7 +34,7 @@
         <div class="d-flex flex-column">
           <select
             @change="entrySelected"
-            class="form-control font-weight-bold"
+            class="form-control form-control-sm font-weight-bold"
             v-model="selectedEntry"
           >
             <option :value="null">{{ empty }}</option>
@@ -45,41 +47,55 @@
           </select>
         </div>
         <div class="d-flex flex-column mt-3">
-          <div class="d-flex flex-column mb-3">
-            <small class="my-auto text-muted"
-              ><translate>Type</translate></small
-            >
-            <select v-model="selectedFrequency" class="form-control">
-              <option
-                v-for="(option, index) in $options.FREQUENCIES"
-                :value="option"
-                :key="index"
-                ><translate>{{ option }}</translate></option
+          <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"
               >
-            </select>
+                <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>
           </div>
-          <div class="d-flex flex-column mb-3">
-            <small class="my-auto text-muted"><translate>LOS</translate></small>
-            <select v-model="los" class="form-control">
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-            </select>
-          </div>
-          <div class="d-flex flex-column mb-3">
-            <small for="from" class="my-auto text-muted"
-              ><translate>Date from</translate></small
-            ><input
-              id="from"
-              v-model="fromDate"
-              class="form-control"
-              type="date"
-            />
-          </div>
-          <div class="d-flex flex-column">
-            <small for="to" class="my-auto text-muted"
-              ><translate>Date to</translate></small
-            ><input id="to" v-model="toDate" class="form-control" type="date" />
+          <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>
         <div class="mt-3">
@@ -96,6 +112,13 @@
   </div>
 </template>
 
+<style lang="scss" scoped>
+input,
+select {
+  font-size: 0.8em;
+}
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -296,5 +319,3 @@
   }
 };
 </script>
-
-<style></style>