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

94
components/server/Client.vue
View File

@ -1,51 +1,51 @@
<template>
<section class="information">
<h2 class="client-name">Client name</h2>
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
<h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
<div class="data-field" id="client-id">
<pre class="label">ID:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
<div class="client-data">
<div class="contact">
<h3 class="area-title">Contact:</h3>
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
<div class="data-field" id="contact-person">
<pre class="label">Contact person:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
<div class="data-field" id="e-mail">
<pre class="label">E-Mail:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
<div class="data-field" id="phone">
<pre class="label">Phone number:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
</div>
<div class="address">
<h3 class="area-title">Address:</h3>
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
<div class="street-address">
<div class="data-field" id="street-name">
<pre class="label">Street:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
<div class="data-field" id="street-no">
<pre class="label">No.:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
</div>
<div class="data-field" id="postal-code">
<pre class="label">Postcode:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
<div class="data-field" id="city">
<pre class="label">City:</pre>
<pre class="data">...</pre>
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
</div>
</div>
<div class="notes">
<h3 class="area-title">Notes:</h3>
<pre class="data" id="notes">...</pre>
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
</div>
</section>
</template>
@ -53,6 +53,8 @@
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
@ -72,20 +74,34 @@ export default {
padding: 1.25rem 1.875rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.client-name {
align-self: stretch;
padding: 1.25rem 0;
color: #fff;
letter-spacing: 5%;
text-decoration-line: underline;
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
.h2-darkmode {
color: #fff;
}
.h2-lightmode {
color: #000;
}
.data-field {
display: flex;
flex-direction: row;
@ -110,11 +126,18 @@ export default {
}
.label {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.pre-darkmode {
color: #fff;
}
.pre-lightmode {
color: #000;
}
.data {
display: flex;
flex-direction: row;
@ -123,11 +146,20 @@ export default {
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121;
color: #fff;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
.data#notes {
align-self: stretch;
}
@ -154,11 +186,19 @@ export default {
}
.area-title {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.h3-darkmode {
color: #fff;
}
.h3-lightmode {
color: #000;
}
.street-address {
display: flex;
flex-direction: row;