knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[css,layout][m]: get things layed out reasonably nicely again.

Browse Source 
* 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
This commit is contained in:
rgrp
2011-11-15 20:40:27 +00:00
parent 08ab25e981
commit 67f7660ab9
6 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
demo/index.html
View File

@@ -17,20 +17,24 @@
</head> </head>
<body class="bod"> <body class="bod">
<div class="container"> <div class="container">
<form class="webstore-load"> <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
<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>
<ul class="menu"> <ul class="menu">
</ul> </ul>
<div id="header"> <div id="header">
<a href="http://github.com/maxogden/recline"><img id="couchLogo" src="images/couch.png"/></a> <div class="project-title">
<div class="project-title"></div> <a href="http://github.com/okfn/recline">Recline DataExplorer</a>
<div class="project-actions"></div> / 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 class="project-controls"></div>
</div> </div>
<!--
<div class="main_content"> <div class="main_content">
<div class="left-panel"></div> <div class="left-panel"></div>
<div class="right-panel"></div> <div class="right-panel"></div>

1
demo/js/app.js
View File

@@ -1,5 +1,6 @@
$(function() { $(function() {
// do not like all these window globals ... // do not like all these window globals ...
// window.$container = $('.container .right-panel');
window.$container = $('.container'); window.$container = $('.container');
var dataset = demoDataset(); var dataset = demoDataset();
window.dataExplorer = new recline.DataExplorer({ window.dataExplorer = new recline.DataExplorer({

16
demo/style/data-table.css
View File

@@ -63,7 +63,6 @@ table {
} }
input, select { input, select {
vertical-align: middle;
} }
body { body {
@@ -428,7 +427,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
} }
.project-controls, .project-actions { .project-controls, .project-actions {
margin: 3px 2px 0px 0px; margin: 0px 2px 0px 0px;
display: block; display: block;
float: right; float: right;
font-size: 1.3em; 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 { .data-table {
margin: 0; margin: 0;
padding: 0; padding: 0;

10
demo/style/flot-graph.css
View File

@@ -1,12 +1,14 @@
.data-graph-container .graph { .data-graph-container .graph {
width: 650px; position: absolute;
height: 400px; left: 0;
float: left; right: 220px;
bottom: 0;
height: 100%;
} }
.data-graph-container .editor { .data-graph-container .editor {
z-index: 1;
background-color: #efefef; background-color: #efefef;
position: absolute;
right: 0; right: 0;
left: auto; left: auto;
width: 198px; width: 198px;

29
demo/style/style.css
View File

@@ -210,3 +210,32 @@ span.tooltip-status {
color:red; color:red;
text-align:center; text-align:center;
} }
/* 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;
}

6
src/view.js
View File

@@ -12,6 +12,7 @@ recline.DataExplorer = Backbone.View.extend({
<label for="nav-graph">Graph</label> \ <label for="nav-graph">Graph</label> \
</span> \ </span> \
</div> \ </div> \
<div class="data-view-container"></div> \
', ',
events: { events: {
@@ -21,6 +22,7 @@ recline.DataExplorer = Backbone.View.extend({
initialize: function() { initialize: function() {
this.el = $(this.el); this.el = $(this.el);
this.render(); this.render();
this.$dataViewContainer = this.el.find('.data-view-container');
var self = this; var self = this;
// retrieve basic data like headers etc // retrieve basic data like headers etc
// note this.model and dataset returned are the same // note this.model and dataset returned are the same
@@ -33,8 +35,8 @@ recline.DataExplorer = Backbone.View.extend({
model: dataset model: dataset
}); });
self.flotGraph.el.hide(); self.flotGraph.el.hide();
self.el.append(self.dataTable.el) self.$dataViewContainer.append(self.dataTable.el)
self.el.append(self.flotGraph.el); self.$dataViewContainer.append(self.flotGraph.el);
}); });
}, },