#99 - ui changes (#100)

* #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

View File

@@ -1,19 +1,19 @@
<template>
<section class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Dzisiejsze nieobecności
</h2>
</div>
<div class="border-t border-gray-200 px-4 sm:px-6">
<div class="px-4 border-t border-gray-200 sm:px-6">
<ul class="divide-y divide-gray-200">
<li
v-for="absence in absences"
:key="absence.user.id"
class="py-4 flex"
class="flex py-4"
>
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="absence.user.avatar"
>
<div class="ml-3">

View File

@@ -1,11 +1,11 @@
<template>
<section class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Wnioski oczekujące na akcje
</h2>
</div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li
@@ -30,7 +30,7 @@
<div class="mt-3 text-sm text-gray-600">
<div class="flex">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="request.user.avatar"
>
<div class="ml-3">
@@ -56,7 +56,7 @@
<InertiaLink
href="/vacation/requests"
:data="{status: 'waiting_for_action'}"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
class="flex justify-center items-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"
>
Zobacz wszystkie
</InertiaLink>

View File

@@ -1,16 +1,16 @@
<template>
<section class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Najbliższe dni wolne
</h2>
</div>
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<ul class="divide-y divide-gray-200">
<li
v-for="holiday in holidays"
:key="holiday.id.id"
class="py-4 flex"
class="flex py-4"
>
<div>
<p class="text-sm font-medium text-gray-900">
@@ -30,7 +30,7 @@
<div>
<InertiaLink
href="/holidays"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
class="flex justify-center items-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"
>
Zobacz wszystkie
</InertiaLink>

View File

@@ -1,11 +1,11 @@
<template>
<section class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Twoje wnioski
</h2>
</div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
<div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li
@@ -42,7 +42,7 @@
<div class="mt-6">
<InertiaLink
href="/vacation/requests/me"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
class="flex justify-center items-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"
>
Zobacz wszystkie
</InertiaLink>

View File

@@ -1,62 +1,62 @@
<template>
<section class="grid grid-cols-2 gap-4">
<div class="bg-white shadow-md p-4">
<section class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="hidden p-4 bg-white shadow-md md:block">
<VacationChart :stats="stats" />
</div>
<div class="h-full">
<div class="grid grid-cols-2 gap-4 h-full">
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
<div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dd class="mt-1 text-4xl font-semibold text-blumilk-500">
{{ stats.remaining }}
</dd>
<dt class="text-md font-medium text-gray-700 truncate">
<dt class="font-medium text-gray-700 truncate text-md">
Pozostało
</dt>
<dt class="text-sm font-medium text-gray-500 mt-2">
<dt class="mt-2 text-sm font-medium text-gray-500">
Dni do wykorzystania teraz.
</dt>
</div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
<div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dd class="mt-1 text-4xl font-semibold text-blumilk-700">
{{ stats.used }}
</dd>
<dt class="text-md font-medium text-gray-700 truncate">
Dni wykorzystane
<dt class="font-medium text-gray-700 truncate text-md">
Wykorzystane
</dt>
<dt class="text-sm font-medium text-gray-500 mt-2">
<dt class="mt-2 text-sm font-medium text-gray-500">
Dni, które zostały już wykorzystane na urlop wypoczynkowy.
</dt>
</div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
<div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-blumilk-200">
{{ stats.pending }}
</dt>
<dd class="text-md font-medium text-gray-500 truncate">
<dd class="font-medium text-gray-700 truncate text-md">
Rozpatrywane
</dd>
<dt class="text-sm font-medium text-gray-500 mt-2">
<dt class="mt-2 text-sm font-medium text-gray-500">
Dni czekające na akceptację przełożonych.
</dt>
</div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
<div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-gray-900">
{{ stats.limit }}
</dt>
<dd class="text-md font-medium text-gray-500 truncate">
<dd class="font-medium text-gray-700 truncate text-md">
Limit urlopu
</dd>
<dt class="text-sm font-medium text-gray-500 mt-2">
<dt class="mt-2 text-sm font-medium text-gray-500">
Twój roczny limit urlopu wypoczynkowego.
</dt>
</div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
<div class="col-span-2 py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-gray-900">
{{ stats.other }}
</dt>
<dd class="text-md font-medium text-gray-500 truncate">
<dd class="font-medium text-gray-700 truncate text-md">
Inne urlopy
</dd>
<dt class="text-sm font-medium text-gray-500 mt-2">
<dt class="mt-2 text-sm font-medium text-gray-500">
Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
</dt>
</div>

View File

@@ -1,16 +1,16 @@
<template>
<section>
<div class=" bg-white overflow-hidden shadow">
<div class="bg-white p-6">
<div class="sm:flex sm:items-center sm:justify-between">
<div class=" overflow-hidden bg-white shadow">
<div class="p-6 bg-white">
<div class="sm:flex sm:justify-between sm:items-center">
<div class="sm:flex sm:space-x-5">
<div class="flex-shrink-0">
<div class="shrink-0">
<img
class="mx-auto h-20 w-20 rounded-full"
class="mx-auto w-20 h-20 rounded-full"
:src="user.avatar"
>
</div>
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
<div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
<p class="text-sm font-medium text-gray-600">
Cześć,
</p>