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

96
components/server/SolutionChecklist.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="data">
<div class="label">Checklist:</div>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="solution-checkklist">
<tr class="table-row" id="table-head">
<th class="Step">Step</th>
<th class="Asset">Asset</th>
<th class="Task">Task</th>
<th class="Comments">Comments</th>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
<th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr class="table-row" id="row-1">
<td class="Step">...</td>
<td class="Asset">...</td>
<td class="Task">...</td>
<td class="Comments">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
<td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</table>
</div>
@ -24,7 +24,12 @@
export default {
name: "SolutionChecklist",
name: "AssetTable",
data() {
return {
darkMode: true,
};
},
}
</script>
@ -44,9 +49,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;
@ -61,12 +73,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,
@ -74,7 +98,6 @@ td {
height: 1.875rem;
text-align: left;
padding: 0;
color: #ffffff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
@ -83,22 +106,52 @@ th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
.Step {
width: 8%;
}
.Step-darkmode {
border-right: 0.0625rem solid #000000;
}
.Step-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Asset {
width: 22%;
}
.Asset-darkmode {
border-right: 0.0625rem solid #000000;
}
.Asset-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Task {
width: 35%;
}
.Task-darkmode {
border-right: 0.0625rem solid #000000;
}
.Task-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Comments {
width: 35%;
}
@ -112,6 +165,13 @@ th {
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
color: #FFFFFF;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
</style>