1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-12-23 21:03:14 +00:00

implement login view

This commit is contained in:
devfake 2015-06-23 09:44:14 +02:00
parent f3759f78cb
commit ba0965c016
8 changed files with 61 additions and 11 deletions

View File

@ -1,11 +1,5 @@
module.exports = {
template: "<h2>deckbuilder hier</h2>",
data: function() {
return {
}
}
template: require('../views/deckBuilder.html')
};

View File

@ -6,6 +6,16 @@ module.exports = {
inherit: true,
data: function() {
return {
modal: false
}
},
components: {
login: require('./modals/login')
},
ready: function() {
setTimeout(function() {
$('.container-form-landing').addClass('active')
@ -20,6 +30,14 @@ module.exports = {
setTimeout(function() {
window.location.href = './lobby';
}, 500);
},
openLogin: function() {
this.modal = true;
setTimeout(function() {
$('.login-username').focus();
}, 500);
}
}

View File

@ -0,0 +1,11 @@
module.exports = {
template: require('../../views/modals/login.html'),
inherit: true,
methods: {
}
};

View File

@ -0,0 +1 @@
deckbuilder

View File

@ -1,3 +1,5 @@
<login></login>
<section class="container-landing">
<div class="wrap-landing">
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
@ -22,7 +24,7 @@
<span class="choose">or</span>
<a class="btn-second btn-guest" v-on="click: asGuest">Play as guest <i class="icon-guest-load"></i></a>
<a href="#" class="btn-none btn-login">Login</a>
<a class="btn-none btn-login" v-on="click: openLogin">Login</a>
</div>
</div>

View File

@ -0,0 +1,19 @@
<div class="modal" v-class="active: modal">
<div class="modal-banner">
<div class="wrap-modal-login">
<form class="form-session">
<input type="text" placeholder="Username" class="field-session login-username">
<input type="password" placeholder="Password" class="field-session login-password">
<div class="wrap-btn-action btn-register-action">
<input type="submit" value="Login" class="btn-action">
<i class="icon-action-load"></i>
</div>
<span class="btn-sub">Forgot Password?</span>
</form>
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@
<i class="icon-content-load"></i>
<p class="modal-para">Search for Player</p>
<span class="btn-cancel" v-on="click: cancelMatch">Cancel</span>
<span class="btn-sub" v-on="click: cancelMatch">Cancel</span>
</div>
</div>

View File

@ -1,4 +1,4 @@
.wrap-modal {
.wrap-modal-login {
max-width: 600px;
margin: 0 auto;
}
@ -64,7 +64,7 @@
margin: 20px 0 50px 0;
}
.btn-cancel {
.btn-sub {
color: darken(#8798ac, 30%);
cursor: pointer;
text-transform: uppercase;
@ -74,4 +74,9 @@
&:hover {
color: #8798ac;
}
.wrap-modal-login & {
margin: 30px 0 0 0;
float: left;
}
}