From 9496e8023e96bb5a9f16f061483f89ae6b5f8d0e Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 1 Oct 2015 16:36:37 +0200
Subject: [PATCH] Changed layout to two columns based

The left column displays all entities found and the right column
displays the properties of one entity. An entity can be selected
by clicking on it in the left table.

Last updated label is visible but not used yet.
---
 app/components/entities-table.js    |  2 +-
 app/components/properties-table.js  |  2 +-
 app/routes/lab-mashup.js            |  3 +++
 app/routes/lab-mashup/index.js      |  3 ---
 app/styles/app.css                  | 38 +++++++++++++++++++----------
 app/templates/lab-mashup.hbs        | 14 ++++++++++-
 app/templates/lab-mashup/entity.hbs |  2 --
 app/templates/lab-mashup/index.hbs  |  2 +-
 8 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/app/components/entities-table.js b/app/components/entities-table.js
index b47b62e..555fdc6 100644
--- a/app/components/entities-table.js
+++ b/app/components/entities-table.js
@@ -2,5 +2,5 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'table',
-  classNames: ['properties-table']
+  classNames: ['data-table']
 });
diff --git a/app/components/properties-table.js b/app/components/properties-table.js
index b47b62e..555fdc6 100644
--- a/app/components/properties-table.js
+++ b/app/components/properties-table.js
@@ -2,5 +2,5 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'table',
-  classNames: ['properties-table']
+  classNames: ['data-table']
 });
diff --git a/app/routes/lab-mashup.js b/app/routes/lab-mashup.js
index 26d9f31..3ac0567 100644
--- a/app/routes/lab-mashup.js
+++ b/app/routes/lab-mashup.js
@@ -1,4 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+  model() {
+    return this.store.findAll('entity');
+  }
 });
diff --git a/app/routes/lab-mashup/index.js b/app/routes/lab-mashup/index.js
index 3ac0567..26d9f31 100644
--- a/app/routes/lab-mashup/index.js
+++ b/app/routes/lab-mashup/index.js
@@ -1,7 +1,4 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-  model() {
-    return this.store.findAll('entity');
-  }
 });
diff --git a/app/styles/app.css b/app/styles/app.css
index fff2f7e..58b25b0 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -54,20 +54,32 @@ body {
 	z-index: 2;
 }
 
-#footer {
-	color: #777;
-	border-top: 1px solid #e6e6e6;
+#main-left {
+	float: left;
+	width: 45%;
 
-	padding: 10px 15px;
-	height: 20px;
+	padding-top: 10px;
+	padding-left: 25px;
+}
 
-	text-align: center;
+#main-right {
+	float: right;
+	width: 45%;
+
+	padding-top: 10px;
+	padding-right: 25px;
+}
+
+#main::after {
+	display: block;
+	content: "";
+	clear: both;
 }
 
 #info {
 	color: #777;
 
-	margin: 65px auto 0;
+	margin: 35px auto 0;
 
 	font-size: 12px;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@@ -75,23 +87,23 @@ body {
 }
 
 #last-update-info {
-	margin: 30px auto auto 0;
+	padding: 0px 0 20px 0;
 
-	font-size: 12px;
+	font-size: 16px;
 	text-align: center;
 }
 
-.properties-table {
+.data-table {
 	background: #eee;
 
 	border: 1px solid #999;
 	border-collapse: collapse;
 
-	width: 50%;
+	width: 100%;
 	margin: 0 auto;
 }
 
-.properties-table th {
+.data-table th {
 	background: #ddd;
 
 	border: 1px solid #999;
@@ -102,7 +114,7 @@ body {
 	font-size: 16px;
 }
 
-.properties-table td {
+.data-table td {
 	border: 1px solid #999;
 	border-collapse: collapse;
 
diff --git a/app/templates/lab-mashup.hbs b/app/templates/lab-mashup.hbs
index 405f0a0..5f86ee1 100644
--- a/app/templates/lab-mashup.hbs
+++ b/app/templates/lab-mashup.hbs
@@ -1,3 +1,15 @@
 <section id="main">
-	{{outlet}}
+	<section id="main-left">
+		<h2>Entities</h2>
+
+		{{entities-table entities=model}}
+	</section>
+
+	<section id="main-right">
+		{{outlet}}
+	</section>
+</section>
+
+<section id="last-update-info">
+	<p>Last updated: </p>
 </section>
diff --git a/app/templates/lab-mashup/entity.hbs b/app/templates/lab-mashup/entity.hbs
index 7e7e964..eb6e543 100644
--- a/app/templates/lab-mashup/entity.hbs
+++ b/app/templates/lab-mashup/entity.hbs
@@ -1,5 +1,3 @@
 {{entity-title entity=model}}
 
 {{properties-table entity=model}}
-
-{{#link-to 'lab-mashup'}}Entities{{/link-to}}
diff --git a/app/templates/lab-mashup/index.hbs b/app/templates/lab-mashup/index.hbs
index 8c43439..5321cb4 100644
--- a/app/templates/lab-mashup/index.hbs
+++ b/app/templates/lab-mashup/index.hbs
@@ -1 +1 @@
-{{entities-table entities=model}}
+<p>Select an entity to show it's properties</p>