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

added login page, setup templates

Browse Source
This commit is contained in:
jo.kuehner
2023-11-09 20:17:38 +01:00
parent 5d08c9d557
commit 49e5b6da73
12 changed files with 526 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app.vue
View File

@ -1,19 +1,29 @@
<template>
<NuxtLayout>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
<script>
<script setup>
//import Page from "./layouts/Page"
/*definePageMeta({
layout: 'Page'
})*/
//const layout = "Page";
const layout = "empty";
</script>
<style>
html, template, body, #__nuxt, #__layout {
height: 100vh;
width: 100vw;
height: 100%;
width: 100%;
margin: 0;
background-color: #212121;
}
</style>

213
components/LoginForm.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<form class="login-form">
<div class="title-field">
<span class="title-icon" id="logo-icon">
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
</span>
<pre class="title">Login</pre>
</div>
<div class="login-field">
<div class="form-field" id="username-field">
<label for="username-input" id="username-label">
<span class="icon" id="username-icon">
<img loading="lazy" src="../icons/Mail-Icon.svg" />
</span>
<div class="label">Username:</div>
</label>
<div class="input-field">
<input type="text" id="username-input" placeholder="user@example.com">
</div>
</div>
<div class="form-field" id="password-field">
<label for="password-input" id="password-label">
<span class="icon" id="password-icon">
<img loading="lazy" src="../icons/Lock-Icon.svg" />
</span>
<div class="label">Password:</div>
</label>
<div class="input-field">
<input type="text" id="password-input" placeholder="*******">
<input type="button" id="show-password-toggle" value="Show">
</div>
</div>
</div>
<input type="button" id="login-button" value="Login">
</form>
</template>
<script>
export default {
name: "LoginForm",
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
.login-form {
display: flex;
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;
background-color: #2c2c2c;
}
.title-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.title-icon {
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.title-icon > img {
width: 50px;
height: 50px;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.title {
margin: 0;
color: #fff;
letter-spacing: 1.6px;
white-space: nowrap;
font: 400 30px/30px Overpass, sans-serif;
}
.login-field {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 20px;
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 400px;
height: 80px;
padding: 10px;
gap: 10px;
}
label {
display: flex;
flex-direction: row;
align-items: flex-start;
width: fit-content;
height: 30px;
gap: 10px;
}
.icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
}
.icon > img {
filter: invert(100%);
object-fit: contain;
object-position: center;
overflow: hidden;
}
#username-icon > img {
width: auto;
height: 15px;
}
#password-icon > img {
width: 15px;
height: auto;
}
.label {
color: #fff;
letter-spacing: 0.3px;
font: 400 15px/30px Overpass, sans-serif;
}
.input-field {
display: flex;
flex-direction: row;
align-items: center;
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;
background-color: #212121;
}
input[type=text] {
width: 100%;
height: 100%;
background-color: #00000000;
border: none;
color: #8e8e8e;
letter-spacing: 0.6px;
white-space: nowrap;
font: 100 12px/20px Overpass, sans-serif;
}
input[type=button] {
width: fit-content;
align-self: flex-end;
background-color: #00000000;
border: none;
color: #fff;
letter-spacing: 0.6px;
white-space: nowrap;
font: 300 12px/20px Overpass, sans-serif;
}
#login-button {
width: 220px;
height: 70px;
padding: 10px;
border-radius: 10px;
align-self: center;
border: none;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
color: #fff;
letter-spacing: 0.4px;
white-space: nowrap;
font: 600 20px/30px Overpass, sans-serif;
}
</style>

2
layouts/PageHeader.vue
View File

@ -52,7 +52,7 @@ export default {
align-items: flex-end;
display: flex;
gap: 10px;
padding: 0 30px;
padding: 0 10px;
}
.username {
color: #fff;

58
layouts/default.vue
View File

@ -2,14 +2,7 @@
<PageHeader />
<main>
<Navigationbar />
<section id="content">
<section id="content-header">
<pre id="page-name">Pagename</pre>
</section>
<section id="content-body">
<!--<slot />-->
</section>
</section>
<slot />
<Actionbar />
</main>
</template>
@ -33,19 +26,19 @@ export default {
<style>
<style scoped>
* {
box-sizing: border-box;
}
body {
/*body {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-color: #212121;
}
}*/
main {
display: flex;
@ -53,50 +46,9 @@ export default {
width: 100%;
gap: 10px;
padding: 10px 25px 10px 10px;
background-color: #212121;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
width: 100%;
gap: 10px;
padding: 0 20px;
}
#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-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;
}
slot {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
</style>

40
layouts/empty.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<PageHeader />
<main>
<slot />
</main>
</template>
<script>
import PageHeader from "../layouts/PageHeader.vue";
export default {
name: "Page",
components: {
PageHeader,
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
gap: 10px;
padding: 10px 25px 10px 10px;
background-color: #212121;
}
</style>

84
pages/home.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<Navigationbar />
<section id="content">
<div id="content-header">
<pre id="page-name">Pagename</pre>
</div>
<div id="content-body">
<!--<slot />-->
</div>
</section>
</template>
<script setup>
definePageMeta({
layout: 'empty'
})
</script>
<script>
import Navigationbar from "./Navigationbar.vue";
export default {
name: "Page",
components: {
Navigationbar,
}
}
</script>
<style>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
width: 100%;
gap: 10px;
padding: 0 20px;
}
#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-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;
}
slot {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
</style>

98
pages/index.vue
View File

@ -1,23 +1,81 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<section id="content">
<div id="content-header">
<h1 id="page-name">Pagename</h1>
</div>
<div id="content-body">
<section id="stuff"></section>
</div>
</section>
</template>
<script lang="ts">
export default {
head: {
title: 'tueit App',
},
};
</script>
<style>
html, template, body {
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
margin: 0;
<script setup>
definePageMeta({
layout: 'default'
})
</script>
<script>
export default {
name: "Testpage",
components: {
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
</style>
#content {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
width: 100%;
gap: 10px;
padding: 0 20px;
}
#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-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;
}
#stuff {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
padding: 20px 30px;
}
</style>

83
pages/login.vue
View File

@ -1,5 +1,80 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<section id="content">
<div id="content-header">
<pre id="page-name"> </pre>
</div>
<div id="content-body">
<LoginForm />
</div>
</section>
</template>
<script setup>
definePageMeta({
layout: 'empty'
})
</script>
<script>
import LoginForm from "../components/LoginForm.vue";
export default {
name: "Page",
components: {
LoginForm,
}
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
width: 100%;
height: 100%;
gap: 10px;
padding: 0 20px;
}
#content-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: 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-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
gap: 20px;
margin-bottom: 10px;
border-radius: 10px;
}
</style>

3
public/icons/Lock-Icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" fill="none" viewBox="0 0 12 15">
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9.333 7.833H10.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 1 14V8.333a.5.5 0 0 1 .5-.5h1.167m6.666 0V4.5c0-1.111-.666-3.333-3.333-3.333-2.667 0-3.333 2.222-3.333 3.333v3.333m6.666 0H2.667"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

4
public/icons/Mail-Icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" viewBox="0 0 16 12">
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.572 3.857 3.572 2.5 3.571-2.5"/>
<path stroke="#000" d="M1 9.571V2.43C1 1.639 1.64 1 2.429 1h11.428c.79 0 1.429.64 1.429 1.429V9.57c0 .79-.64 1.429-1.429 1.429H2.43A1.427 1.427 0 0 1 1 9.571Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

0
public/icons/Dropdown-Icon.svg → public/icons/settings-icons/Dropdown-Icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 362 B

0
public/icons/Settings-Icon.svg → public/icons/settings-icons/Settings-Icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 471 B