- fixed overflow

resources/js/Pages/Dashboard.vue

@@ -3,11 +3,9 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
-      <VacationCalendar />
       <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
-      <VacationCalendar />
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -40,7 +38,6 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
 import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
 import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
-import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
 
 defineProps({
   auth: Object,

resources/js/Pages/Holidays/Index.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Keys.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/MonthlyUsage.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Resumes/Index.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Technologies.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Users/Index.vue

@@ -30,7 +30,7 @@
           >
         </div>
       </div>
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/VacationLimits.vue

@@ -10,13 +10,13 @@
     </div>
     <div class="border-t border-gray-200">
       <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
+        <div class="overflow-x-auto">
           <table class="min-w-full border-b divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <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">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
-                  <div class="flex">
+                  <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">
+                      <p class="flex items-start flex-col-reverse md:flex-row">
-                        {{ item.user.name }}
+                        <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>

resources/js/Pages/VacationRequest/Index.vue

@@ -88,7 +88,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -53,7 +53,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                class="overflow-x-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-slot="{ active }"
@@ -237,7 +237,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -1,300 +0,0 @@
-<template>
-  <section class="bg-white shadow-md">
-    <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
-      </h2>
-      <div class="flex justify-center">
-        <div class="flex items-center rounded-md shadow-sm md:items-stretch">
-          <button
-            v-if="calendar.currents.month > 1"
-            type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            @click="toLast"
-          >
-            <span class="sr-only">Previous {{ viewMode.key }}</span>
-            <ChevronLeftIcon
-              class="h-5 w-5"
-              aria-hidden="true"
-            />
-          </button>
-          <button
-            type="button"
-            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
-            :class="[calendar.currents.month === 1 ? 'rounded-l-md border border-r-0' : undefined, calendar.currents.month === 12 ? 'rounded-r-md border border-l-0' : undefined]"
-            @click="resetCalendar"
-          >
-            Today
-          </button>
-          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
-          <button
-            v-if="calendar.currents.month < 12"
-            type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            @click="toNext"
-          >
-            <span class="sr-only">Next {{ viewMode.key }}</span>
-            <ChevronRightIcon
-              class="h-5 w-5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-      <Menu
-        as="div"
-        class="flex justify-end relative"
-      >
-        <MenuButton
-          type="button"
-          class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-        >
-          {{ viewMode.name }}
-          <ChevronDownIcon
-            class="ml-2 h-5 w-5 text-gray-400"
-            aria-hidden="true"
-          />
-        </MenuButton>
-
-        <transition
-          class="z-10"
-          enter-active-class="transition ease-out duration-100"
-          enter-from-class="transform opacity-0 scale-95"
-          enter-to-class="transform opacity-100 scale-100"
-          leave-active-class="transition ease-in duration-75"
-          leave-from-class="transform opacity-100 scale-100"
-          leave-to-class="transform opacity-0 scale-95"
-        >
-          <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div class="py-1">
-              <MenuItem
-                v-for="option in viewModeOptions"
-                :key="option.key"
-                v-slot="{ active }"
-              >
-                <button
-                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
-                  @click="updateViewMode(option.key)"
-                >
-                  {{ option.name }}
-                  <CheckIcon
-                    v-if="option.key === viewMode.key"
-                    class="ml-2 w-5 h-5 text-blumilk-500"
-                  />
-                </button>
-              </MenuItem>
-            </div>
-          </MenuItems>
-        </transition>
-      </Menu>
-    </div>
-    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-      <div
-        v-if="viewMode.key === 'month'"
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
-      >
-        <div class="bg-white py-2">
-          Pn
-        </div>
-        <div class="bg-white py-2">
-          Wt
-        </div>
-        <div class="bg-white py-2">
-          Śr
-        </div>
-        <div class="bg-white py-2">
-          Cz
-        </div>
-        <div class="bg-white py-2">
-          Pt
-        </div>
-        <div class="bg-red-100 py-2">
-          Sb
-        </div>
-        <div class="bg-red-100 py-2">
-          Nd
-        </div>
-      </div>
-      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
-          <div
-            v-for="(day, index) in days"
-            :key="index"
-            class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : 'month-day', 'relative py-2 px-3']"
-          >
-            <time
-              :datetime="day.date"
-              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
-            >
-              {{ day.date.split('-').pop().replace(/^0/, '') }}
-            </time>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch, computed, reactive } from 'vue'
-import { DateTime } from 'luxon'
-import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
-import { useMonthInfo } from '@/Composables/monthInfo'
-
-let days = ref([])
-const months = useMonthInfo().getMonths()
-function getCurrentDate() {
-  const { year, month, weekNumber } = DateTime.now()
-  return { year, month, weekNumber }
-}
-const selectedYear = useCurrentYearPeriodInfo().year.value
-const currentDate = getCurrentDate()
-let viewModeOptions = [
-  { key: 'week', name: 'Week view' },
-  { key: 'month', name: 'Month view' },
-]
-const calendar = {
-  viewMode: ref('week'),
-  currents: reactive({
-    year: selectedYear,
-    month: selectedYear === currentDate.year ? currentDate.month : 1,
-    week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
-  }),
-}
-watch([calendar.viewMode, calendar.currents], () => {
-  loadCalendar()
-})
-
-const viewMode = computed(() => {
-  const key = calendar.viewMode.value
-  return {
-    key,
-    name: viewModeOptions.find((obj) => obj.key === key)?.name,
-  }
-})
-const monthName = computed(() => months[calendar.currents.month - 1]?.name)
-
-loadCalendar()
-
-function loadCalendar() {
-  let focusDate = DateTime.fromObject({
-    year: calendar.currents.year,
-    month: calendar.currents.month,
-  })
-  let start, end
-
-  if (viewMode.value.key === 'week') {
-    if (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
-    else
-      focusDate = focusDate.plus({ week: calendar.currents.week - 1 } )
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('week')
-  } else if (viewMode.value.key === 'month') {
-    focusDate = focusDate.startOf('month')
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('month').endOf('week')
-  }
-
-  generateCalendarData(start, end, focusDate)
-}
-
-function generateCalendarData(startDate, endDate, focusDate) {
-  const tmpDays = []
-  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
-    const isCurrentMonth = isInCurrentMonth(day, focusDate)
-    const okIsToday = isToday(day)
-
-    tmpDays.push({
-      date: day.toISODate(),
-      isCurrentMonth,
-      isToday: okIsToday,
-    })
-  }
-
-  days.value = tmpDays
-}
-
-function toLast() {
-  if (viewMode.value.key === 'week')
-    addWeeks(-1)
-  else
-    addMonths(-1)
-}
-
-function toNext() {
-  if (viewMode.value.key === 'week') {
-    addWeeks()
-  } else
-    addMonths()
-}
-
-function resetCalendar() {
-  calendar.currents.year = selectedYear
-  calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
-  calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
-}
-
-function addWeeks(howMany = 1) {
-  calendar.currents.week += howMany
-}
-
-function addMonths(howMany = 1) {
-  calendar.currents.month += howMany
-}
-
-function updateViewMode(type) {
-  resetCalendar()
-  calendar.viewMode.value = type
-}
-
-function isInCurrentMonth(date, currentMonth) {
-  return currentMonth.hasSame(date, 'month')
-}
-
-function isToday(date) {
-  return date.toISODate() === DateTime.local().toISODate()
-}
-</script>
-
-<style lang="css">
-.day:nth-of-type(7n - 6):before {
-  content: "Pn";
-}
-
-.day:nth-of-type(7n - 5):before {
-  content: "Wt";
-}
-
-.day:nth-of-type(7n - 4):before {
-  content: "Śr";
-}
-
-.day:nth-of-type(7n - 3):before {
-  content: "Cz";
-}
-
-.day:nth-of-type(7n - 2):before {
-  content: "Pt";
-}
-
-.day:nth-of-type(7n - 1):before,
-.day:nth-of-type(7n):before {
-  color: #991b1b;
-}
-
-.day:nth-of-type(7n - 1):before {
-  content: "Sb";
-}
-
-.day:nth-of-type(7n):before {
-  content: "Nd";
-}
-
-.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
-  background-color: #fee2e2;
-}
-</style>