From f755e1e0dbf8391d35c37114187cd76c17701e4a Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 14 Jun 2022 19:12:03 +0200
Subject: [PATCH 1/5] #152 - updated calendar

---
 resources/js/Pages/Calendar.vue | 37 +++++++++++++++++++++++----------
 tailwind.config.js              |  8 +++++++
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 871df95..28fd1c4 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -55,18 +55,20 @@
       </div>
     </div>
     <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
+      <table class="w-full text-sm text-center border-y border-r border-gray-300">
         <thead>
           <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+            <th
+              class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-center items-center">
-                {{ selectedMonth.name }} {{ years.selected.year }}
+                {{ selectedMonth.name }}
               </div>
             </th>
             <th
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
               style="min-width: 46px;"
               :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
             >
@@ -84,22 +86,28 @@
             v-for="user in users.data"
             :key="user.id"
           >
-            <th class="p-2 border border-gray-300">
+            <th
+              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-start items-center">
-                <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
+                <span class="hidden justify-center items-center w-8 h-8 rounded-full md:inline-flex">
                   <img :src="user.avatar">
                 </span>
-                <div class="ml-3">
-                  <div class="text-sm font-medium text-gray-900 truncate">
-                    {{ user.name }}
-                  </div>
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                  <span
+                    v-for="split in user.name.split(' ', 2)"
+                    :key="split"
+                    class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                  >
+                    {{ split }}
+                  </span>
                 </div>
               </div>
             </th>
             <td
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="border border-gray-300"
+              class="border second:border-l-0 border-gray-300"
               :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
               @mouseover="setActiveDay(user.id + '+' + day.date)"
               @mouseleave="unsetActiveDay"
@@ -176,3 +184,10 @@ function linkParameters(user, day) {
   return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 </script>
+
+<style lang="css">
+.sticky-border {
+  box-shadow: inset -1px 0 rgb(209 213 219 / 1),
+              inset 1px 0 rgb(209 213 219 / 1);
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9493ebe..c425e8f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
@@ -31,5 +32,12 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
+    plugin(function({ addVariant, e }) {
+      addVariant('second', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`second${separator}${className}`)}:nth-child(2)`
+        })
+      })
+    }),
   ],
 }

From 5f0d6b5af333bdc779ea968e737c796081492645 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 14 Jun 2022 21:37:16 +0200
Subject: [PATCH 2/5] #152 - updated header in calendar

---
 .../VacationRequest/IndexForApprovers.vue     | 42 +++----------------
 1 file changed, 5 insertions(+), 37 deletions(-)

diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index d4303af..fc93ca4 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -242,46 +242,12 @@
         <thead class="bg-gray-50">
           <tr>
             <th
+              v-for="head in headers"
+              :key="head"
               scope="col"
               class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
+              {{ head }}
             </th>
             <th scope="col" />
           </tr>
@@ -381,6 +347,8 @@ const props = defineProps({
   types: Object,
 })
 
+const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
+
 const statuses = [
   {
     name: 'Wszystkie',

From 8dc487a133ef8bf0a9c9bd734192813bb28efa11 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 20 Jun 2022 10:57:28 +0200
Subject: [PATCH 3/5] #152 - updated MonthlyUsage

---
 resources/js/Pages/MonthlyUsage.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
index 0db17f2..fb8c50a 100644
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -9,11 +9,11 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+      <div class="overflow-x-auto xl:overflow-x-visible">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
                 Pracownik
               </th>
               <th
@@ -38,7 +38,7 @@
               :key="item.user.id"
               class="hover:bg-blumilk-25"
             >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
                 <div class="flex justify-start items-center">
                   <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
@@ -46,12 +46,14 @@
                       :src="item.user.avatar"
                     >
                   </span>
-                  <div class="ml-3">
-                    <div
-                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                    <span
+                      v-for="split in item.user.name.split(' ', 2)"
+                      :key="split"
+                      class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
                     >
-                      {{ item.user.name }}
-                    </div>
+                      {{ split }}
+                    </span>
                   </div>
                 </div>
               </th>

From e6f4d0e78c5692795e5f9203f968a9b90deb73d2 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 21 Jun 2022 13:11:58 +0200
Subject: [PATCH 4/5] #152 - updated calendar view

---
 resources/js/Pages/Calendar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 28fd1c4..95cc189 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -90,7 +90,7 @@
               class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
             >
               <div class="flex justify-start items-center">
-                <span class="hidden justify-center items-center w-8 h-8 rounded-full md:inline-flex">
+                <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                   <img :src="user.avatar">
                 </span>
                 <div class="ml-3 flex items-start flex-col-reverse md:flex-row">

From 9e47c7cb282ec5d28a09ddbf011a2700c9457028 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 11:41:59 +0200
Subject: [PATCH 5/5] #152 - updated vacation limits

---
 resources/js/Pages/VacationLimits.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index 38b7315..02cfca1 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -16,7 +16,7 @@
               <tr>
                 <th
                   scope="col"
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
                 >
                   Imię i nazwisko
                 </th>
@@ -52,8 +52,8 @@
                 :key="item.id"
                 class="hover:bg-blumilk-25"
               >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <div class="flex">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
+                  <div class="flex justify-start items-center">
                     <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                       <img
                         class="w-10 h-10 rounded-full"
@@ -61,10 +61,16 @@
                       >
                     </span>
                     <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ item.user.name }}
+                      <p class="flex items-start flex-col-reverse md:flex-row">
+                        <span
+                          v-for="split in item.user.name.split(' ', 2)"
+                          :key="split"
+                          class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                        >
+                          {{ split }}
+                        </span>
                       </p>
-                      <p class="text-sm text-gray-500 break-all">
+                      <p class="hidden md:block text-sm text-gray-500 break-all">
                         {{ item.user.email }}
                       </p>
                     </div>