# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1551438454 -3600
# Node ID 9b7138751f5b34aff3f45a99c08c58f0caff1ca6
# Parent  9de710bdb535300aafcda2f6635390163a7d8796
staging: layout logs

diff -r 9de710bdb535 -r 9b7138751f5b client/src/components/importoverview/importlogs/LogDetail.vue
--- a/client/src/components/importoverview/importlogs/LogDetail.vue	Fri Mar 01 10:53:52 2019 +0100
+++ b/client/src/components/importoverview/importlogs/LogDetail.vue	Fri Mar 01 12:07:34 2019 +0100
@@ -51,72 +51,62 @@
     </div>
     <div class="detailstable d-flex flex-row">
       <div :class="collapse">
-        <table class="table table-responsive">
-          <thead>
-            <tr>
-              <th class="type pb-0">
-                <small class="condensed"><translate>Kind</translate></small>
-              </th>
-              <th class="datetime  pb-0">
-                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
-                  ><small class="condensed"><translate>Date</translate></small>
-                  <small class="condensed"
-                    ><font-awesome-icon
-                      :icon="sortIcon"
-                      class="ml-1"
-                    ></font-awesome-icon></small
-                ></a>
-              </th>
-              <th class="message pb-0">
-                <small class="condensed"><translate>Message</translate></small>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(entry, index) in sortedEntries"
-              :key="index"
-              class="detailsrow"
+        <div class="text-left">
+          <small style="margin-right:10px" class="type condensed"
+            ><translate>Kind</translate></small
+          >
+          <a
+            href="#"
+            @click="sortAsc = !sortAsc"
+            style="margin-right:58px"
+            class="datetime sort-link"
+            ><small class="condensed"><translate>Date</translate></small>
+            <small class="message condensed"
+              ><font-awesome-icon
+                :icon="sortIcon"
+                class="ml-1"
+              ></font-awesome-icon></small
+          ></a>
+          <small class="condensed"><translate>Message</translate></small>
+        </div>
+        <div class="logentries">
+          <div
+            v-for="(entry, index) in sortedEntries"
+            :key="index"
+            class="detailsrow text-left"
+          >
+            <small
+              :class="[
+                'condensed type',
+                {
+                  'text-danger': entry.kind.toUpperCase() == 'ERROR',
+                  'text-warning': entry.kind.toUpperCase() == 'WARN'
+                }
+              ]"
+              >{{ entry.kind.toUpperCase() }}</small
             >
-              <td class="type">
-                <span
-                  :class="[
-                    'condensed',
-                    {
-                      'text-danger': entry.kind.toUpperCase() == 'ERROR',
-                      'text-warning': entry.kind.toUpperCase() == 'WARN'
-                    }
-                  ]"
-                  >{{ entry.kind.toUpperCase() }}</span
-                >
-              </td>
-              <td class="datetime">
-                <span
-                  :class="[
-                    'condensed',
-                    {
-                      'text-danger': entry.kind.toUpperCase() == 'ERROR',
-                      'text-warning': entry.kind.toUpperCase() == 'WARN'
-                    }
-                  ]"
-                  >{{ formatDateTime(entry.time) }}</span
-                >
-              </td>
-              <td class="message">
-                <span
-                  :class="[
-                    'condensed',
-                    {
-                      'text-danger': entry.kind.toUpperCase() == 'ERROR',
-                      'text-warning': entry.kind.toUpperCase() == 'WARN'
-                    }
-                  ]"
-                  >{{ entry.message }}</span
-                >
-              </td>
-            </tr>
-          </tbody>
-        </table>
+            <small
+              :class="[
+                'condensed datetime',
+                {
+                  'text-danger': entry.kind.toUpperCase() == 'ERROR',
+                  'text-warning': entry.kind.toUpperCase() == 'WARN'
+                }
+              ]"
+              >{{ formatDateTime(entry.time) }}</small
+            >
+            <small
+              :class="[
+                'condensed message',
+                {
+                  'text-danger': entry.kind.toUpperCase() == 'ERROR',
+                  'text-warning': entry.kind.toUpperCase() == 'WARN'
+                }
+              ]"
+              >{{ entry.message }}</small
+            >
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -265,6 +255,10 @@
 </script>
 
 <style lang="scss" scoped>
+.logentries {
+  overflow: auto;
+}
+
 .condensed {
   font-stretch: condensed;
 }
@@ -316,41 +310,20 @@
 }
 
 .detailsrow {
-  line-height: 0.1em;
+  line-height: 0.7rem;
 }
 
 .type {
-  width: 65px;
   white-space: nowrap;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
 }
 
 .datetime {
-  width: 200px;
   white-space: nowrap;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .message {
-  min-width: 700px;
   white-space: nowrap;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
-}
-
-thead,
-tbody {
-  display: block;
-}
-
-tbody {
-  height: 150px;
-  overflow-y: auto;
-  overflow-x: auto;
 }
 </style>