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

optimized layout

Browse Source
This commit is contained in:
jo.kuehner
2023-11-13 19:30:52 +01:00
parent ffff6f4467
commit fee9acfd6d
17 changed files with 463 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app.vue
View File

@ -1,5 +1,5 @@
<template>
<!--<NuxtLayout :name="layout">--><NuxtLayout>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
@ -23,6 +23,7 @@
width: 100%;
margin: 0;
background-color: #212121;
font-size: 1rem;
}

28
components/Dashboard.vue
View File

@ -33,18 +33,18 @@ export default {
justify-content: center;
align-self: stretch;
width: 100%;
padding: 30px 50px 50px;
gap: 20px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 1.875rem 3.125rem 3.125rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.heading {
color: #fff;
letter-spacing: 0.8px;
letter-spacing: 5%;
text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif;
font: 400 1rem/2rem Overpass, sans-serif;
}
.shortcuts {
@ -52,8 +52,8 @@ export default {
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 10px 40px;
gap: 40px;
padding: 0.625rem 2.5rem;
gap: 2.5rem;
}
input {
@ -61,15 +61,15 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
width: 240px;
height: 64px;
border-radius: 10px;
padding: 15px 20px;
width: 15rem;
height: 4rem;
border-radius: 0.625rem;
padding: 0.9375rem 1.25rem;
border: none;
color: #fff;
text-align: center;
letter-spacing: 0.7px;
font: 400 14px/32px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434;
}

82
components/LoginForm.vue
View File

@ -59,12 +59,12 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
border-radius: 10px;
padding: 40px 30px;
gap: 30px;
border: 1px solid #000;
width: 31.25rem;
height: 31.25rem;
border-radius: 0.625rem;
padding: 2.5rem 1.875rem;
gap: 1.875rem;
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
@ -74,19 +74,19 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
gap: 1.25rem;
}
.title-icon {
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
width: 3.125rem;
height: 3.125rem;
}
.title-icon > img {
width: 50px;
height: 50px;
width: 3.125rem;
height: 3.125rem;
object-fit: contain;
object-position: center;
overflow: hidden;
@ -95,9 +95,9 @@ export default {
.title {
margin: 0;
color: #fff;
letter-spacing: 1.6px;
letter-spacing: 5%;
white-space: nowrap;
font: 400 30px/30px Overpass, sans-serif;
font: 400 1.875rem/1.875rem Overpass, sans-serif;
}
@ -106,8 +106,8 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 20px;
gap: 20px;
padding: 0.625rem 1.25rem;
gap: 1.25rem;
}
.form-field {
@ -115,10 +115,10 @@ export default {
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 400px;
height: 80px;
padding: 10px;
gap: 10px;
width: 25rem;
height: 5rem;
padding: 0.625rem;
gap: 0.625rem;
}
label {
@ -126,8 +126,8 @@ export default {
flex-direction: row;
align-items: flex-start;
width: fit-content;
height: 30px;
gap: 10px;
height: 1.875rem;
gap: 0.625rem;
}
.icon {
@ -135,8 +135,8 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
width: 1.875rem;
height: 1.875rem;
}
.icon > img {
@ -147,17 +147,17 @@ export default {
}
#username-icon > img {
width: auto;
height: 15px;
height: 0.9375rem;
}
#password-icon > img {
width: 15px;
width: 0.9375rem;
height: auto;
}
.label {
color: #fff;
letter-spacing: 0.3px;
font: 400 15px/30px Overpass, sans-serif;
letter-spacing: 2%;
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
}
.input-field {
@ -167,10 +167,10 @@ export default {
justify-content: stretch;
align-self: stretch;
width: 100%;
height: 30px;
border-radius: 5px;
padding: 3px 10px;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
height: 1.875rem;
border-radius: 0.3125rem;
padding: 0.1875rem 0.625rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121;
}
@ -180,9 +180,9 @@ export default {
background-color: #00000000;
border: none;
color: #8e8e8e;
letter-spacing: 0.6px;
letter-spacing: 5%;
white-space: nowrap;
font: 100 12px/20px Overpass, sans-serif;
font: 100 0.75rem/1.25rem Overpass, sans-serif;
}
input[type=button] {
width: fit-content;
@ -190,23 +190,23 @@ export default {
background-color: #00000000;
border: none;
color: #fff;
letter-spacing: 0.6px;
letter-spacing: 5%;
white-space: nowrap;
font: 300 12px/20px Overpass, sans-serif;
font: 300 0.75rem/1.25rem Overpass, sans-serif;
}
#login-button {
width: 220px;
height: 70px;
padding: 10px;
border-radius: 10px;
width: 13.75rem;
height: 4.375rem;
padding: 0.625rem;
border-radius: 0.625rem;
align-self: center;
border: none;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
color: #fff;
letter-spacing: 0.4px;
letter-spacing: 2%;
white-space: nowrap;
font: 600 20px/30px Overpass, sans-serif;
font: 600 1.25rem/1.875rem Overpass, sans-serif;
}

32
components/QuickAccess.vue
View File

@ -33,18 +33,18 @@ export default {
justify-content: center;
align-self: stretch;
width: 100%;
padding: 30px 50px 50px;
gap: 20px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 1.875rem 3.125rem 3.125rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.heading {
color: #fff;
letter-spacing: 0.8px;
letter-spacing: 5%;
text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif;
font: 400 1rem/2rem Overpass, sans-serif;
}
.shortcuts {
@ -52,8 +52,8 @@ export default {
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 10px 40px;
gap: 40px;
padding: 0.625rem 2.5rem;
gap: 2.5rem;
}
input {
@ -61,21 +61,21 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
width: 240px;
height: 64px;
border-radius: 10px;
padding: 15px 20px;
width: 15rem;
height: 4rem;
border-radius: 0.625rem;
padding: 0.9375rem 1.25rem;
border: none;
color: #fff;
text-align: center;
letter-spacing: 0.7px;
font: 400 14px/32px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434;
}
input#pins {
border: 1px dashed #454545;
border: 0.0625rem dashed #454545;
color: #8e8e8e;
font: 400 14px/32px Overpass, sans-serif;
font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #34343400;
}

50
components/server/Client.vue
View File

@ -72,20 +72,20 @@
align-items: flex-start;
justify-content: center;
width: 100%;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
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;
}
.client-name {
align-self: stretch;
padding: 20px 0;
padding: 1.25rem 0;
color: #fff;
letter-spacing: 0.8px;
letter-spacing: 5%;
text-decoration-line: underline;
font: italic 400 16px/187.5% Overpass, -apple-system, Roboto, Helvetica,
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
@ -95,12 +95,12 @@
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0 30px;
gap: 20px;
border-radius: 10px;
padding: 0 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
}
.data-field#client-id {
padding: 10px 30px;
padding: 0.625rem 1.875rem;
}
.data-field#street-name {
width: 70%;
@ -111,20 +111,20 @@
.label {
color: #fff;
letter-spacing: 0.7px;
font: 400 14px/30px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 10px;
border-radius: 5px;
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25) inset;
padding: 0 0.625rem;
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: 0.6px;
font: 400 12px/250% Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.data#notes {
align-self: stretch;
@ -136,7 +136,7 @@
align-items: center;
justify-content: flex-start;
align-self: stretch;
padding: 0 10px;
padding: 0 0.625rem;
}
.contact, .address {
@ -146,14 +146,14 @@
justify-content: center;
line-height: normal;
width: 50%;
padding: 20px 10px;
border-radius: 5px;
padding: 1.25rem 0.625rem;
border-radius: 0.3125rem;
}
.area-title {
color: #fff;
letter-spacing: 0.7px;
font: 400 14px/30px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.street-address {
@ -162,8 +162,8 @@
align-items: center;
justify-content: space-between;
align-self: stretch;
padding: 0 30px 0 0;
gap: 10px;
padding: 0 1.875rem 0 0;
gap: 0.625rem;
}
.notes {
@ -172,7 +172,7 @@
align-items: flex-start;
justify-content: center;
align-self: stretch;
padding: 10px 30px 10px 20px;
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
}

28
components/server/ClientQuickAccess.vue
View File

@ -34,18 +34,18 @@
justify-content: center;
align-self: stretch;
width: 100%;
padding: 30px 30px 50px;
gap: 20px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 1.875rem 1.875rem 3.125rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.heading {
color: #fff;
letter-spacing: 0.8px;
letter-spacing: 5%;
text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif;
font: 400 1rem/2rem Overpass, sans-serif;
}
.shortcuts {
@ -53,8 +53,8 @@
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 10px 30px;
gap: 40px;
padding: 0.625rem 1.875rem;
gap: 2.5rem;
}
input {
@ -62,15 +62,15 @@
flex-direction: row;
align-items: center;
justify-content: center;
width: 240px;
height: 64px;
border-radius: 10px;
padding: 15px 20px;
width: 15rem;
height: 4rem;
border-radius: 0.625rem;
padding: 0.9375rem 1.25rem;
border: none;
color: #fff;
text-align: center;
letter-spacing: 0.7px;
font: 400 14px/32px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/2rem Overpass, sans-serif;
background-color: #343434;
}

30
components/server/ClientTable.vue
View File

@ -40,16 +40,16 @@
justify-content: center;
align-self: stretch;
width: 100%;
padding: 20px 30px;
gap: 20px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.data-table {
width: 100%;
padding: 0 10px;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
@ -57,29 +57,29 @@
.table-row {
display: flex;
flex-direction: row;
height: 50px;
padding: 10px;
gap: 10px;
border-top: 1px solid #000000;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
border-top: 0.0625rem solid #000000;
}
#table-head {
border-top: none;
border-bottom: 1px solid #000000;
border-bottom: 0.0625rem solid #000000;
}
th, td {
height: 30px;
height: 1.875rem;
padding: 0;
color: #ffffff;
letter-spacing: 0.7px;
font: 400 14px/30px Overpass, sans-serif;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
th {
font: 700 14px/30px Overpass, sans-serif;
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.ID {
width: 40%;
border-right: 1px solid #000000;
border-right: 0.0625rem solid #000000;
}
.Name {
width: 60%;

6
documentation/Datenbankmodell_tueitApp.drawio
View File

@ -112,13 +112,13 @@
<mxCell id="DauqCNUrC7Z9yIe88X-r-57" value="CPU" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="480" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt; &lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxCell id="DauqCNUrC7Z9yIe88X-r-58" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;div class=&quot;clearfix&quot;&gt; &lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;RAM&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="510" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt; &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxCell id="DauqCNUrC7Z9yIe88X-r-59" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;storageConfiguration&lt;/label&gt; &lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="540" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0px;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxCell id="WukdXvazNq34soQIU5Al-5" value="&lt;div class=&quot;clearfix&quot;&gt;&lt;label style=&quot;padding-right: 0rem;&quot; class=&quot;control-label&quot;&gt;miscellaneous&lt;/label&gt;&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="570" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="qbUp6gtjYndA0fy5zK6_-3" value="softwareBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">

38
layouts/Actionbar.vue
View File

@ -83,14 +83,16 @@ export default {
.actionbar {
display: flex;
flex-direction: column;
position: sticky;
top: 5rem;
align-items: flex-start;
justify-content: center;
width: fit-content;
height: fit-content;
border-radius: 10px;
padding: 30px 10px;
gap: 20px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 0.625rem;
padding: 1.875rem 0.625rem;
gap: 1.25rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
@ -101,8 +103,8 @@ export default {
align-items: stretch;
justify-content: center;
align-self: stretch;
padding: 20px 0;
gap: 20px;
padding: 1.25rem 0;
gap: 1.25rem;
}
@ -111,8 +113,8 @@ export default {
flex-direction: row;
align-items: center;
justify-content: flex-start;
height: 30px;
border-radius: 10px;
height: 1.875rem;
border-radius: 0.625rem;
border: none;
background-color: #2c2c2c;
transition-duration: 0.5s;
@ -127,13 +129,13 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
width: 1.875rem;
height: 1.875rem;
}
#indicator-icon {
width: 30px;
height: 30px;
border-radius: 5px;
width: 1.875rem;
height: 1.875rem;
border-radius: 0.3125rem;
background-color: #2c2c2c;
transition-duration: 0.5s;
}
@ -142,24 +144,24 @@ export default {
}
.icon > img {
width: 14px;
height: 14px;
width: 0.875rem;
height: 0.875rem;
filter: invert(100%);
object-fit: contain;
object-position: center;
overflow: hidden;
}
#indicator-icon > img {
height: 20px;
height: 1.25rem;
}
.label {
color: #fff;
letter-spacing: 0.7px;
letter-spacing: 5%;
align-self: center;
white-space: nowrap;
font: 400 14px/20px Overpass, sans-serif;
font: 400 0.875rem/1.25rem Overpass, sans-serif;
}

257
layouts/Navigationbar.vue
View File

@ -1,60 +1,60 @@
<template>
<aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
<aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
<div class="toggle">
<div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode' ]" id="back-icon">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/Back-Icon.svg" />
</div>
<div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
<img :style="[darkMode ? darkStylesImg : lightStylesImg ]"
loading="lazy"
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleSidebar">
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div>
</div>
<div class="menus">
<nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
<nav id="home-menu" :class="[ darkMode ? 'menu-darkmode' : 'menu-lightmode' ]">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="home-button">
<div class="icon" id="home-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Home-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Home</pre>
</button>
</nav>
<nav id="site-menu">
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="checklists-button">
<div class="icon" id="checklists-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Checklists-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Checklists</pre>
</button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="assets-button">
<div class="icon" id="assets-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Assets-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Config Items</pre>
</button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="solutions-button">
<div class="icon" id="solutions-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Solutions-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Solutions</pre>
</button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="accounting-button">
<div class="icon" id="accounting-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Accounting-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Accounting</pre>
</button>
<button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
<button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="clients-button">
<div class="icon" id="clients-icon">
<img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
src="../icons/navbar-icons/Clients-Icon.svg" />
<img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]"
loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
</div>
<pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Clients</pre>
</button>
</nav>
</div>
@ -71,18 +71,6 @@ export default {
return {
darkMode: true,
isExpanded: true,
darkStylesImg: {
filter: 'invert(100%)',
},
lightStylesImg: {
filter: 'none',
},
darkStylesLabel: {
color: '#fff',
},
lightStylesLabel: {
color: '#000',
},
};
},
methods: {
@ -102,58 +90,44 @@ export default {
}
aside {
transition: 0.2s ease-out;
display: flex;
flex-direction: column;
width: calc(2.5rem + 2.5rem);
overflow: hidden;
position: sticky;
top: 5rem;
width: 3.125rem;
transition: 0.5s ease-in-out;
}
aside.is-expanded {
width: 238px;
transition: 0.5s ease-out;
width: 12.5rem;
}
.is-expanded .label {
opacity: 1;
transition: 0.5s ease-out;
transition: 0.5s ease-in-out;
}
.is-not-expanded .darkStylesIcon {
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
transition: 0.5s ease-out;
}
.is-not-expanded .lightStylesIcon {
transform: rotate(180deg);
transition: 0.5s ease-out;
transition: 0.5s ease-in-out;
}
.navbar-dark {
.navbar {
display: flex;
flex-direction: column;
height: fit-content;
border-radius: 0.625rem;
align-items: stretch;
justify-content: center;
height: fit-content;
border-radius: 10px;
gap: 10px;
padding: 15px;
gap: 0.625rem;
padding: 0.9375rem;
margin: 0;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
.navbar-light {
display: flex;
flex-direction: column;
justify-content: center;
height: fit-content;
border-radius: 10px;
gap: 10px;
padding: 15px;
margin: 0;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
.navbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
.navbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF;
}
@ -161,142 +135,113 @@ aside.is-expanded {
.toggle {
display: flex;
flex-direction: row;
height: 2.5rem;
align-items: center;
justify-content: space-between;
height: 40px;
}
.menus {
display: flex;
flex-direction: column;
position: relative;
transition: 0.2s ease-out;
justify-content: flex;
padding: 20px 0;
gap: 30px;
padding: 1.25rem 0;
gap: 1.875rem;
transition: 0.5s ease-in-out;
}
nav {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
gap: 30px;
padding: 0.9375rem 0;
gap: 1.875rem;
}
.menu-darkmode {
border-bottom: 0.0625rem solid #8E8E8E;
}
.menu-lightmode {
border-bottom: 0.0625rem solid #BABABA;
}
button {
display: flex;
flex-direction: row;
align-self: stretch;
height: 2.1875rem;
border-radius: 0.3125rem;
align-items: center;
justify-content: flex-start;
align-self: stretch;
height: 35px;
border-radius: 5px;
gap: 5px;
gap: 0.3125rem;
border: none;
background-color: #2c2c2c;
transition-duration: 0.5s;
transition: 0.5s ease-in-out;
}
.dark-menu {
background-color: #2c2c2c;
.button-darkmode {
background-color: #2C2C2C;
}
.light-menu {
.button-lightmode {
background-color: #FFFFFF;
}
.dark-menu:hover {
.button-darkmode:hover,
.indicator-darkmode:hover,
.back-darkmode:hover {
background-color: #444444;
}
.light-menu:hover {
.button-lightmode:hover,
.indicator-lightmode:hover,
.back-lightmode:hover {
background-color: #ACACAC;
}
.icon {
display: flex;
flex-direction: row;
width: 2.1875rem;
height: 2.1875rem;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
transition: 0.2s ease-out;
transition: 0.2s ease-in-out;
}
.lightStylesIcon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
transition: 0.2s ease-out;
}
.darkStylesIcon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
transition: 0.2s ease-out;
}
#back-icon {
width: 40px;
height: 40px;
border-radius: 5px;
#back-icon, #indicator-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.3125rem;
transition-duration: 0.5s;
transition: 0.2s ease-out;
}
#indicator-icon {
width: 40px;
height: 40px;
border-radius: 5px;
transition-duration: 0.5s;
transition: transform 0.3s;
}
.lightStylesIcon:hover {
background-color: #ACACAC;
}
.darkStylesIcon:hover {
background-color: #444444;
}
.icon>img,
.lightStylesIcon>img,
.darkStylesIcon>img {
width: 20px;
height: 20px;
img {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
object-position: center;
overflow: hidden;
transition: 0.2s ease-out;
}
.dark-home-menu {
border-bottom: 1px solid #8e8e8e;
}
.light-home-menu {
border-bottom: 1px solid #BABABA;
.img-darkmode {
filter: invert(100%);
}
.label {
letter-spacing: 0.7px;
letter-spacing: 5%;
align-self: center;
white-space: nowrap;
margin: auto 0;
font: 600 14px/20px Overpass, sans-serif;
font: 600 0.875rem/1.25rem Overpass, sans-serif;
opacity: 0;
transition: opacity 0.5s ease-out;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
</style>

33
layouts/PageHeader.vue
View File

@ -30,43 +30,48 @@ export default {
header {
display: flex;
flex-direction: row;
position: sticky;
top: 0;
width: 100%;
height: 4.375rem;
align-self: stretch;
justify-content: space-between;
align-items: center;
align-self: stretch;
padding: 0.625rem 1.25rem;
background-color: #2c2c2c;
height: 60px;
padding: 10px 20px;
}
#header-logo {
object-fit: contain;
object-position: center;
width: 80px;
height: 40px;
width: 5rem;
height: 2.5rem;
justify-content: center;
align-items: center;
overflow: hidden;
}
.profile {
align-items: flex-end;
display: flex;
gap: 10px;
padding: 0 10px;
flex-direction: row;
align-items: flex-end;
gap: 0.625rem;
padding: 0 0.625rem;
}
.username {
color: #fff;
text-align: right;
letter-spacing: 0.8px;
align-self: center;
margin: auto 0;
font: 200 14px Overpass, sans-serif;
color: #fff;
text-align: right;
font: 200 0.875rem Overpass, sans-serif;
letter-spacing: 5%;
}
.picture {
display: flex;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
background-color: #fff;
}

4
layouts/default.vue
View File

@ -36,8 +36,8 @@ export default {
display: flex;
flex-direction: row;
width: 100%;
gap: 10px;
padding: 10px;
padding: 0.625rem;
gap: 0.625rem;
background-color: #212121;
}

4
layouts/empty.vue
View File

@ -30,8 +30,8 @@
main {
display: flex;
flex-direction: row;
gap: 10px;
padding: 10px 25px 10px 10px;
gap: 0.625rem;
padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
background-color: #212121;
}

97
pages/clients.vue
View File

@ -11,13 +11,13 @@
</template>
<script setup>
<script setup>
definePageMeta({
layout: 'default'
})
</script>
</script>
<script>
<script>
import ClientTable from "../components/server/ClientTable.vue";
import Client from "../components/server/Client.vue";
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
@ -25,60 +25,61 @@
import ClientEmployee from "../components/server/ClientEmployee.vue";
export default {
name: "ClientsPage",
components: {
ClientTable,
Client,
ClientQuickAccess,
ClientEmployees,
ClientEmployee,
}
name: "ClientsPage",
components: {
ClientTable,
Client,
ClientQuickAccess,
ClientEmployees,
ClientEmployee,
}
}
</script>
</script>
<style scoped>
<style scoped>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
gap: 10px;
padding: 0 20px;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
</style>
</style>

89
pages/home.vue
View File

@ -18,63 +18,64 @@
})
</script>
<script>
<script>
import Navigationbar from "../layouts/Navigationbar.vue";
import Dashboard from "../components/Dashboard.vue";
import QuickAccess from "../components/QuickAccess.vue";
export default {
name: "HomePage",
components: {
Navigationbar,
Dashboard,
QuickAccess,
}
name: "HomePage",
components: {
Navigationbar,
Dashboard,
QuickAccess,
}
}
</script>
</script>
<style>
<style>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
gap: 10px;
padding: 0 20px;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
</style>
</style>

106
pages/index.vue
View File

@ -10,72 +10,74 @@
</template>
<script setup>
<script setup>
definePageMeta({
layout: 'default'
})
</script>
</script>
<script>
<script>
export default {
name: "Testpage",
components: {
}
name: "Testpage",
components: {
}
}
</script>
</script>
<style scoped>
<style scoped>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
gap: 10px;
padding: 0 20px;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
#stuff {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
#stuff {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
padding: 1.25rem 1.875rem;
}
</style>
</style>

26
pages/login.vue
View File

@ -40,27 +40,27 @@ export default {
#content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
gap: 10px;
padding: 0 20px;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
height: 3.125rem;
}
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
}
#content-body {
@ -70,9 +70,9 @@ export default {
justify-content: flex-start;
width: fit-content;
height: fit-content;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}