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

updated calendar #tab

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-06-14 19:12:03 +02:00
parent 9147b859d3
commit 9dc9e95cca
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

8
tailwind.config.js
View File

@ -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)`
})
})
}),
],
}