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

added lightmode for login component

Browse Source
This commit is contained in:
selina.mail
2023-11-22 18:40:13 +01:00
parent f6dbf3332c
commit af1db8afba
4 changed files with 211 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
components/LoginForm.vue
View File

@ -1,37 +1,37 @@
<template> <template>
<form class="login-form"> <form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
<div class="title-field"> <div class="title-field">
<span class="title-icon" id="logo-icon"> <span class="title-icon" id="logo-icon">
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" /> <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
</span> </span>
<pre class="title">Login</pre> <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
</div> </div>
<div class="login-field"> <div class="login-field">
<div class="form-field" id="username-field"> <div class="form-field" id="username-field">
<label for="username-input" id="username-label"> <label for="username-input" id="username-label">
<span class="icon" id="username-icon"> <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
<img loading="lazy" src="../icons/Mail-Icon.svg" /> <img loading="lazy" src="../icons/Mail-Icon.svg" />
</span> </span>
<div class="label">Username:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
</label> </label>
<div class="input-field"> <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="username-input" placeholder="user@example.com"> <input type="text" id="username-input" placeholder="user@example.com">
</div> </div>
</div> </div>
<div class="form-field" id="password-field"> <div class="form-field" id="password-field">
<label for="password-input" id="password-label"> <label for="password-input" id="password-label">
<span class="icon" id="password-icon"> <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
<img loading="lazy" src="../icons/Lock-Icon.svg" /> <img loading="lazy" src="../icons/Lock-Icon.svg" />
</span> </span>
<div class="label">Password:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
</label> </label>
<div class="input-field"> <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="password-input" placeholder="*******"> <input type="text" id="password-input" placeholder="*******">
<input type="button" id="show-password-toggle" value="Show"> <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
</div> </div>
</div> </div>
</div> </div>
<input type="button" id="login-button" value="Login"> <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
</form> </form>
</template> </template>
@ -40,7 +40,12 @@
<script> <script>
export default { export default {
name: "LoginForm", name: "LoginForm",
data() {
return {
darkMode: true,
};
},
} }
</script> </script>
@ -48,166 +53,209 @@ export default {
<style scoped> <style scoped>
* {
* { box-sizing: border-box;
box-sizing: border-box; }
}
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 31.25rem; width: 31.25rem;
height: 31.25rem; height: 31.25rem;
border-radius: 0.625rem; border-radius: 0.625rem;
padding: 2.5rem 1.875rem; padding: 2.5rem 1.875rem;
gap: 1.875rem; gap: 1.875rem;
border: 0.0625rem solid #000; }
background-color: #2c2c2c;
}
.form-darkmode {
border: 0.0625rem solid #000;
background-color: #2c2c2c;
}
.title-field { .form-lightmode {
display: flex; border: 0.0625rem solid #8e8e8e;
flex-direction: column; background-color: #fff;
align-items: center; }
justify-content: center;
gap: 1.25rem;
}
.title-icon { .title-field {
justify-content: center; display: flex;
align-items: center; flex-direction: column;
width: 3.125rem; align-items: center;
height: 3.125rem; justify-content: center;
} gap: 1.25rem;
}
.title-icon > img { .title-icon {
width: 3.125rem; justify-content: center;
height: 3.125rem; align-items: center;
object-fit: contain; width: 3.125rem;
object-position: center; height: 3.125rem;
overflow: hidden; }
}
.title { .title-icon>img {
margin: 0; width: 3.125rem;
color: #fff; height: 3.125rem;
letter-spacing: 5%; object-fit: contain;
white-space: nowrap; object-position: center;
font: 400 1.875rem/1.875rem Overpass, sans-serif; overflow: hidden;
} }
.title {
.login-field { margin: 0;
display: flex; letter-spacing: 5%;
flex-direction: column; white-space: nowrap;
align-items: center; font: 400 1.875rem/1.875rem Overpass, sans-serif;
justify-content: center; }
padding: 0.625rem 1.25rem;
gap: 1.25rem;
}
.form-field { .pre-darkmode,
display: flex; .title-darkmode {
flex-direction: column; color: #fff;
align-items: flex-start; }
justify-content: space-between;
width: 25rem;
height: 5rem;
padding: 0.625rem;
gap: 0.625rem;
}
label { .pre-lightmode,
display: flex; .title-lightmode {
flex-direction: row; color: #000;
align-items: flex-start; }
width: fit-content;
height: 1.875rem;
gap: 0.625rem;
}
.icon { .login-field {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.875rem; padding: 0.625rem 1.25rem;
height: 1.875rem; gap: 1.25rem;
} }
.icon > img { .form-field {
filter: invert(100%); display: flex;
object-fit: contain; flex-direction: column;
object-position: center; align-items: flex-start;
overflow: hidden; justify-content: space-between;
} width: 25rem;
#username-icon > img { height: 5rem;
width: auto; padding: 0.625rem;
height: 0.9375rem; gap: 0.625rem;
} }
#password-icon > img {
width: 0.9375rem;
height: auto;
}
.label { label {
color: #fff; display: flex;
letter-spacing: 2%; flex-direction: row;
font: 400 0.9375rem/1.875rem Overpass, sans-serif; align-items: flex-start;
} width: fit-content;
height: 1.875rem;
gap: 0.625rem;
}
.input-field { .icon {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: stretch; justify-content: center;
align-self: stretch; width: 1.875rem;
width: 100%; height: 1.875rem;
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;
}
input[type=text] { .icon>img {
width: 100%; object-fit: contain;
height: 100%; object-position: center;
background-color: #00000000; overflow: hidden;
border: none; }
color: #8e8e8e;
letter-spacing: 5%; .icon-darkmode>img {
white-space: nowrap; filter: invert(100%);
font: 100 0.75rem/1.25rem Overpass, sans-serif; }
}
input[type=button] { .icon-lightmode>img {
width: fit-content; filter: invert(0%);
align-self: flex-end; }
background-color: #00000000;
border: none; #username-icon>img {
color: #fff; width: auto;
letter-spacing: 5%; height: 0.9375rem;
white-space: nowrap; }
font: 300 0.75rem/1.25rem Overpass, sans-serif;
} #password-icon>img {
width: 0.9375rem;
#login-button { height: auto;
width: 13.75rem; }
height: 4.375rem;
padding: 0.625rem; .label {
border-radius: 0.625rem; letter-spacing: 2%;
align-self: center; font: 400 0.9375rem/1.875rem Overpass, sans-serif;
border: none; }
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
color: #fff; .label-darkmode {
letter-spacing: 2%; color: #fff;
white-space: nowrap; }
font: 600 1.25rem/1.875rem Overpass, sans-serif;
} .label-lightmode {
color: #000;
}
</style>
.input-field {
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
align-self: stretch;
width: 100%;
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;
}
.input-darkmode {
background-color: #212121;
}
.input-lightmode {
background-color: #EBEBEB;
}
input[type=text] {
width: 100%;
height: 100%;
background-color: #00000000;
border: none;
color: #8e8e8e;
letter-spacing: 5%;
white-space: nowrap;
font: 100 0.75rem/1.25rem Overpass, sans-serif;
}
input[type=button] {
width: fit-content;
align-self: flex-end;
background-color: #00000000;
border: none;
letter-spacing: 5%;
white-space: nowrap;
font: 300 0.75rem/1.25rem Overpass, sans-serif;
}
.button-darkmode {
color: #fff;
}
.button-lightmode {
color: #000;
}
#login-button {
width: 13.75rem;
height: 4.375rem;
padding: 0.625rem;
border-radius: 0.625rem;
align-self: center;
border: none;
color: #000;
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
letter-spacing: 2%;
white-space: nowrap;
font: 600 1.25rem/1.875rem Overpass, sans-serif;
}
</style>

2
pages/login.vue
View File

@ -46,7 +46,7 @@ export default {
flex-direction: column; flex-direction: column;
float: left; float: left;
justify-content: stretch; justify-content: stretch;
align-items: stretch; align-items: center;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
gap: 0.625rem; gap: 0.625rem;

2
public/icons/Mail-Icon.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" viewBox="0 0 16 12"> <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" 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"/> <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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 375 B

After

Width:  |  Height:  |  Size: 374 B

2
routerFrontend/index.js
View File

@ -11,7 +11,7 @@ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{ {
path: '/', path: '/login',
component: LoginPage component: LoginPage
}, },
{ {