Skip to content

Commit

Permalink
Merge pull request #230 from ogomaemmanuel/design
Browse files Browse the repository at this point in the history 
Design
  • Loading branch information
@ogomaemmanuel
ogomaemmanuel committed Nov 28, 2023
2 parents 2cdbf69 + 12839dc commit 9f51b04
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 20 deletions.
67 changes: 62 additions & 5 deletions hr_core/src/main/resources/static/js/src/components/dashboard/EmployeeDashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,40 @@
Upcoming Events
</p>
</div>
<div class="card-content">
<div class="card-content pt-2">
<ul role="list" class="divide-y">
<li class="py-4 flex first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">Kristen Ramos</p>
<p class="text-sm text-slate-500 truncate">[email protected]</p>
</div>
</li>
<li class="py-4 flex first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">Johnson Didinya</p>
<p class="text-sm text-slate-500 truncate">[email protected]</p>
</div>
</li>
<li class="py-4 flex first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">Courtney Henry</p>
<p class="text-sm text-slate-500 truncate">[email protected]</p>
</div>
</li>
<li class="py-4 flex first:pt-0 ">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">Ted Fox</p>
<p class="text-sm text-slate-500 truncate">[email protected]</p>
</div>
</li>
<li class="pt-4 cursor-pointer flex justify-center text-sm first:pt-0">
Load more
</li>
</ul>

</div>
</div>
Expand Down Expand Up @@ -128,7 +161,7 @@
<progress class="progress is-small is-primary" max="100" value="79">79</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2020</small>
<small class="has-text-grey is-abbr-like" title="Oct 25, 2020">Oct 25, 2023</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
Expand All @@ -152,7 +185,7 @@
<progress class="progress is-small is-primary" max="100" value="67">67</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Jan 8, 2020">Jan 8, 2020</small>
<small class="has-text-grey is-abbr-like" title="Jan 8, 2020">Jan 8, 2023</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
Expand All @@ -177,7 +210,7 @@
<progress class="progress is-small is-primary" max="100" value="16">16</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2020</small>
<small class="has-text-grey is-abbr-like" title="Dec 18, 2020">Dec 18, 2023</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
Expand All @@ -201,7 +234,31 @@
<progress class="progress is-small is-primary" max="100" value="71">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2020</small>
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2023</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small" type="button">
<span class="icon"><i class="fa fa-eye"></i></span>
</button>
<button class="button is-small jb-modal" data-target="sample-modal" type="button">
<span class="icon"><i class="fa fa-trash-o"></i></span>
</button>
</div>
</td>
</tr>
<tr>
<td class="is-image-cell">
<div class="image is-24x24">
<img class="is-rounded" src="https://avatars.dicebear.com/v2/initials/mr-broderick-kub.svg">
</div>
</td>
<td data-label="Name">Mr. Johnson Didinya</td>
<td class="is-progress-cell" data-label="Progress">
<progress class="progress is-small is-primary" max="100" value="51">71</progress>
</td>
<td data-label="Created">
<small class="has-text-grey is-abbr-like" title="Sep 13, 2020">Sep 13, 2023</small>
</td>
<td class="is-actions-cell">
<div class="buttons is-right">
Expand Down
2 changes: 1 addition & 1 deletion hr_core/src/main/resources/static/js/src/components/events/EventsPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div class="pb-2 flex justify-end">
<div class="pb-2 flex justify-start">
<button
@click.stop="showEventCreateForm=true"
to="/holiday-create"
Expand Down
14 changes: 9 additions & 5 deletions hr_core/src/main/resources/static/js/src/components/home/GlobalSearchInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
<template>
<form action="#" class="hidden lg:block lg:pl-3.5" method="GET"><label class="sr-only"
for="topbar-search">Search</label>
<form action="#" class="hidden lg:block lg:pl-3.5" method="GET">
<label class="sr-only" for="topbar-search">Search</label>
<div class="relative lg:w-96 mt-3">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
fill-rule="evenodd"></path>
fill-rule="evenodd">
</path>
</svg>
</div>
<input id="topbar-search" class="py-1 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" name="email"
<input id="topbar-search"
class="py-1 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
name="search"
placeholder="Search"
type="text"></div>
type="text">
</div>
</form>
</template>

Expand Down
28 changes: 20 additions & 8 deletions hr_core/src/main/resources/static/js/src/components/home/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="relative z-0 flex h-full w-full overflow-hidden">
<div class=" h-full flex-shrink-0 overflow-x-hidden " :style="{width:collapsed?'0':sideBarWidth}">
<div class=" h-full flex-shrink-0 overflow-x-hidden " :class="{'opacity-75':hover && !collapsed}" :style="{width:collapsed?'0':sideBarWidth}">
<sidebar-menu
:menu="menu"
:showOneChild="true"
Expand Down Expand Up @@ -39,18 +39,18 @@
<div class="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
<main class="transition-width relative h-full w-full flex-1 overflow-auto">

<div class=" fixed top-1/2 z-40 -translate-y-1/2 transition-transform translate-x-[260px] rotate-0">
<div class="cursor-pointer" @click="toggleSideNav()">
<div class="flex h-20 w-8 items-center justify-center opacity-25 group-hover:opacity-100">
<div class="flex h-6 w-6 flex-col items-center">
<div class="bg-gray-800 h-3 w-1 rounded-full" style="transform: translateY(0.15rem) rotate(0deg) translateZ(0px);"></div>
<div class="bg-gray-800 h-3 w-1 rounded-full" style="transform: translateY(-0.15rem) rotate(0deg) translateZ(0px);"></div>
<div class="fixed top-1/2 z-40 -translate-y-1/2 transition-transform translate-x-[260px]" @mouseover="hover = true"
@mouseleave="hover = false" v-tooltip.right="collapsed?'Open Sidebar':'Close Sidebar'">
<div class="cursor-pointer" @click="toggleSideNav() ">
<div class="flex h-20 w-8 items-center justify-center opacity-25 hover:opacity-100">
<div class="flex h-6 w-6 flex-col items-center" :style="{rotate: collapsed?'180deg':'0deg'}">
<div class="bg-gray-800 h-3 w-1 rounded-full" :style="{transform: hover || collapsed?'translateY(0.15rem) rotate(15deg) translateZ(0px)':'translateY(0.15rem) rotate(0deg) translateZ(0px)'}"></div>
<div class="bg-gray-800 h-3 w-1 rounded-full" :style="{transform: hover || collapsed?'translateY(-0.15rem) rotate(-15deg) translateZ(0px)':'translateY(-0.15rem) rotate(0deg) translateZ(0px)'}"></div>
</div>
</div>
</div>
</div>


<div class="px-8">
<div class="columns mt-1 mb-8 is-3" style="border-bottom: 1px solid rgb(224, 220, 229);">
<div class="column p-0">
Expand Down Expand Up @@ -118,6 +118,7 @@ export default {
data() {
return {
collapsed:false,
hover: false,
sideBarWidth:'250px',
menu: [
Expand Down Expand Up @@ -208,6 +209,17 @@ export default {
}
]
},
{
href: {path: '/events'},
icon: 'fa fa-calendar-check-o',
title: 'Calender',
badge: {
text: 'new',
class: 'vsm--badge_default',
// attributes: {},
// element: 'span',
}
}
],
// Sidebar width (expanded)
Expand Down
5 changes: 4 additions & 1 deletion hr_core/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ module.exports = {
theme: {
extend: {}
},
variants: {},
variants: {
extend: {
},
},
plugins: []
}

0 comments on commit 9f51b04

Please sign in to comment.