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

finished home page

Browse Source
This commit is contained in:
jo.kuehner
2023-11-09 22:05:32 +01:00
parent 49e5b6da73
commit f82cf089b6
6 changed files with 182 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app.vue
View File

@ -1,5 +1,5 @@
<template>
<NuxtLayout :name="layout">
<!--<NuxtLayout :name="layout">--><NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
@ -8,7 +8,7 @@
<script setup>
const layout = "empty";
//const layout = "empty";
</script>

78
components/Dashboard.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<section class="dashboard">
<h2 class="heading">My tasks</h2>
<div class="shortcuts">
<input type="button" id="maintenance-visits" value="My Maintenance Visits">
<input type="button" id="production-orders" value="My Production Orders">
<input type="button" id="solutions" value="My Solutions">
<input type="button" id="issue-slips" value="My Issue Slips">
</div>
</section>
</template>
<script>
export default {
name: "Dashboard",
}
</script>
<style scoped>
.dashboard {
display: flex;
flex-direction: column;
align-items: flex-start;
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);
background-color: #2c2c2c;
}
.heading {
color: #fff;
letter-spacing: 0.8px;
text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif;
}
.shortcuts {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 10px 40px;
gap: 40px;
}
input {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 240px;
height: 64px;
border-radius: 10px;
padding: 15px 20px;
border: none;
color: #fff;
text-align: center;
letter-spacing: 0.7px;
font: 400 14px/32px Overpass, sans-serif;
background-color: #343434;
}
</style>

84
components/QuickAccess.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<section class="quick-access">
<h2 class="heading">Quick Access</h2>
<div class="shortcuts">
<input type="button" id="pins" value="Pins">
<!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
<input type="button" id="production-orders" value="My Production Orders">
<input type="button" id="solutions" value="My Solutions">
<input type="button" id="issue-slips" value="My Issue Slips">-->
</div>
</section>
</template>
<script>
export default {
name: "QuickAccess",
}
</script>
<style scoped>
.quick-access {
display: flex;
flex-direction: column;
align-items: flex-start;
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);
background-color: #2c2c2c;
}
.heading {
color: #fff;
letter-spacing: 0.8px;
text-decoration-line: underline;
font: 400 16px/32px Overpass, sans-serif;
}
.shortcuts {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
padding: 10px 40px;
gap: 40px;
}
input {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 240px;
height: 64px;
border-radius: 10px;
padding: 15px 20px;
border: none;
color: #fff;
text-align: center;
letter-spacing: 0.7px;
font: 400 14px/32px Overpass, sans-serif;
background-color: #343434;
}
input#pins {
border: 1px dashed #454545;
color: #8e8e8e;
font: 400 14px/32px Overpass, sans-serif;
background-color: #34343400;
}
</style>

7
layouts/Navigationbar.vue
View File

@ -69,7 +69,7 @@ export default {
name: "Navigationbar",
data() {
return {
darkMode: false,
darkMode: true,
isExpanded: true,
darkStylesImg: {
filter: 'invert(100%)',
@ -111,19 +111,22 @@ aside {
aside.is-expanded {
width: 238px;
transition: 0.5s ease-out;
}
.is-expanded .label {
opacity: 1;
transition: 0.3s ease-out;
transition: 0.5s ease-out;
}
.is-not-expanded .darkStylesIcon {
transform: rotate(180deg);
transition: 0.5s ease-out;
}
.is-not-expanded .lightStylesIcon {
transform: rotate(180deg);
transition: 0.5s ease-out;
}

22
pages/home.vue
View File

@ -2,10 +2,11 @@
<Navigationbar />
<section id="content">
<div id="content-header">
<pre id="page-name">Pagename</pre>
<pre id="page-name">Home</pre>
</div>
<div id="content-body">
<!--<slot />-->
<Dashboard />
<QuickAccess />
</div>
</section>
</template>
@ -18,12 +19,16 @@
</script>
<script>
import Navigationbar from "./Navigationbar.vue";
import Navigationbar from "../layouts/Navigationbar.vue";
import Dashboard from "../components/Dashboard.vue";
import QuickAccess from "../components/QuickAccess.vue";
export default {
name: "Page",
components: {
Navigationbar,
Dashboard,
QuickAccess,
}
}
@ -58,7 +63,7 @@
#page-name {
color: #fff;
letter-spacing: 1.2px;
font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
font: 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
@ -69,16 +74,7 @@
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #2c2c2c;
}
slot {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
</style>

8
pages/login.vue
View File

@ -40,8 +40,8 @@ export default {
#content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
gap: 10px;
@ -68,8 +68,8 @@ export default {
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
width: fit-content;
height: fit-content;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;