--- a/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 17:33:08 2019 +0200
+++ b/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 17:37:22 2019 +0200
@@ -8,64 +8,56 @@
     />
     <div class="position-relative">
       <SpinnerOverlay v-if="loading" />
-      <div class="p-2 mb-1 d-flex flex-row flex-fill justify-content-between">
+      <div class="border-bottom p-2 d-flex justify-content-between">
         <Filters></Filters>
-        <div>
-          <button
-            class="btn btn-sm btn-info"
-            :disabled="!reviewed.length"
-            @click="save"
-          >
-            <translate>Commit</translate> {{ reviewed.length }}
-          </button>
-        </div>
+        <button
+          class="btn btn-xs btn-info"
+          :disabled="!reviewed.length"
+          @click="save"
+        >
+          <translate>Commit</translate> {{ reviewed.length }}
+        </button>
       </div>
       <div
-        class="ml-2 mr-2 mb-2 datefilter d-flex flex-row justify-content-between"
+        class="p-2 d-flex align-items-center justify-content-between border-bottom"
       >
-        <div class="mr-3 my-auto pointer">
-          <button
-            :disabled="!this.prev"
-            @click="earlier"
-            class="btn btn-sm btn-outline-light text-dark"
-          >
-            <translate>Earlier</translate>
-            <font-awesome-icon class="ml-2" icon="angle-left" />
-          </button>
-        </div>
-        <div class="selected-interval my-auto">
-          <span class="date">{{ interval[0] | dateTime }}</span>
-          <span class="ml-3 mr-3">-</span>
-          <span class="date">{{ interval[1] | dateTime }}</span>
-        </div>
-        <div class="ml-3 my-auto pointer">
-          <button
-            :disabled="!this.next"
-            @click="later"
-            class="btn btn-sm btn-outline-light text-dark"
-          >
-            <font-awesome-icon class="mr-2" icon="angle-right" /><translate
-              >Later</translate
-            >
-          </button>
-        </div>
-        <div class="d-flex flex-row">
+        <button
+          :disabled="!this.prev"
+          @click="earlier"
+          class="btn btn-xs btn-outline-secondary"
+        >
+          <font-awesome-icon icon="angle-left" fixed-width />
+          <translate>Earlier</translate>
+        </button>
+        <div class="d-flex align-items-center small">
+          {{ interval[0] | dateTime }}
+          <span class="mx-2">&ndash;</span>
+          {{ interval[1] | dateTime }}
           <select
-            class="my-auto btn btn-outline-light text-dark form-control interval-select"
+            style="width: 75px; height: 24px"
+            class="form-control form-control-sm small ml-2"
             v-model="selectedInterval"
           >
-            <option :value="$options.LAST_HOUR"
-              ><translate>Hour</translate></option
-            >
+            <option :value="$options.LAST_HOUR">
+              <translate>Hour</translate>
+            </option>
             <option :value="$options.TODAY"><translate>Day</translate></option>
-            <option :value="$options.LAST_7_DAYS"
-              ><translate>7 days</translate></option
-            >
+            <option :value="$options.LAST_7_DAYS">
+              <translate>7 days</translate>
+            </option>
             <option :value="$options.LAST_30_DAYS">
               <translate>30 Days</translate>
             </option>
           </select>
         </div>
+        <button
+          :disabled="!this.next"
+          @click="later"
+          class="btn btn-xs btn-outline-secondary"
+        >
+          <translate>Later</translate>
+          <font-awesome-icon icon="angle-right" fixed-width />
+        </button>
       </div>
       <UITableHeader
         :columns="[
@@ -85,11 +77,15 @@
      -->
       <UITableBody
         :data="filteredImports() | sortTable(sortColumn, sortDirection)"
+        :isActive="item => item.id === this.show"
         maxHeight="73vh"
       >
         <template v-slot:row="{ item: entry }">
           <LogEntry :entry="entry"></LogEntry>
         </template>
+        <template v-slot:expand="{ item: entry }">
+          <LogDetail :entry="entry"></LogDetail>
+        </template>
       </UITableBody>
     </div>
   </div>
@@ -129,7 +125,8 @@
 export default {
   components: {
     Filters: () => import("./Filters.vue"),
-    LogEntry: () => import("./LogEntry.vue")
+    LogEntry: () => import("./LogEntry.vue"),
+    LogDetail: () => import("./LogDetail.vue")
   },
   mixins: [sortTable],
   LAST_HOUR: "lasthour",
@@ -321,7 +318,7 @@
           query: this.searchQuery
         })
         .then(() => {
-          if (this.show != -1) {
+          if (this.show) {
             this.loadDetails(this.show)
               .then(response => {
                 this.$store.commit("imports/setCurrentDetails", response.data);
@@ -418,23 +415,12 @@
   },
   mounted() {
     const { id } = this.$route.params;
-    if (!id) {
+    if (id) {
+      this.showSingleRessource(id);
+    } else {
       this.$store.commit("application/searchQuery", "");
       this.loadLogs();
-    } else {
-      this.showSingleRessource(id);
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.date {
-  font-stretch: condensed;
-}
-.interval-select {
-  padding: 0px;
-  margin: 0px;
-  font-size: 80%;
-}
-</style>