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

fix css focuses

Browse Source
This commit is contained in:
Adrian Hopek 2022-04-11 08:47:35 +02:00
parent 4af0482a93
commit 90e8812a98
10 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/Composables/vacationTypeInfo.js
View File

@ -14,8 +14,8 @@ const types = [
text: 'Urlop wypoczynkowy', text: 'Urlop wypoczynkowy',
value: 'vacation', value: 'vacation',
icon: WhiteBalanceSunnyIcon, icon: WhiteBalanceSunnyIcon,
color: 'text-amber-300', color: 'text-yellow-500',
border: 'border-amber-300', border: 'border-yellow-500',
}, },
{ {
text: 'Urlop na żądanie', text: 'Urlop na żądanie',

6
resources/js/Pages/AnnualSummary.vue
View File

@ -39,7 +39,7 @@
offset-distance="0" offset-distance="0"
> >
<div :class="[day.isPendingVacation && 'mx-0.5']"> <div :class="[day.isPendingVacation && 'mx-0.5']">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]"> <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
<time <time
:datetime="day.date.toISODate()" :datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']" :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@ -58,7 +58,7 @@
hover hover
offset-distance="0" offset-distance="0"
> >
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"> <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
<time <time
:datetime="day.date.toISODate()" :datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']" :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@ -74,7 +74,7 @@
</Popper> </Popper>
<button <button
v-else v-else
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent" class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
> >
<time <time
:datetime="day.date.toISODate()" :datetime="day.date.toISODate()"

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

@ -11,20 +11,20 @@
v-if="previousMonth" v-if="previousMonth"
as="button" as="button"
:href="`/vacation/calendar/${previousMonth.value}`" :href="`/vacation/calendar/${previousMonth.value}`"
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" 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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronLeftIcon class="w-5 h-5" /> <ChevronLeftIcon class="w-5 h-5" />
</InertiaLink> </InertiaLink>
<span <span
v-else v-else
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" 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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronLeftIcon class="w-5 h-5" /> <ChevronLeftIcon class="w-5 h-5" />
</span> </span>
<InertiaLink <InertiaLink
as="button" as="button"
:href="`/vacation/calendar/${currentMonth.value}`" :href="`/vacation/calendar/${currentMonth.value}`"
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" 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 focus:outline-blumilk-500 md:flex"
> >
Dzisiaj Dzisiaj
</InertiaLink> </InertiaLink>
@ -32,13 +32,13 @@
v-if="nextMonth" v-if="nextMonth"
as="button" as="button"
:href="`/vacation/calendar/${nextMonth.value}`" :href="`/vacation/calendar/${nextMonth.value}`"
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" 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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronRightIcon class="w-5 h-5" /> <ChevronRightIcon class="w-5 h-5" />
</InertiaLink> </InertiaLink>
<span <span
v-else v-else
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" 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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronRightIcon class="w-5 h-5" /> <ChevronRightIcon class="w-5 h-5" />
</span> </span>

4
resources/js/Pages/Users/Create.vue
View File

@ -112,7 +112,7 @@
</ListboxLabel> </ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
> >
<span class="block truncate">{{ form.role.label }}</span> <span class="block truncate">{{ form.role.label }}</span>
@ -166,7 +166,7 @@
</ListboxLabel> </ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.employmentForm.label }}</span> <span class="block truncate">{{ form.employmentForm.label }}</span>

4
resources/js/Pages/Users/Edit.vue
View File

@ -112,7 +112,7 @@
</ListboxLabel> </ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.role.label }}</span> <span class="block truncate">{{ form.role.label }}</span>
@ -170,7 +170,7 @@
</ListboxLabel> </ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.employmentForm.label }}</span> <span class="block truncate">{{ form.employmentForm.label }}</span>

4
resources/js/Pages/VacationRequest/Create.vue
View File

@ -63,7 +63,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <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 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-for="user in users.data" v-for="user in users.data"
@ -156,7 +156,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" 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 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm"> <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">
<ListboxOption <ListboxOption
v-for="vacationType in vacationTypes" v-for="vacationType in vacationTypes"
:key="vacationType.value" :key="vacationType.value"

8
resources/js/Pages/VacationRequest/Index.vue
View File

@ -19,7 +19,7 @@
<button <button
v-for="(status, index) in statuses" v-for="(status, index) in statuses"
:key="index" :key="index"
:class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']" :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
@click="form.status = status" @click="form.status = status"
> >
<span>{{ status.name }}</span> <span>{{ status.name }}</span>
@ -140,7 +140,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline" class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
> >
{{ request.name }} {{ request.name }}
</InertiaLink> </InertiaLink>
@ -163,13 +163,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="flex justify-around" class="flex justify-around focus:outline-blumilk-500"
> >
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" /> <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink> </InertiaLink>
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="absolute inset-0" class="absolute inset-0 focus:outline-blumilk-500"
/> />
</td> </td>
</tr> </tr>

6
resources/js/Pages/VacationRequest/IndexForApprovers.vue
View File

@ -219,7 +219,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline" class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline focus:outline-blumilk-500"
> >
{{ request.name }} {{ request.name }}
</InertiaLink> </InertiaLink>
@ -257,13 +257,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="flex justify-around" class="flex justify-around focus:outline-blumilk-500"
> >
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" /> <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink> </InertiaLink>
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="absolute inset-0" class="absolute inset-0 focus:outline-blumilk-500"
/> />
</td> </td>
</tr> </tr>

6
resources/js/Shared/MainMenu.vue
View File

@ -71,7 +71,7 @@
</InertiaLink> </InertiaLink>
</div> </div>
<div class="pt-3 mt-3"> <div class="pt-3 mt-3">
<div class="px-2 space-y-1"> <div class="py-1 px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in navigation" v-for="item in navigation"
:key="item.name" :key="item.name"
@ -107,7 +107,7 @@
<nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800"> <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800">
<InertiaLink <InertiaLink
href="/" href="/"
:class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']" :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 mt-1 text-sm leading-6 font-medium rounded-md']"
> >
<HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" /> <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
Strona główna Strona główna
@ -152,7 +152,7 @@
</div> </div>
<div> <div>
<MenuButton <MenuButton
class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm" class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
> >
{{ years.selected.year }} {{ years.selected.year }}
<ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" /> <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />

4
resources/lang/pl.json
View File

@ -59,8 +59,8 @@
"Vacation type: :type": "Rodzaj wniosku: :type", "Vacation type: :type": "Rodzaj wniosku: :type",
"From :from to :to (number of days: :days)": "Od :from do :to (liczba dni: :days)", "From :from to :to (number of days: :days)": "Od :from do :to (liczba dni: :days)",
"Click here for details": "Kliknij, aby zobaczyć szczegóły", "Click here for details": "Kliknij, aby zobaczyć szczegóły",
"Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptacje techniczną", "Vacation request :title is waiting for your technical approval": "Wniosek urlopowy :title czeka na akceptację techniczną",
"Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptacje administracyjną", "Vacation request :title is waiting for your administrative approval": "Wniosek urlopowy :title czeka na akceptację administracyjną",
"The vacation request :title from user :requester is waiting for your technical approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację techniczną.", "The vacation request :title from user :requester is waiting for your technical approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację techniczną.",
"The vacation request :title from user :requester is waiting for your administrative approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację administracyjną.", "The vacation request :title from user :requester is waiting for your administrative approval.": "Wniosek urlopowy :title od użytkownika :requester czeka na Twoją akceptację administracyjną.",
"Vacation request :title has been :status": "Wniosek urlopowy :title został :status", "Vacation request :title has been :status": "Wniosek urlopowy :title został :status",