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

demo/style/style.css

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

src/view.js

@@ -12,17 +12,17 @@ my.DataExplorer = Backbone.View.extend({
   tagName: 'div',
   className: 'data-explorer',
   template: ' \
-    <div class="nav"> \
+    <div class="header"> \
-      <span class="nav-toggle"> \
+      <ul class="navigation tabs"> \
-        <input type="radio" id="datatable" name="nav-toggle" value="datatable" checked="checked" /> \
+        <li class="active"><a href="#datatable">Grid</a> \
-        <label for="nav-datatable">Data Table</label> \
+        <li><a href="#graph">Graph</a></li> \
-        <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> \
       </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();