Changed layout to nav-tabs based

Layout is work in progress

app/router.js

@@ -6,10 +6,15 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-    this.route('entities', { path: '/' }, function() {
+    this.route('lab-mashup', { path: '/' }, function() {
+      // dynamic routes
       this.route('entity', { path: '/:entity_id' }, function() {
         this.route('property', { path: '/:property_id'});
       });
+
+      // static routes
+      this.route('static1', { path: '/static1' });
+      this.route('static2', { path: '/static2' });
     });
 });
 

app/styles/app.css

@@ -4,7 +4,7 @@ html, body {
 }
 
 body {
-	background: #ccc;
+	background: #eee;
 	color: #4d4d4d;
 
 	min-width: 300px;
@@ -23,22 +23,16 @@ body {
 }
 
 #lapMashupApp {
-	background: #fff;
-	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-				0 25px 50px 0 rgba(0, 0, 0, 0.1);
 
-	margin: 150px 0 40px 0;
-	position: relative;
 }
 
-#lapMashupApp h1 {
-	color: rgba(95, 95, 95, 0.7);
+header {
+	color: #fff;
+	background-color: #8080C9;
 
-	position: absolute;
-	top: -175px;
-	width: 100%;
+	padding: 10px 0 10px 0;
 
-	font-size: 70px;
+	font-size: 60px;
 	font-weight: 100;
 	text-align: center;
 	text-rendering: optimizeLegibility;
@@ -46,12 +40,44 @@ body {
 	-moz-text-rendering: optimizeLegibitliy;
 }
 
-#main {
-	border-top: 1px solid #e6e6e6;
+#menu {
+	background-color: #6060C9;
 
-	padding: 20px;
-	position: relative;
-	z-index: 2;
+	border-top: 1px solid #3030C9;
+
+	width: 100%;
+}
+
+.nav-tabs {
+	color: #ccc;
+	background-color: #6060C9;
+
+	padding-left: 30px;
+
+	border: 0;
+}
+
+.nav-tabs > li > a {
+	color: #ccc;
+	background-color: #5050C9;
+	box-shadow: none;
+
+	border: 0;
+}
+
+.nav-tabs > li > a:hover {
+	color: #ccc;
+	background-color: #7070C9;
+
+	box-shadow: none;
+
+	border: 0;
+	border-radius: 0;
+}
+
+#main {
+	margin-top: 15px;
+	margin-left: 15px;
 }
 
 #main-left {

app/templates/application.hbs

@@ -1,6 +1,6 @@
 <section id="lapMashupApp">
 	<header id="header">
-		<h1>Lab Mashup Visualization</h1>
+		Lab Mashup Visualization
 	</header>
 	
 	{{outlet}}

app/templates/components/properties-table.hbs

@@ -5,7 +5,7 @@
 </tr>
 {{#each entity.properties as |property|}}
   <tr>
-    <td>{{#link-to 'entities.entity.property' property}}{{property.name}}{{/link-to}}</td>
+    <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
     <td>{{property.value}} {{property.type}}</td>
     <td>{{property.timestamp}}</td>
   </tr>

app/templates/entities.hbs

@@ -1,11 +0,0 @@
-<section id="main">
-	{{#if model}}
-		<h2>Entities</h2>
-
-		{{entities-table entities=model}}
-	{{else}}
-		<h2>No entities found</h2>
-	{{/if}}
-
-	{{outlet}}
-</section>

app/templates/entities/index.hbs

@@ -1,3 +0,0 @@
-{{#if model}}
-  <p>Select an entity to show it's properties</p>
-{{/if}}

app/templates/lab-mashup.hbs

@@ -0,0 +1,10 @@
+<ul class="nav nav-tabs" role="tablist">
+	{{#link-to 'lab-mashup.static1' tagName='li' activeClass='active'}}{{#link-to 'lab-mashup.static1'}}Static 1{{/link-to}}{{/link-to}}
+	{{#link-to 'lab-mashup.entity' 'S1_ElectricalGrid' tagName='li'}}{{#link-to 'lab-mashup.entity' 'S1_ElectricalGrid'}}Entity 1{{/link-to}}{{/link-to}}
+	{{#link-to 'lab-mashup.entity' 'S2_ElectricalGrid' tagName='li'}}{{#link-to 'lab-mashup.entity' 'S2_ElectricalGrid'}}Entity 2{{/link-to}}{{/link-to}}
+	{{#link-to 'lab-mashup.static2' tagName='li'}}{{#link-to 'lab-mashup.static1'}}Static 2{{/link-to}}{{/link-to}}
+</ul>
+
+<section id="main">
+	{{outlet}}
+</section>

app/templates/lab-mashup/index.hbs

@@ -0,0 +1 @@
+<p>Select an entity to show it's properties</p>

app/templates/lab-mashup/static1.hbs

@@ -0,0 +1 @@
+<p>Static 1 page</p>

app/templates/lab-mashup/static2.hbs

@@ -0,0 +1 @@
+<p>Static 2 page</p>

bower.json

@@ -14,6 +14,7 @@
     "qunit": "~1.18.0",
     "pretender": "~0.9.0",
     "lodash": "~3.7.0",
-    "Faker": "~3.0.0"
+    "Faker": "~3.0.0",
+    "bootstrap": "~3.3.2"
   }
 }

package.json

@@ -20,6 +20,7 @@
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.1.2",
+    "ember-bootstrap": "0.4.0",
     "ember-cli": "1.13.8",
     "ember-cli-app-version": "0.5.0",
     "ember-cli-babel": "^5.1.3",