kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#99 - ui changes (#100)

Browse Source 
* #99 - ui changes

* #99 - logo fix

* #99 - tailwind plugin for eslint

* #99 - fix

* #99 - fix

* #99 - fix pagination

* #99 - fix logo

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
2022-03-31 10:12:33 +02:00
committed by GitHub
parent 08421b8a69
commit b49fcadbba
38 changed files with 758 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/Pages/Calendar.vue
View File

@@ -3,28 +3,28 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-center text-gray-900">
Kalendarz urlopów
</h2>
<div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
<div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
<InertiaLink
v-if="previousMonth"
as="button"
:href="`/vacation/calendar/${previousMonth.value}`"
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"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronLeftIcon class="h-5 w-5" />
<ChevronLeftIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
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"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronLeftIcon class="h-5 w-5" />
<ChevronLeftIcon class="w-5 h-5" />
</span>
<InertiaLink
as="button"
:href="`/vacation/calendar/${currentMonth.value}`"
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex"
>
Dzisiaj
</InertiaLink>
@@ -32,32 +32,32 @@
v-if="nextMonth"
as="button"
:href="`/vacation/calendar/${nextMonth.value}`"
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"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronRightIcon class="h-5 w-5" />
<ChevronRightIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
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"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronRightIcon class="h-5 w-5" />
<ChevronRightIcon class="w-5 h-5" />
</span>
</div>
</div>
<div v-if="can.generateTimesheet">
<a
:href="`/vacation/timesheet/${selectedMonth.value}`"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Pobierz plik Excel
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center text-sm border border-gray-300">
<table class="w-full text-sm text-center border border-gray-300">
<thead>
<tr>
<th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
<th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
<div class="flex justify-center items-center">
{{ selectedMonth.name }} {{ years.selected.year }}
</div>
@@ -65,13 +65,13 @@
<th
v-for="day in calendar"
:key="day.dayOfMonth"
class="border border-gray-300 text-lg font-semibold text-gray-900 py-2 px-2"
class="p-2 text-lg font-semibold text-gray-900 border 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 }"
>
<div>
{{ day.dayOfMonth }}
<p class="font-normal mt-1 text-sm capitalize">
<p class="mt-1 text-sm font-normal capitalize">
{{ day.dayOfWeek }}
</p>
</div>
@@ -83,9 +83,9 @@
v-for="user in users.data"
:key="user.id"
>
<th class="border border-gray-300 py-2 px-2">
<th class="p-2 border border-gray-300">
<div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-8 w-8 rounded-full">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
<img :src="user.avatar">
</span>
<div class="ml-3">