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

[layout][s]: re-layout header section of DataExplorer view.

Browse Source
This commit is contained in:
Rufus Pollock 2012-01-06 20:32:33 +00:00
parent f8cbb60bf6
commit deabb59d51
2 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
demo/style/style.css
View File

@ -213,7 +213,7 @@ span.tooltip-status {
/* rgrp added mods */
.data-explorer .nav {
.data-explorer .header {
border-top: 15px solid #BCF;
border-left: 5px solid #BCF;
display: block;
@ -227,6 +227,27 @@ span.tooltip-status {
padding-top: 3px;
}
.header .navigation,
.header .navigation li,
.header .pagination,
.header .pagination form
{
display: inline;
}
.header .pagination {
float: right;
}
.header .pagination input {
width: 40px;
}
.doc-count {
font-weight: bold;
font-size: 120%;
}
.data-view-container {
display: block;
border-top: 1px solid #BCF;
@ -239,23 +260,3 @@ span.tooltip-status {
right: 0px;
background: white;
}
.nav-pagination {
display: inline;
float: right;
list-style-type: none;
}
.nav-pagination li {
display: inline-block;
}
.nav-pagination input {
width: 40px;
}
.doc-count {
font-weight: bold;
font-size: 120%;
}

24
src/view.js
View File

@ -12,17 +12,17 @@ my.DataExplorer = Backbone.View.extend({
tagName: 'div',
className: 'data-explorer',
template: ' \
<div class="nav"> \
<span class="nav-toggle"> \
<input type="radio" id="datatable" name="nav-toggle" value="datatable" checked="checked" /> \
<label for="nav-datatable">Data Table</label> \
<input type="radio" id="nav-graph" name="nav-toggle" value="graph" /> \
<label for="nav-graph">Graph</label> \
</span> \
<ul class="nav-pagination"> \
<li>Total documents: <span class="doc-count">{{docCount}}</span></li> \
<li><form class="display-count"><label for="per-page">Items to show</label> <input name="displayCount" type="text" value="{{displayCount}}" /></form></li> \
<div class="header"> \
<ul class="navigation tabs"> \
<li class="active"><a href="#datatable">Grid</a> \
<li><a href="#graph">Graph</a></li> \
</ul> \
<div class="pagination"> \
Total: <span class="doc-count">{{docCount}}</span> \
<form class="display-count"> \
<label for="per-page">Per page</label> <input name="displayCount" type="text" value="{{displayCount}}" /> \
</form> \
</div> \
</div> \
<div class="data-view-container"></div> \
<div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
@ -39,7 +39,7 @@ my.DataExplorer = Backbone.View.extend({
',
events: {
'change input[name="nav-toggle"]': 'navChange',
'click .navigation li a': 'navChange',
'submit form.display-count': 'displayCountUpdate'
},
@ -89,7 +89,7 @@ my.DataExplorer = Backbone.View.extend({
navChange: function(e) {
// TODO: really ugly and will not scale to more widgets ...
var widgetToShow = $(e.target).val();
var widgetToShow = $(e.target).attr('href').slice(1);
if (widgetToShow == 'datatable') {
this.flotGraph.el.hide();
this.dataTable.el.show();