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

[#55,misc][s]: switch to bootstrap v2.0 making some minor changes to html and css as a result (fixes #55).

Browse Source
This commit is contained in:
Rufus Pollock
2012-02-29 12:52:03 +00:00
parent bf5476d0e4
commit 94651fbff4
9 changed files with 5150 additions and 2611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/data-explorer.css
View File

@@ -20,7 +20,12 @@
.header .recline-query-editor { .header .recline-query-editor {
float: right; float: right;
margin: 4px; height: 30px;
}
.header .recline-query-editor form {
height: 30px;
margin-bottom: 0;
} }
.header .recline-query-editor label { .header .recline-query-editor label {
@@ -39,12 +44,19 @@
.header .recline-query-editor .pagination input { .header .recline-query-editor .pagination input {
width: 30px; width: 30px;
height: 18px;
padding: 2px 4px;
margin-top: -4px;
} }
.header .recline-query-editor .pagination a { .header .recline-query-editor .pagination a {
line-height: 28px; line-height: 28px;
} }
.header .recline-query-editor form .btn {
margin-top: -23px;
}
.data-view-container { .data-view-container {
display: block; display: block;
clear: both; clear: both;
@@ -155,11 +167,13 @@
.data-table { .data-table {
border: 1px solid #ccc; border: 1px solid #ccc;
font-size: 12px; font-size: 12px;
width: 100%;
} }
.data-table td, .data-table th { .data-table td, .data-table th {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
padding: 3px 4px; padding: 3px 4px;
text-align: left;
} }
.data-table tr td:first-child, .data-table tr th:first-child { .data-table tr td:first-child, .data-table tr th:first-child {

12
demo/index.html
View File

@@ -10,7 +10,7 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<link rel="stylesheet" href="../vendor/bootstrap/1.4.0/bootstrap.css"> <link rel="stylesheet" href="../vendor/bootstrap/2.0.0/bootstrap.css">
<link rel="stylesheet" href="../css/data-explorer.css"> <link rel="stylesheet" href="../css/data-explorer.css">
<link rel="stylesheet" href="../css/graph-flot.css"> <link rel="stylesheet" href="../css/graph-flot.css">
<link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/bootstrap.css">
@@ -21,20 +21,20 @@
<script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script> <script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script> <script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/1.4.0/bootstrap-alerts.js"></script> <script type="text/javascript" src="../vendor/bootstrap/2.0.0/bootstrap.js"></script>
<script type="text/javascript" src="../recline.js"></script> <script type="text/javascript" src="../recline.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
</head> </head>
<body> <body>
<div class="topbar"> <div class="navbar navbar-fixed-top">
<div class="topbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<a class="brand" href="#">Recline Data Explorer</a> <a class="brand" href="#">Recline Data Explorer</a>
<ul class="nav secondary-nav"> <ul class="nav pull-right">
<li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li> <li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
</ul> </ul>
<form class="webstore-load pull-right" title="Update from the specified webstore dataset"> <form class="webstore-load pull-right navbar-search" title="Update from the specified webstore dataset">
<input type="text" name="source" size="50" /> <input type="text" name="source" size="50" />
<select name="backend_type"> <select name="backend_type">
<option value="elasticsearch">ElasticSearch</option> <option value="elasticsearch">ElasticSearch</option>

7
docs/view.html
View File

@@ -170,7 +170,7 @@ note this.model and dataset returned are the same</p> </td>
<span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-query-editor&#39;</span><span class="p">,</span> <span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-query-editor&#39;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span> <span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;form action=&quot;&quot; method=&quot;GET&quot;&gt; \</span> <span class="s1"> &lt;form action=&quot;&quot; method=&quot;GET&quot; class=&quot;form-inline&quot;&gt; \</span>
<span class="s1"> &lt;input type=&quot;text&quot; name=&quot;q&quot; value=&quot;{{q}}&quot; class=&quot;text-query&quot; /&gt; \</span> <span class="s1"> &lt;input type=&quot;text&quot; name=&quot;q&quot; value=&quot;{{q}}&quot; class=&quot;text-query&quot; /&gt; \</span>
<span class="s1"> &lt;div class=&quot;pagination&quot;&gt; \</span> <span class="s1"> &lt;div class=&quot;pagination&quot;&gt; \</span>
<span class="s1"> &lt;ul&gt; \</span> <span class="s1"> &lt;ul&gt; \</span>
@@ -274,12 +274,11 @@ note this.model and dataset returned are the same</p> </td>
<span class="p">},</span> <span class="p">},</span>
<span class="nx">options</span><span class="p">);</span> <span class="nx">options</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">&#39; \</span> <span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;alert-message {{category}} fade in&quot; data-alert=&quot;alert&quot;&gt;&lt;a class=&quot;close&quot; href=&quot;#&quot;&gt;×&lt;/a&gt; \</span> <span class="s1"> &lt;div class=&quot;alert alert-{{category}} fade in&quot; data-alert=&quot;alert&quot;&gt;&lt;a class=&quot;close&quot; data-dismiss=&quot;alert&quot; href=&quot;#&quot;&gt;×&lt;/a&gt; \</span>
<span class="s1"> &lt;p&gt;{{msg}} \</span> <span class="s1"> {{msg}} \</span>
<span class="s1"> {{#loader}} \</span> <span class="s1"> {{#loader}} \</span>
<span class="s1"> &lt;img src=&quot;images/small-spinner.gif&quot; class=&quot;notification-loader&quot;&gt; \</span> <span class="s1"> &lt;img src=&quot;images/small-spinner.gif&quot; class=&quot;notification-loader&quot;&gt; \</span>
<span class="s1"> {{/loader}} \</span> <span class="s1"> {{/loader}} \</span>
<span class="s1"> &lt;/p&gt; \</span>
<span class="s1"> &lt;/div&gt;&#39;</span><span class="p">;</span> <span class="s1"> &lt;/div&gt;&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.data-explorer .alert-messages&#39;</span><span class="p">));</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.data-explorer .alert-messages&#39;</span><span class="p">));</span>

50
recline.js
View File

@@ -872,7 +872,8 @@ my.DataGrid = Backbone.View.extend({
// ## DataGridRow View for rendering an individual document. // ## DataGridRow View for rendering an individual document.
// //
// Since we want this to update in place it is up to creator to provider the element to attach to. // Since we want this to update in place it is up to creator to provider the element to attach to.
// In addition you must pass in a fields in the constructor options. This should be list of fields for the DataGrid. //
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
// //
// Additional options can be passed in a second hash argument. Options: // Additional options can be passed in a second hash argument. Options:
// //
@@ -881,6 +882,19 @@ my.DataGrid = Backbone.View.extend({
// corresponding field object and document is the document object. Note // corresponding field object and document is the document object. Note
// that implementing functions can ignore arguments (e.g. // that implementing functions can ignore arguments (e.g.
// function(value) would be a valid cellRenderer function). // function(value) would be a valid cellRenderer function).
//
// Example:
//
// <pre>
// var row = new DataGridRow({
// model: dataset-document,
// el: dom-element,
// fields: mydatasets.fields // a FieldList object
// }, {
// cellRenderer: my-cell-renderer-function
// }
// );
// </pre>
my.DataGridRow = Backbone.View.extend({ my.DataGridRow = Backbone.View.extend({
initialize: function(initData, options) { initialize: function(initData, options) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
@@ -932,9 +946,8 @@ my.DataGridRow = Backbone.View.extend({
return this; return this;
}, },
// Cell Editor // ===================
// =========== // Cell Editor methods
onEditClick: function(e) { onEditClick: function(e) {
var editing = this.el.find('.data-table-cell-editor-editor'); var editing = this.el.find('.data-table-cell-editor-editor');
if (editing.length > 0) { if (editing.length > 0) {
@@ -1156,7 +1169,7 @@ my.DataExplorer = Backbone.View.extend({
my.QueryEditor = Backbone.View.extend({ my.QueryEditor = Backbone.View.extend({
className: 'recline-query-editor', className: 'recline-query-editor',
template: ' \ template: ' \
<form action="" method="GET"> \ <form action="" method="GET" class="form-inline"> \
<input type="text" name="q" value="{{q}}" class="text-query" /> \ <input type="text" name="q" value="{{q}}" class="text-query" /> \
<div class="pagination"> \ <div class="pagination"> \
<ul> \ <ul> \
@@ -1278,12 +1291,11 @@ my.notify = function(message, options) {
}, },
options); options);
var _template = ' \ var _template = ' \
<div class="alert-message {{category}} fade in" data-alert="alert"><a class="close" href="#">×</a> \ <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
<p>{{msg}} \ {{msg}} \
{{#loader}} \ {{#loader}} \
<img src="images/small-spinner.gif" class="notification-loader"> \ <img src="images/small-spinner.gif" class="notification-loader"> \
{{/loader}} \ {{/loader}} \
</p> \
</div>'; </div>';
var _templated = $.mustache(_template, tmplData); var _templated = $.mustache(_template, tmplData);
_templated = $(_templated).appendTo($('.data-explorer .alert-messages')); _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
@@ -1645,10 +1657,21 @@ this.recline.Backend = this.recline.Backend || {};
(function($, my) { (function($, my) {
// ## ElasticSearch Backend // ## ElasticSearch Backend
// //
// Connecting to [ElasticSearch](http://www.elasticsearch.org/) // Connecting to [ElasticSearch](http://www.elasticsearch.org/).
// //
// To use this backend ensure your Dataset has a elasticsearch_url, // To use this backend ensure your Dataset has one of the following
// webstore_url or url attribute (used in that order) // attributes (first one found is used):
//
// <pre>
// elasticsearch_url
// webstore_url
// url
// </pre>
//
// This should point to the ES type url. E.G. for ES running on
// localhost:9200 with index twitter and type tweet it would be
//
// <pre>http://localhost:9200/twitter/tweet</pre>
my.ElasticSearch = Backbone.Model.extend({ my.ElasticSearch = Backbone.Model.extend({
_getESUrl: function(dataset) { _getESUrl: function(dataset) {
var out = dataset.get('elasticsearch_url'); var out = dataset.get('elasticsearch_url');
@@ -1861,9 +1884,6 @@ this.recline.Backend = this.recline.Backend || {};
(function($, my) { (function($, my) {
// ## Memory Backend - uses in-memory data // ## Memory Backend - uses in-memory data
// //
// This is very artificial and is really only designed for testing
// purposes.
//
// To use it you should provide in your constructor data: // To use it you should provide in your constructor data:
// //
// * metadata (including fields array) // * metadata (including fields array)
@@ -1886,7 +1906,7 @@ this.recline.Backend = this.recline.Backend || {};
// ] // ]
// }); // });
// // later ... // // later ...
// var dataset = Dataset({id: 'my-id'}); // var dataset = Dataset({id: 'my-id'}, 'memory');
// dataset.fetch(); // dataset.fetch();
// etc ... // etc ...
// </pre> // </pre>

7
src/view.js
View File

@@ -181,7 +181,7 @@ my.DataExplorer = Backbone.View.extend({
my.QueryEditor = Backbone.View.extend({ my.QueryEditor = Backbone.View.extend({
className: 'recline-query-editor', className: 'recline-query-editor',
template: ' \ template: ' \
<form action="" method="GET"> \ <form action="" method="GET" class="form-inline"> \
<input type="text" name="q" value="{{q}}" class="text-query" /> \ <input type="text" name="q" value="{{q}}" class="text-query" /> \
<div class="pagination"> \ <div class="pagination"> \
<ul> \ <ul> \
@@ -303,12 +303,11 @@ my.notify = function(message, options) {
}, },
options); options);
var _template = ' \ var _template = ' \
<div class="alert-message {{category}} fade in" data-alert="alert"><a class="close" href="#">×</a> \ <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
<p>{{msg}} \ {{msg}} \
{{#loader}} \ {{#loader}} \
<img src="images/small-spinner.gif" class="notification-loader"> \ <img src="images/small-spinner.gif" class="notification-loader"> \
{{/loader}} \ {{/loader}} \
</p> \
</div>'; </div>';
var _templated = $.mustache(_template, tmplData); var _templated = $.mustache(_template, tmplData);
_templated = $(_templated).appendTo($('.data-explorer .alert-messages')); _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));

113
vendor/bootstrap/1.4.0/bootstrap-alerts.js vendored
View File

@@ -1,113 +0,0 @@
/* ==========================================================
* bootstrap-alerts.js v1.4.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ){
"use strict"
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* ALERT CLASS DEFINITION
* ====================== */
var Alert = function ( content, options ) {
this.settings = $.extend({}, $.fn.alert.defaults, options)
this.$element = $(content)
.delegate(this.settings.selector, 'click', this.close)
}
Alert.prototype = {
close: function (e) {
var $element = $(this).parent('.alert-message')
e && e.preventDefault()
$element.removeClass('in')
function removeElement () {
$element.remove()
}
$.support.transition && $element.hasClass('fade') ?
$element.bind(transitionEnd, removeElement) :
removeElement()
}
}
/* ALERT PLUGIN DEFINITION
* ======================= */
$.fn.alert = function ( options ) {
if ( options === true ) {
return this.data('alert')
}
return this.each(function () {
var $this = $(this)
if ( typeof options == 'string' ) {
return $this.data('alert')[options]()
}
$(this).data('alert', new Alert( this, options ))
})
}
$.fn.alert.defaults = {
selector: '.close'
}
$(document).ready(function () {
new Alert($('body'), {
selector: '.alert-message[data-alert] .close'
})
})
}( window.jQuery || window.ender );

2467
vendor/bootstrap/1.4.0/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

3365
vendor/bootstrap/2.0.0/bootstrap.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1722
vendor/bootstrap/2.0.0/bootstrap.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff