# HG changeset patch
# User Sascha L. Teichmann <sascha.teichmann@intevation.de>
# Date 1552994922 -3600
# Node ID 1c0307207162d65423de89147d7dfd97d6cfa962
# Parent  56c8ef515d93604f17ab92b2a236a6f9fb8d5d19# Parent  305af1e2975dde6f968cd13befc7cd706f8f39d7
Merged.

diff -r 56c8ef515d93 -r 1c0307207162 client/src/components/importoverview/ImportOverview.vue
--- a/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 12:28:22 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 12:28:42 2019 +0100
@@ -29,31 +29,36 @@
       </div>
       <UITableHeader
         :columns="[
-          { id: 'id', title: 'Id', class: 'col-1' },
+          { id: 'id', title: 'Id', width: '79px' },
           {
             id: 'kind',
             title: 'Kind',
-            class: 'col-1'
+            width: '53px'
           },
           {
             id: 'enqueued',
             title: 'Enqueued',
-            class: 'col-3'
+            width: '138px'
           },
           {
             id: 'user',
             title: 'User',
-            class: 'user'
+            width: '105px'
           },
           {
             id: 'signer',
             title: 'Signer',
-            class: 'signer'
+            width: '105px'
           },
           {
             id: 'state',
             title: 'Status',
-            class: 'col-2'
+            width: '72px'
+          },
+          {
+            id: 'warning',
+            icon: 'exclamation-triangle',
+            width: '44px'
           }
         ]"
         @sortingChanged="sortBy"
diff -r 56c8ef515d93 -r 1c0307207162 client/src/components/importoverview/LogEntry.vue
--- a/client/src/components/importoverview/LogEntry.vue	Tue Mar 19 12:28:22 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Tue Mar 19 12:28:42 2019 +0100
@@ -1,44 +1,45 @@
 <template>
   <div class="logentry">
     <div class="row no-gutters text-left">
-      <div style="width: 4%;" class="text-center">
+      <div
+        style="width: 79px;"
+        class="table-cell d-flex justify-content-between"
+      >
         <font-awesome-icon
           @click="toggleDetails"
-          class="my-auto mr-1 text-info pointer"
+          class="my-auto text-info pointer"
           :icon="entry.id === show ? 'angle-down' : 'angle-right'"
           fixed-width
         ></font-awesome-icon>
-      </div>
-      <div style="width: 5%; padding-right: 10px;" class="text-right">
         {{ entry.id }}
       </div>
-      <div style="width: 8%;" class="text-center">
+      <div style="width: 53px;" class="table-cell text-center">
         {{ entry.kind.toUpperCase() }}
       </div>
-      <div style="width: 25%;" class="text-center">
+      <div style="width: 138px;" class="table-cell text-center">
         {{ entry.enqueued | dateTime }}
       </div>
-      <div style="width: 16%;padding-right: 10px;" class="text-center truncate">
+      <div style="width: 105px;" class="table-cell truncate">
         {{ entry.user }}
       </div>
-      <div style="width: 16%;padding-left: 20px;" class="text-left truncate">
+      <div style="width: 105px;" class="table-cell truncate">
         {{ entry.signer }}
       </div>
-      <div style="width: 9%;" class="text-left">
+      <div style="width: 72px;" class="table-cell text-center">
         <span v-if="entry.state === 'failed'" class="text-danger">{{
           entry.state
         }}</span>
         <span v-else>{{ entry.state }}</span>
       </div>
-      <div style="width: 2%;" class="text-left">
+      <div style="width: 44px;" class="table-cell text-center">
         <font-awesome-icon
           v-if="entry.warnings"
-          class="ml-1 text-warning"
+          class="text-warning"
           icon="exclamation-triangle"
           fixed-width
         ></font-awesome-icon>
       </div>
-      <div style="width: 8%" class="text-right">
+      <div style="flex-grow: 1; padding: 0;" class="table-cell text-right">
         <div v-if="entry.state === 'pending'">
           <button
             :class="['actions approved', { active: isApproved }]"
@@ -71,6 +72,37 @@
   </div>
 </template>
 
+<style lang="sass" scoped>
+.logentry
+  font-size: 80%
+  &:hover
+    background: #fafafa
+  .actions
+    height: 100%
+    width: 50%
+    border: 0
+    background: transparent
+    outline: none
+    &.approved
+      color: green
+      &.active,
+      &:hover
+        color: white
+        background: green
+    &.rejected
+      border-left: 1px solid #dee2e6
+      color: red
+      &.active,
+      &:hover
+        color: white
+        background: red
+.table-cell
+  padding: 0 3px
+  border-right: solid 1px #dee2e6
+  &:last-child
+    border-right: none
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -149,29 +181,3 @@
   STATES: STATES
 };
 </script>
-
-<style lang="sass" scoped>
-.logentry
-  font-size: 80%
-  &:hover
-    background: #fafafa
-  .actions
-    height: 100%
-    width: 22px
-    border: 0
-    background: transparent
-    border-left: 1px solid #dee2e6
-    outline: none
-    &.approved
-      color: green
-      &.active,
-      &:hover
-        color: white
-        background: green
-    &.rejected
-      color: red
-      &.active,
-      &:hover
-        color: white
-        background: red
-</style>
diff -r 56c8ef515d93 -r 1c0307207162 client/src/components/ui/UITableHeader.vue
--- a/client/src/components/ui/UITableHeader.vue	Tue Mar 19 12:28:22 2019 +0100
+++ b/client/src/components/ui/UITableHeader.vue	Tue Mar 19 12:28:42 2019 +0100
@@ -5,22 +5,22 @@
       @click.prevent="sortBy(column.id)"
       :key="column.id"
       :class="[
-        'd-flex py-1 align-items-center justify-content-center small col ' +
-          column.class,
+        'd-flex py-1 align-items-center justify-content-center small ' +
+          column.class || '',
         { active: sortColumn === column.id }
       ]"
+      :style="`width: ${column.width};`"
     >
       <span
         :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
         v-if="sortable"
       >
-        <font-awesome-icon
-          :icon="sortIcon(column.id)"
-          class="ml-1"
-          fixed-width
-        />
+        <font-awesome-icon :icon="sortIcon(column.id)" fixed-width />
       </span>
-      {{ $gettext(column.title) }}
+      <font-awesome-icon v-if="column.icon" :icon="column.icon" fixed-width />
+      <span v-if="column.title">
+        {{ $gettext(column.title) }}
+      </span>
     </a>
     <div v-if="extraColumnForButtons" class="col"></div>
   </div>