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,
-  run_handler_in_init: false,
-  convert_hash_in_init: false
+  html5history: true
 }
 
 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>