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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demo/index.html
View File

@ -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>

1
demo/js/app.js
View File

@ -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({

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

@ -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');
}
}

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

@ -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;

31
demo/style/style.css
View File

@ -209,4 +209,33 @@ span.tooltip-status {
font-weight:bold;
color:red;
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> \
</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);
});
},