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

- improved calendar responsiveness

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-06 15:08:13 +02:00
parent 1d7b4da903
commit 783586d3ed
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/Shared/Widgets/VacationCalendar.vue
View File

@ -10,6 +10,7 @@
v-if="calendarState.isPrevious" v-if="calendarState.isPrevious"
type="button" 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" 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="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
@click="toLast" @click="toLast"
> >
<span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span> <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
@ -24,13 +25,17 @@
:class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }" :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
@click="goToToday" @click="goToToday"
> >
Dziś Dzisiaj
</button> </button>
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" /> <span
class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
:class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
/>
<button <button
v-if="calendarState.isNext" v-if="calendarState.isNext"
type="button" 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" 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="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
@click="toNext" @click="toNext"
> >
<span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span> <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@ -49,7 +54,8 @@
type="button" 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" 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"
> >
{{ calendarState.viewMode.details.name }} <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
<span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
<ChevronDownIcon <ChevronDownIcon
class="ml-2 h-5 w-5 text-gray-400" class="ml-2 h-5 w-5 text-gray-400"
aria-hidden="true" aria-hidden="true"
@ -164,6 +170,7 @@ const currentDate = getCurrentDate()
const months = useMonthInfo().getMonths() const months = useMonthInfo().getMonths()
const { findType } = useVacationTypeInfo() const { findType } = useVacationTypeInfo()
const selectedYear = useCurrentYearPeriodInfo().year.value const selectedYear = useCurrentYearPeriodInfo().year.value
const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
const calendar = { const calendar = {
viewMode: ref('week'), viewMode: ref('week'),
@ -183,7 +190,7 @@ const calendarState = reactive({
monthName: computed(() => months[calendar.currents.month - 1]?.name), monthName: computed(() => months[calendar.currents.month - 1]?.name),
isActualYear: computed(() => calendar.currents.year === DateTime.now().year), isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0), isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber), isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
}) })
const customCalendar = { const customCalendar = {