added client employee and department pages

This commit is contained in:
Johanna Kuehner
2024-02-23 17:17:58 +01:00
parent bc1a80b53e
commit e5a67b7e14
9 changed files with 773 additions and 121 deletions

View File

@ -1,22 +1,16 @@
<template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
<table class="data-table" id="client-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
</tr>
</table>
</div>
</section>
</template>
@ -47,12 +41,12 @@ export default {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
.section-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
.section-lightmode {
background-color: #ffffff;
}
.data-table {
@ -89,8 +83,7 @@ export default {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
th, td {
height: 1.875rem;
text-align: left;
padding: 0;
@ -98,14 +91,12 @@ td {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
.th-darkmode, .td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
.th-lightmode, .td-lightmode {
color: #000000;
}
th {