fix styling and add more logic

site/client/app/app.js

@@ -15,8 +15,8 @@ var app = new Vue({
   },
 
   components: {
-    'landing': require('./components/landing'),
+    landing: require('./components/landing'),
-    'lobby': require('./components/lobby')
+    lobby: require('./components/lobby')
   }
 
 });

site/client/app/components/landing.js

@@ -2,6 +2,10 @@ module.exports = {
 
   template: require('../views/landing.html'),
 
+  components: {
+    login: require('./modals/login')
+  },
+
   ready: function() {
     setTimeout(function() {
       $('.container-form-landing').addClass('active')

site/client/app/components/modals/login.js

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

site/client/app/views/landing.html

@@ -1,4 +1,6 @@
-<section class="container-landing" id="lol">
+<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 href="#/lobby" class="btn-second btn-guest">Play as guest</a>
-      <a href="#" class="btn-none btn-login">Login</a>
+      <a href="#" class="btn-none btn-login" v-on="click: modal = true">Login</a>
 
     </div>
   </div>

site/client/app/views/lobby.html

@@ -1 +1,9 @@
-LOBBY HIER BLA BLA
+<section class="container-inner">
+
+  <a href="#/lobby"><img src="assets/img/logo-medium.png" width="148" height="46" alt="Gwent" class="logo-medium"></a>
+
+  <main>
+
+  </main>
+
+</section>

site/client/app/views/modals/login.html

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

site/client/assets/sass/_base.scss

@@ -13,11 +13,6 @@ body {
   font-family: 'Titillium Web', sans-serif;
 }
 
-body.inner {
-  background: url(../img/inner-bg.jpg) center top no-repeat;
-  background-size: cover;
-}
-
 ::-moz-selection {
   background: rgba($main, .99);
   color: #fff;

site/client/assets/sass/_inner.scss

@@ -0,0 +1,9 @@
+body.inner {
+  background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
+  background-size: cover;
+}
+
+.container-inner {
+  width: 100%;
+  padding: 40px;
+}

site/client/assets/sass/_landing.scss

@@ -1,5 +1,5 @@
 body.landing {
-  background: url(../img/landing-bg.jpg) center top no-repeat;
+  background: url(../img/landing-bg.jpg) #162232 center top no-repeat;
   background-size: cover;
 }
 

site/client/assets/sass/app.scss

@@ -8,4 +8,5 @@
 
 'modal',
 'form',
-'landing';
+'landing',
+'inner';