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

added lightmode option

Browse Source
This commit is contained in:
selina.mail
2023-11-22 13:41:53 +01:00
parent 8a4ced29ac
commit 3fd31bcc43
22 changed files with 1501 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
components/server/AssetTable.vue
View File

@ -1,20 +1,20 @@
<template>
<div class="data">
<div class="label">Last viewed:</div>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" id="asset-table">
<tr class="table-row" id="table-head">
<th class="Client">Client</th>
<th class="Name">Name</th>
<th class="Type">Type</th>
<th class="State">State</th>
<th class="User">User</th>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr class="table-row" id="row-1">
<td class="Client">...</td>
<td class="Name">...</td>
<td class="Type">...</td>
<td class="State">...</td>
<td class="User">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</table>
</div>
@ -26,7 +26,11 @@
export default {
name: "AssetTable",
data() {
return {
darkMode: true,
};
},
}
</script>
@ -46,9 +50,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;
@ -63,12 +74,24 @@ export default {
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,
@ -76,48 +99,92 @@ 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;
}
.Client {
width: 33.3%;
}
.Client-darkmode {
border-right: 0.0625rem solid #000000;
}
.Client-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Name {
width: 33.3%;
}
.Name-darkmode {
border-right: 0.0625rem solid #000000;
}
.Name-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Type {
width: 12.7%;
}
.Type-darkmode {
border-right: 0.0625rem solid #000000;
}
.Type-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.State {
width: 12.7%;
}
.State-darkmode {
border-right: 0.0625rem solid #000000;
}
.State-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 8%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
color: #FFFFFF;
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
</style>