From 0e64a815eadf6963d0b12e60c28c2066361e5c1e Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sat, 9 Oct 2021 23:57:39 +0200
Subject: [PATCH] finetuning Schedule component

---
 src/components/Schedule.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Schedule.vue b/src/components/Schedule.vue
index 5de30f0..830a258 100644
--- a/src/components/Schedule.vue
+++ b/src/components/Schedule.vue
@@ -13,7 +13,7 @@ AddEmployeeModal(
 table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex")
     thead
         tr
-            td(style="width: 150px" class="fw-bold") {{ format(startDate, "MMMM", {locale: de}) }}
+            td.fw-bold(style="width: 150px") {{ format(startDate, "MMMM", {locale: de}) }}
             td(v-for="(day, index) in weekdays" :key="index"  :class="{'text-body text-opacity-50 bg-secondary bg-opacity-10' : row.dates[index] === null}") {{ day }}
         tr
             td.fw-bold {{ format(startDate, "y") }}
@@ -21,15 +21,17 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
                 template(v-if="date !== null") {{ format(date, "dd.MM.")}}
     tbody 
         tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
-            td.text-start
-                button.btn(
-                    @click="removeEmployee(rIndex, employee)"
-                )
-                    i.bi-x-lg.me-2
-                    | {{employee.handle}}
+            td
+                .row.justify-content-between.align-items-center.employee-wrapper
+                    .col.text-start.ps-3 {{employee.handle}}
+                    .col.text-end
+                        button.btn(
+                            @click="removeEmployee(rIndex, employee)"
+                        )
+                            i.bi-x-lg
             td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") &nbsp;
         tr()
-            td.text-start(style="width: 250px")
+            td.text-end
                 button(
                         class="btn" 
                         @click="addEmployeeRow = rIndex"
@@ -139,4 +141,14 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
         background-color: aliceblue !important;
     }
 
+    div.employee-wrapper .btn {
+        transition: 0.3s;
+        opacity: 0;
+        border: 0px;
+    }
+
+    div.employee-wrapper:hover .btn {
+        opacity: 1;
+    }
+
 </style>
\ No newline at end of file