start styling searchMatch and few changes

site/client/app/app.js

@@ -16,7 +16,6 @@ var app = new Vue({
 
   components: {
     lobby: require('./components/lobby'),
-    navigation: require('./components/navigation'),
     chat: require('./components/chat')
   }
 

site/client/app/components/lobby.js

@@ -1,5 +1,16 @@
 module.exports = {
 
-  template: require('../views/lobby.html')
+  template: require('../views/lobby.html'),
+
+  data: function() {
+  	return {
+  		modal: false
+  	}
+  },
+
+  components: {
+  	searchmatch: require('./modals/searchMatch'),
+  	navigation: require('./navigation')
+  }
 
 };

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

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

site/client/app/components/navigation.js

@@ -4,9 +4,16 @@ module.exports = {
 
   template: require('../views/navigation.html'),
 
+  inherit: true,
+
   methods: {
     changeView: function(view) {
       router.changeRoute(view);
+    },
+
+    searchMatch: function() {
+    	this.modal = true;
+    	// trigger match functions
     }
   }
 

site/client/app/routes.js

@@ -13,9 +13,7 @@ var routes = {
 };
 
 var options = {
-  html5history: true,
+  html5history: true
-  run_handler_in_init: false,
-  convert_hash_in_init: false
 }
 
 var Router = require('director').Router;

site/client/app/views/lobby.html

@@ -5,7 +5,7 @@
   <navigation></navigation>
 
   <section class="container-content">
-    blaa
+    <searchmatch></searchmatch>
   </section>
 
 </main>

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

@@ -0,0 +1,10 @@
+<div class="modal" v-class="active: modal">
+  <div class="modal-banner">
+    <div class="wrap-modal-search">
+
+      <i class="icon-content-load"></i>
+      <p class="modal-para">Search for Player</p>
+
+    </div>
+  </div>
+</div>

site/client/app/views/navigation.html

@@ -4,6 +4,6 @@
     <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
     <li><a v-on="click: changeView('highscore')">Highscore</a></li>
 
-    <li class="sub-nav"><a>Quick Match</a></li>
+    <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>
   </ul>
 </nav>

site/client/assets/sass/_modal.scss

@@ -3,6 +3,11 @@
   margin: 0 auto;
 }
 
+.wrap-modal-search {
+  max-width: 250px;
+  margin: 0 auto;
+}
+
 .modal {
   position: fixed;
   width: 100%;
@@ -31,4 +36,22 @@
   padding: 50px 0;
   margin: 15% 0 0 0;
   float: left;
+}
+
+.icon-content-load {
+  background: url(../img/content-load.gif) no-repeat;
+  float: left;
+  width: 32px;
+  height: 32px;
+  opacity: .9;
+}
+
+.modal-para {
+  font-size: 17px;
+  text-transform: uppercase;
+  font-weight: 300;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+  color: #8798ac;
+  float: left;
+  margin: 3px 0 0 20px;
 }