adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

added settings Page and components

Browse Source
This commit is contained in:
selina.mail
2023-12-06 11:51:42 +01:00
parent 45c651e853
commit 6a4a799c85
21 changed files with 1301 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/server/ClientTable.vue
View File

@ -1,17 +1,19 @@
<template>
<div class="data">
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<table class="data-table" id="client-table">
<tr class="table-row" id="table-head">
<th class="ID">ID</th>
<th class="Name">Name</th>
<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>
</tr>
<tr class="table-row" id="row-1">
<td class="ID">...</td>
<td class="Name">...</td>
</tr>
<tr class="table-row" id="row-2">
<td class="ID">...</td>
<td class="Name">...</td>
<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>
</tr>
</table>
</div>
@ -20,6 +22,8 @@
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
@ -29,8 +33,6 @@ export default {
</script>
<style scoped>
.data {
display: flex;
@ -43,9 +45,16 @@ export default {
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
@ -56,35 +65,65 @@ export default {
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
#table-head {
border-top: none;
border-bottom: 0.0625rem solid #000000;
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
color: #ffffff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.ID {
width: 40%;
}
.ID-darkmode {
border-right: 0.0625rem solid #000000;
}
.ID-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Name {
width: 60%;
}