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

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%;