diff --git a/site/client/app/components/deckBuilder.js b/site/client/app/components/deckBuilder.js index 113437f..b3113c5 100644 --- a/site/client/app/components/deckBuilder.js +++ b/site/client/app/components/deckBuilder.js @@ -1,11 +1,5 @@ module.exports = { - template: "<h2>deckbuilder hier</h2>", - - data: function() { - return { - - } - } + template: require('../views/deckBuilder.html') }; \ No newline at end of file diff --git a/site/client/app/components/landing.js b/site/client/app/components/landing.js index 339f7aa..e294772 100644 --- a/site/client/app/components/landing.js +++ b/site/client/app/components/landing.js @@ -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); } } diff --git a/site/client/app/components/modals/login.js b/site/client/app/components/modals/login.js new file mode 100644 index 0000000..05c69d2 --- /dev/null +++ b/site/client/app/components/modals/login.js @@ -0,0 +1,11 @@ +module.exports = { + + template: require('../../views/modals/login.html'), + + inherit: true, + + methods: { + + } + +}; \ No newline at end of file diff --git a/site/client/app/views/deckBuilder.html b/site/client/app/views/deckBuilder.html new file mode 100644 index 0000000..b5c5998 --- /dev/null +++ b/site/client/app/views/deckBuilder.html @@ -0,0 +1 @@ +deckbuilder \ No newline at end of file diff --git a/site/client/app/views/landing.html b/site/client/app/views/landing.html index c495841..883aac7 100644 --- a/site/client/app/views/landing.html +++ b/site/client/app/views/landing.html @@ -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> diff --git a/site/client/app/views/modals/login.html b/site/client/app/views/modals/login.html new file mode 100644 index 0000000..c8e5bf2 --- /dev/null +++ b/site/client/app/views/modals/login.html @@ -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> \ No newline at end of file diff --git a/site/client/app/views/modals/searchMatch.html b/site/client/app/views/modals/searchMatch.html index f529f5b..c6e8d0d 100644 --- a/site/client/app/views/modals/searchMatch.html +++ b/site/client/app/views/modals/searchMatch.html @@ -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> diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss index 48770d6..933c9d0 100644 --- a/site/client/assets/sass/_modal.scss +++ b/site/client/assets/sass/_modal.scss @@ -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; + } } \ No newline at end of file