From 67f7660ab94c34f4c04f912a18a56752f64efe0b Mon Sep 17 00:00:00 2001
From: rgrp <rufus.pollock@okfn.org>
Date: Tue, 15 Nov 2011 20:40:27 +0000
Subject: [PATCH] [css,layout][m]: get things layed out reasonably nicely
 again.

* Use top menu again
* Refactor main area so that data-table-container becomes data-view-container
* Fix up width of flot graph and editor so they line up reasonably nicely
---
 demo/index.html           | 22 +++++++++++++---------
 demo/js/app.js            |  1 +
 demo/style/data-table.css | 18 ++----------------
 demo/style/flot-graph.css | 10 ++++++----
 demo/style/style.css      | 31 ++++++++++++++++++++++++++++++-
 src/view.js               |  6 ++++--
 6 files changed, 56 insertions(+), 32 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index db4f5548..ddee99cf 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,20 +17,24 @@
 </head> 
 <body class="bod">
   <div class="container">
-    <form class="webstore-load">
-      <label for="source">Source</label>
-      <input type="text" name="source" size="50" />
-      <input type="submit" name="" value="Update" />
-    </form>
-    <!-- <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
+    <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
     <ul class="menu">
     </ul>
     <div id="header">
-      <a href="http://github.com/maxogden/recline"><img id="couchLogo" src="images/couch.png"/></a>
-      <div class="project-title"></div>
-      <div class="project-actions"></div>
+      <div class="project-title">
+        <a href="http://github.com/okfn/recline">Recline DataExplorer</a>
+        / Demo
+      </div>
+      <div class="project-actions">
+        <form class="webstore-load">
+          <label for="source">Source</label>
+          <input type="text" name="source" size="50" />
+          <input type="submit" name="" value="Update" />
+        </form>
+      </div>
       <div class="project-controls"></div>
     </div>
+    <!--
     <div class="main_content">
       <div class="left-panel"></div>
       <div class="right-panel"></div>
diff --git a/demo/js/app.js b/demo/js/app.js
index 9a3caa98..21f360bc 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -1,5 +1,6 @@
 $(function() {
   // do not like all these window globals ...
+  // window.$container = $('.container .right-panel');
   window.$container = $('.container');
   var dataset = demoDataset();
   window.dataExplorer = new recline.DataExplorer({
diff --git a/demo/style/data-table.css b/demo/style/data-table.css
index 0db4c813..39cbcde1 100755
--- a/demo/style/data-table.css
+++ b/demo/style/data-table.css
@@ -63,7 +63,6 @@ table {
 }
 
 input, select {
-  vertical-align: middle;
 }
 
 body {
@@ -428,7 +427,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 .project-controls, .project-actions {
-  margin: 3px 2px 0px 0px;
+  margin: 0px 2px 0px 0px;
   display: block;
   float: right;
   font-size: 1.3em;
@@ -573,19 +572,6 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   
 }
 
-.data-table-container {
-  display: block;
-  border-top: 1px solid #BCF;
-  overflow: auto;
-  position: absolute;
-  top: 73px;
-  bottom: 0px;
-  left: 5px;
-  right: 0px;
-  background: white;
-  }
-}
-
 .data-table {
   margin: 0;
   padding: 0;
@@ -1195,4 +1181,4 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f9f9f9));
   background: -moz-linear-gradient(top,  #e3e3e3,  #f9f9f9);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#f9f9f9');
-}
\ No newline at end of file
+}
diff --git a/demo/style/flot-graph.css b/demo/style/flot-graph.css
index 1c8920ba..64d9c35a 100644
--- a/demo/style/flot-graph.css
+++ b/demo/style/flot-graph.css
@@ -1,12 +1,14 @@
 .data-graph-container .graph {
-  width: 650px;
-  height: 400px;
-  float: left;
+	position: absolute;
+	left: 0;
+	right: 220px;
+	bottom: 0;
+  height: 100%;
 }
 
 .data-graph-container .editor {
-	z-index: 1;
 	background-color: #efefef;
+  position: absolute;
 	right: 0;
 	left: auto;
 	width: 198px;
diff --git a/demo/style/style.css b/demo/style/style.css
index d827a16d..5e073b3a 100755
--- a/demo/style/style.css
+++ b/demo/style/style.css
@@ -209,4 +209,33 @@ span.tooltip-status {
   font-weight:bold;
   color:red;
   text-align:center;
-}
\ No newline at end of file
+}
+
+/* rgrp added mods */
+
+.data-explorer .nav {
+  border-top: 15px solid #BCF;
+  border-left: 5px solid #BCF;
+  display: block;
+  overflow: auto;
+  position: absolute;
+  top: 35px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: white;
+  padding-top: 3px;
+}
+
+.data-view-container {
+  display: block;
+  border-top: 1px solid #BCF;
+  border-left: 5px solid #BCF;
+  overflow: auto;
+  position: absolute;
+  top: 83px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: white;
+}
diff --git a/src/view.js b/src/view.js
index ec42d795..68a005cb 100644
--- a/src/view.js
+++ b/src/view.js
@@ -12,6 +12,7 @@ recline.DataExplorer = Backbone.View.extend({
         <label for="nav-graph">Graph</label> \
       </span> \
     </div> \
+    <div class="data-view-container"></div> \
   ',
 
   events: {
@@ -21,6 +22,7 @@ recline.DataExplorer = Backbone.View.extend({
   initialize: function() {
     this.el = $(this.el);
     this.render();
+    this.$dataViewContainer = this.el.find('.data-view-container');
     var self = this;
     // retrieve basic data like headers etc
     // note this.model and dataset returned are the same
@@ -33,8 +35,8 @@ recline.DataExplorer = Backbone.View.extend({
         model: dataset
       });
       self.flotGraph.el.hide();
-      self.el.append(self.dataTable.el)
-      self.el.append(self.flotGraph.el);
+      self.$dataViewContainer.append(self.dataTable.el)
+      self.$dataViewContainer.append(self.flotGraph.el);
     });
   },
 
