changeset 1888:45197e7a7ad3

import stretches: listing layout fixed
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 18 Jan 2019 09:47:05 +0100
parents 9f8f7d3fd655
children b6d0460b069d
files client/src/components/ImportStretches.vue
diffstat 1 files changed, 31 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Thu Jan 17 19:22:49 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Fri Jan 18 09:47:05 2019 +0100
@@ -5,23 +5,21 @@
       <translate>Define stretches</translate>
     </h6>
     <div v-if="!edit" class="mb-3">
-      <div
-        class="mt-3 mr-3 ml-3 d-flex flex-row justify-content-between border-bottom"
-      >
-        <div>id</div>
-        <div>funktion</div>
-        <div>startrhm</div>
-        <div>endrhm</div>
+      <div class="mt-3 mb-2 mr-3 ml-3 d-flex flex-row border-bottom">
+        <div class="id">id</div>
+        <div class="funktion">funktion</div>
+        <div class="startrhm">startrhm</div>
+        <div class="endrhm">endrhm</div>
       </div>
       <div
-        class=" mr-3 ml-3 d-flex flex-row justify-content-between"
+        class=" mr-3 ml-3 d-flex flex-row"
         v-for="stretch in stretches"
         :key="stretch.id"
       >
-        <div>{{ stretch.id }}</div>
-        <div>{{ stretch.funktion }}</div>
-        <div>{{ stretch.startrhm }}</div>
-        <div>{{ stretch.endrhm }}</div>
+        <div class="id">{{ stretch.id }}</div>
+        <div class="funktion">{{ stretch.funktion }}</div>
+        <div class="startrhm">{{ stretch.startrhm }}</div>
+        <div class="endrhm">{{ stretch.endrhm }}</div>
       </div>
       <div class="mt-3" v-if="stretches.length == 0">
         <translate>No results.</translate>
@@ -359,4 +357,24 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.id {
+  text-align: left;
+  width: 25%;
+}
+
+.funktion {
+  text-align: left;
+  width: 25%;
+}
+
+.endrhm {
+  text-align: left;
+  width: 25%;
+}
+
+.startrhm {
+  text-align: left;
+  width: 25%;
+}
+</style>