Merge branch '56-change-login-style' into 'master'

Resolve "Change login style"

Closes #56

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!35
This commit is contained in:
Simon Kellner 2020-05-07 11:40:22 +00:00
commit 45248ccb4b
6 changed files with 1079 additions and 198 deletions

File diff suppressed because it is too large Load Diff

View File

@ -10,6 +10,8 @@
"dependencies": {
"apexcharts": "^3.19.0",
"core-js": "^3.6.4",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-router": "^3.1.6"

View File

@ -20,6 +20,12 @@ name: "Footer"
<style scoped>
.footer {
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
height: 10vh;
background: #272727;
color: #f1f1f1f1;
text-align: center;

View File

@ -4,7 +4,7 @@
<u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
</div>
<div>
<u><router-link to="/login">Login</router-link></u>
<u><router-link to="/signin">Sign In</router-link></u>
</div>
</div>
</template>
@ -18,6 +18,7 @@
<style scoped>
.header {
display: flex;
height: 10vh;
justify-content: space-between;
background: #272727;
color: #f1f1f1f1;
@ -33,9 +34,9 @@
.header img {
float: left;
height: 60px;
height: 7vh;
width: auto;
padding: 5px;
/* padding: 5px; */
}

View File

@ -9,6 +9,7 @@ import About from "../views/About.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import WeekSummary from "../views/WeekSummary.vue";
import SignIn from "../views/SignIn.vue";
Vue.use(VueRouter);
const routes = [
@ -22,6 +23,11 @@ const routes = [
name: "TimeRecords",
component: TimeRecords
},
{
path: "/signin",
name: "SignIn",
component: SignIn
},
{
path: "/login",
name: "Login",

View File

@ -0,0 +1,261 @@
<template>
<div class="test" >
<article>
<div class="container" :class="{'sign-up-active' : signUp}">
<div class="overlay-container">
<div class="overlay">
<div class="overlay-left">
<h2>Welcome Back!</h2>
<img src="../assets/logo_gt.svg" height="100vh">
<button class="invert" id="signIn" @click="signUp = !signUp">Sign In</button>
</div>
<div class="overlay-right">
<h2>Create a new account</h2>
<img src="../assets/logo_gt.svg" height="100vh">
<button class="invert" id="signUp" @click="signUp = !signUp">Sign Up</button>
</div>
</div>
</div>
<form class="sign-up" action="#">
<h2>Create login</h2>
<input type="text" placeholder="Firstname" v-model="firstname"/>
<input type="text" placeholder="Lastname" v-model="lastname"/>
<input type="text" placeholder="Username" vmodel="usernamer"/>
<input type="password" placeholder="Password" v-model="passwordr"/>
<button>Sign Up</button>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<input type="text" placeholder="Username" v-model="usernamel" />
<input type="password" placeholder="Password" v-model="passwordl" />
<button>Sign In</button>
</form>
</div>
</article>
</div>
</template>
<script>
export default {
name: "SignIn",
// data: () => {
// return {
// signUp: false
// }
data() {
return {
signUp: false,
firstname: '',
lastname: '',
usernamer: '',
passwordr: '',
usernamel: '',
passwordl: ''
}
},
methods: {
login(e) {
e.preventDefault();
console.log(this.usernamel);
}
}
}
</script>
<style lang="scss" scoped>
.test {
height: 70vh;
// box-sizing: content-box;
display: flex;
//flex-direction: column;
align-items: center;
justify-content: space-around;
// padding-top: %;
// padding-bottom: 0%;
}
.container {
// flex:1;
height: 70vh;
position: relative;
width: 50vw;
height: 50vh;
border-radius: 10px;
overflow: hidden;
// box-shadow: 0 15px 30px rgba(0, 0, 0, .2),
// 0 10px 10px rgba(0, 0, 0, .2);
// background: linear-gradient(to bottom, #efefef, #ccc);
background-color: #131313;
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform .5s ease-in-out;
z-index: 100;
}
.overlay {
position: relative;
left: -100%;
height: 100%;
width: 200%;
// background: linear-gradient(to bottom right, #7FD625, #009345);
background-color: #0096ff;
color: #fff;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
@mixin overlays($property) {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
padding: 70px 40px;
width: calc(50% - 80px);
height: calc(100% - 140px);
text-align: center;
transform: translateX($property);
transition: transform .5s ease-in-out;
}
.overlay-left {
@include overlays(-20%);
}
.overlay-right {
@include overlays(0);
right: 0;
}
}
h2 {
margin: 0;
}
p {
margin: 20px 0 30px;
}
a {
color: #222;
text-decoration: none;
margin: 15px 0;
font-size: 1rem;
}
button {
border-radius: 20px;
border: 1px solid #0096ff;
background-color: #0096ff;
color: #EBE7D9;
font-size: 1rem;
font-weight: bold;
padding: 10px 40px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: transform .1s ease-in;
&:active {
transform: scale(.9);
}
&:focus {
outline: none;
}
}
button.invert {
background-color: #272727;
border-color: #272727;
}
form {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
padding: 90px 60px;
width: calc(50% - 120px);
height: calc(100% - 180px);
text-align: center;
// background: linear-gradient(to bottom, #efefef, #ccc);
background-color: #272727;
transition: all .5s ease-in-out;
div {
font-size: 1rem;
}
input {
background-color: #EBE7D9;
border: none;
padding: 8px 15px;
margin: 6px 0;
width: calc(100% - 30px);
border-radius: 15px;
border-bottom: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4),
0 -1px 1px #fff,
0 1px 0 #fff;
overflow: hidden;
&:focus {
outline: none;
background-color: #fff;
}
}
}
.sign-in {
left: 0;
z-index: 2;
}
.sign-up {
left: 0;
z-index: 1;
opacity: 0;
}
.sign-up-active {
.sign-in {
transform: translateX(100%);
}
.sign-up {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show .5s;
}
.overlay-container {
transform: translateX(-100%);
}
.overlay {
transform: translateX(50%);
}
.overlay-left {
transform: translateX(0);
}
.overlay-right {
transform: translateX(20%);
}
}
@keyframes show {
0% {
opacity: 0;
z-index: 1;
}
49% {
opacity: 0;
z-index: 1;
}
50% {
opacity: 1;
z-index: 10;
}
}
</style>