diff client/src/components/importoverview/LogEntry.vue @ 2720:305af1e2975d

client: table headers: improved component to accept specific widths for columns
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Mar 2019 12:26:52 +0100
parents ef10f1cd6cb8
children 9465749410ba
line wrap: on
line diff
--- a/client/src/components/importoverview/LogEntry.vue	Tue Mar 19 12:20:54 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Tue Mar 19 12:26:52 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>