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:
commit
45248ccb4b
995
frontend/package-lock.json
generated
995
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
261
frontend/src/views/SignIn.vue
Normal file
261
frontend/src/views/SignIn.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user