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

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Rufus Pollock
2012-05-15 04:43:23 +01:00
parent c96bf9f902 57548e0d17
commit b43d07d622
11 changed files with 74 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_layouts/default.html
View File

@@ -17,8 +17,8 @@
<!-- link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" --> <!-- link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" -->
<link href="css/pygments.css" rel="stylesheet" type="text/css" /> <link href="css/site/pygments.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" /> <link href="css/site/site.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">

6
app/index.html
View File

@@ -24,6 +24,7 @@
<!-- /Recline CSS components --> <!-- /Recline CSS components -->
<!-- Custom CSS for the Data Explorer Online App --> <!-- Custom CSS for the Data Explorer Online App -->
<link rel="stylesheet" href="../css/site/site.css">
<link rel="stylesheet" href="style/demo.css"> <link rel="stylesheet" href="style/demo.css">
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css"> <link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
@@ -65,10 +66,7 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-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">
<li><a href="../#docs">Documentation</a></li>
</ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li class="dropdown"> <li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle"> <a data-toggle="dropdown" class="dropdown-toggle">

4
app/style/demo.css
View File

@@ -2,6 +2,10 @@ body {
padding-top: 60px; padding-top: 60px;
} }
.navbar .brand {
line-height: 32px;
}
/* we do not have a LH sidebar */ /* we do not have a LH sidebar */
.container-fluid > .content { .container-fluid > .content {
margin-left: 0; margin-left: 0;

33
css/data-explorer.css
View File

@@ -1,3 +1,8 @@
.recline-data-explorer .data-view-container {
display: block;
clear: both;
}
.recline-data-explorer .header .navigation, .recline-data-explorer .header .navigation,
.recline-data-explorer .header .navigation li, .recline-data-explorer .header .navigation li,
.recline-data-explorer .header .pagination, .recline-data-explorer .header .pagination,
@@ -25,6 +30,10 @@
display: inline; display: inline;
} }
/**********************************************************
* Query Editor
*********************************************************/
.header .recline-query-editor { .header .recline-query-editor {
float: right; float: right;
height: 30px; height: 30px;
@@ -64,10 +73,9 @@
vertical-align: top; vertical-align: top;
} }
.recline-data-explorer .data-view-container { /**********************************************************
display: block; * Query Editor
clear: both; *********************************************************/
}
.recline-filter-editor .filter-term .input-append a { .recline-filter-editor .filter-term .input-append a {
margin-left: -5px; margin-left: -5px;
@@ -88,3 +96,20 @@
display: inline-block; display: inline-block;
} }
.recline-data-explorer .alert-loader {
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
z-index: 10000;
padding: 40px 0px 40px 0px;
margin-top: -10px;
text-align: center;
font-size: 16px;
font-weight: bold;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-top: none;
}

0
css/images/header-screen.png → css/site/images/header-screen.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 114 KiB

0
css/images/icons/white.png → css/site/images/icons/white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
css/images/zigzags.png → css/site/images/zigzags.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
css/pygments.css → css/site/pygments.css
View File

32
css/site.css → css/site/site.css
View File

@@ -41,7 +41,7 @@ a.dotted:hover {
text-decoration:none; text-decoration:none;
} }
.btn-info { .btn-explorer {
background: #545454; /* Old browsers */ background: #545454; /* Old browsers */
background: -moz-linear-gradient(top, #545454 0%, #454545 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #545454 0%, #454545 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(100%,#454545)); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(100%,#454545)); /* Chrome,Safari4+ */
@@ -60,17 +60,17 @@ a.dotted:hover {
color:#FFF; color:#FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
.btn-info:hover, .btn-explorer:hover,
.btn-info:active, .btn-explorer:active,
.btn-info.active, .btn-explorer.active,
.btn-info.disabled, .btn-explorer.disabled,
.btn-info[disabled] { .btn-explorer[disabled] {
background-color: #454545; background-color: #454545;
background-image:none; background-image:none;
color:#FFF; color:#FFF;
} }
.btn-info:active, .btn-explorer:active,
.btn-info.active { .btn-explorer.active {
background-color: #454545 \9; background-color: #454545 \9;
background-image:none; background-image:none;
color:#FFF; color:#FFF;
@@ -84,7 +84,7 @@ a.dotted:hover {
margin-right:10px; margin-right:10px;
} }
.btn-primary { .btn-library {
background: #c7231d; /* Old browsers */ background: #c7231d; /* Old browsers */
background: -moz-linear-gradient(top, #c7231d 0%, #bc130e 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #c7231d 0%, #bc130e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7231d), color-stop(100%,#bc130e)); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7231d), color-stop(100%,#bc130e)); /* Chrome,Safari4+ */
@@ -97,16 +97,16 @@ a.dotted:hover {
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false); filter: progid:dximagetransform.microsoft.gradient(enabled=false);
} }
.btn-primary:hover, .btn-library:hover,
.btn-primary:active, .btn-library:active,
.btn-primary.active, .btn-library.active,
.btn-primary.disabled, .btn-library.disabled,
.btn-primary[disabled] { .btn-library[disabled] {
background-color: #bc130e; background-color: #bc130e;
background-image:none; background-image:none;
} }
.btn-primary:active, .btn-library:active,
.btn-primary.active { .btn-library.active {
background-color: #bc130e \9; background-color: #bc130e \9;
} }

4
index.html
View File

@@ -18,8 +18,8 @@ title: Home
&mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a> &mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a>
</div> </div>
<div class="inner"> <div class="inner">
<a class="btn btn-large btn-info showtitle" href="app/" title="the data explorer"><i class="icon-graph icon-white icon-large"></i>Use the Explorer</a> <a class="btn btn-large btn-explorer showtitle" href="app/" title="the data explorer"><i class="icon-graph icon-white icon-large"></i>Use the Explorer</a>
<a class="btn btn-large btn-primary showtitle" href="library.html" title="the data library"><i class="icon-arrow-down icon-white icon-large"></i>Use the Library</a> <a class="btn btn-large btn-library showtitle" href="library.html" title="the data library"><i class="icon-arrow-down icon-white icon-large"></i>Use the Library</a>
</div> </div>
</div> </div>
</div> </div>

25
src/view.js
View File

@@ -222,12 +222,11 @@ my.DataExplorer = Backbone.View.extend({
} }
this.model.bind('query:start', function() { this.model.bind('query:start', function() {
self.notify({message: 'Loading data', loader: true}); self.notify({loader: true, persist: true});
}); });
this.model.bind('query:done', function() { this.model.bind('query:done', function() {
self.clearNotifications(); self.clearNotifications();
self.el.find('.doc-count').text(self.model.docCount || 'Unknown'); self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
self.notify({message: 'Data loaded', category: 'success'});
}); });
this.model.bind('query:fail', function(error) { this.model.bind('query:fail', function(error) {
self.clearNotifications(); self.clearNotifications();
@@ -392,19 +391,25 @@ my.DataExplorer = Backbone.View.extend({
// * loader: if true show loading spinner // * loader: if true show loading spinner
notify: function(flash) { notify: function(flash) {
var tmplData = _.extend({ var tmplData = _.extend({
message: '', message: 'Loading',
category: 'warning' category: 'warning',
loader: false
}, },
flash flash
); );
if (tmplData.loader) {
var _template = ' \
<div class="alert alert-info alert-loader"> \
{{message}} \
<span class="notification-loader">&nbsp;</span> \
</div>';
} else {
var _template = ' \ var _template = ' \
<div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \ <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
{{message}} \ {{message}} \
{{#loader}} \
<span class="notification-loader">&nbsp;</span> \
{{/loader}} \
</div>'; </div>';
var _templated = $.mustache(_template, tmplData); }
var _templated = $($.mustache(_template, tmplData));
_templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages')); _templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
if (!flash.persist) { if (!flash.persist) {
setTimeout(function() { setTimeout(function() {
@@ -420,7 +425,9 @@ my.DataExplorer = Backbone.View.extend({
// Clear all existing notifications // Clear all existing notifications
clearNotifications: function() { clearNotifications: function() {
var $notifications = $('.recline-data-explorer .alert-messages .alert'); var $notifications = $('.recline-data-explorer .alert-messages .alert');
$notifications.remove(); $notifications.fadeOut(1500, function() {
$(this).remove();
});
} }
}); });