From c5be707be905c36ab9f9869f482f457a587087ec Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 15 May 2012 03:40:01 +0100
Subject: [PATCH 1/5] [theme,css][xs]: rather than override bootstrap buttons
 use our own css classes for front pages buttons.

---
 css/site.css | 32 ++++++++++++++++----------------
 index.html   |  4 ++--
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/css/site.css b/css/site.css
index c8260d09..c1a30f1d 100644
--- a/css/site.css
+++ b/css/site.css
@@ -41,7 +41,7 @@ a.dotted:hover {
 	text-decoration:none;
 }
 
-.btn-info {
+.btn-explorer {
   background: #545454; /* Old browsers */
 	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+ */
@@ -60,17 +60,17 @@ a.dotted:hover {
 	color:#FFF;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-.btn-info:hover,
-.btn-info:active,
-.btn-info.active,
-.btn-info.disabled,
-.btn-info[disabled] {
+.btn-explorer:hover,
+.btn-explorer:active,
+.btn-explorer.active,
+.btn-explorer.disabled,
+.btn-explorer[disabled] {
   background-color: #454545;
 	background-image:none;
 	color:#FFF;
 }
-.btn-info:active,
-.btn-info.active {
+.btn-explorer:active,
+.btn-explorer.active {
 	background-color: #454545 \9;
 	background-image:none;
 	color:#FFF;
@@ -84,7 +84,7 @@ a.dotted:hover {
 	margin-right:10px;
 }
 
-.btn-primary {
+.btn-library {
   background: #c7231d; /* Old browsers */
 	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+ */
@@ -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);
   filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary.active,
-.btn-primary.disabled,
-.btn-primary[disabled] {
+.btn-library:hover,
+.btn-library:active,
+.btn-library.active,
+.btn-library.disabled,
+.btn-library[disabled] {
   background-color: #bc130e;
 	background-image:none;
 }
-.btn-primary:active,
-.btn-primary.active {
+.btn-library:active,
+.btn-library.active {
   background-color: #bc130e \9;
 }
 
diff --git a/index.html b/index.html
index b7d55bba..141786cc 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@ title: Home
           &mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a>
         </div>
         <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-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-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-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>

From 5e7f9dd0b72e18d722b0eab6619370af1f5a88b3 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 15 May 2012 03:43:30 +0100
Subject: [PATCH 2/5] [theme,refactor,css][xs]: move site css into css/site
 directory from css/.

---
 _layouts/default.html                   |   4 ++--
 css/{ => site}/images/header-screen.png | Bin
 css/{ => site}/images/icons/white.png   | Bin
 css/{ => site}/images/zigzags.png       | Bin
 css/{ => site}/pygments.css             |   0
 css/{ => site}/site.css                 |   0
 6 files changed, 2 insertions(+), 2 deletions(-)
 rename css/{ => site}/images/header-screen.png (100%)
 rename css/{ => site}/images/icons/white.png (100%)
 rename css/{ => site}/images/zigzags.png (100%)
 rename css/{ => site}/pygments.css (100%)
 rename css/{ => site}/site.css (100%)

diff --git a/_layouts/default.html b/_layouts/default.html
index 53d619d7..e251d0d0 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -17,8 +17,8 @@
 
   <!-- 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.css" rel="stylesheet" type="text/css" />
+  <link href="css/site/pygments.css" rel="stylesheet" type="text/css" />
+  <link href="css/site/site.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div class="navbar navbar-fixed-top">
diff --git a/css/images/header-screen.png b/css/site/images/header-screen.png
similarity index 100%
rename from css/images/header-screen.png
rename to css/site/images/header-screen.png
diff --git a/css/images/icons/white.png b/css/site/images/icons/white.png
similarity index 100%
rename from css/images/icons/white.png
rename to css/site/images/icons/white.png
diff --git a/css/images/zigzags.png b/css/site/images/zigzags.png
similarity index 100%
rename from css/images/zigzags.png
rename to css/site/images/zigzags.png
diff --git a/css/pygments.css b/css/site/pygments.css
similarity index 100%
rename from css/pygments.css
rename to css/site/pygments.css
diff --git a/css/site.css b/css/site/site.css
similarity index 100%
rename from css/site.css
rename to css/site/site.css

From deffe17b5eae5c0d24019facf53a928b2ddec713 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 15 May 2012 03:49:14 +0100
Subject: [PATCH 3/5] [app,css][xs]: use site.css to be consistent between docs
 and app (+ remove documentation link from app).

---
 app/index.html     | 4 +---
 app/style/demo.css | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/index.html b/app/index.html
index 48df1faf..2caffb44 100644
--- a/app/index.html
+++ b/app/index.html
@@ -24,6 +24,7 @@
   <!-- /Recline CSS components -->
 
   <!-- 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="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
@@ -66,9 +67,6 @@
     <div class="navbar-inner">
       <div class="container-fluid">
         <a class="brand" href="../">Recline Data Explorer</a>
-        <ul class="nav">
-          <li><a href="../#docs">Documentation</a></li>
-        </ul>
         <ul class="nav pull-right">
           <li class="dropdown">
             <a data-toggle="dropdown" class="dropdown-toggle">
diff --git a/app/style/demo.css b/app/style/demo.css
index a9023e24..95e8c682 100644
--- a/app/style/demo.css
+++ b/app/style/demo.css
@@ -2,6 +2,10 @@ body {
   padding-top: 60px;
 }
 
+.navbar .brand {
+  line-height: 32px;
+}
+
 /* we do not have a LH sidebar */
 .container-fluid > .content {
   margin-left: 0;

From 0cbae97202ffbfc4b2f1305426a5aba52f032ee0 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 15 May 2012 03:52:27 +0100
Subject: [PATCH 4/5] [app/content][xs]: brand links to start of app not
 reclinejs home page.

---
 app/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/index.html b/app/index.html
index 2caffb44..9fe1ae93 100644
--- a/app/index.html
+++ b/app/index.html
@@ -66,7 +66,7 @@
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container-fluid">
-        <a class="brand" href="../">Recline Data Explorer</a>
+        <a class="brand" href="#">Recline Data Explorer</a>
         <ul class="nav pull-right">
           <li class="dropdown">
             <a data-toggle="dropdown" class="dropdown-toggle">

From 57548e0d173322c8e56ed32ef2b32549a58c02d7 Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Tue, 15 May 2012 04:42:12 +0100
Subject: [PATCH 5/5] [#82,notifications][s]: less obtrusive notifications -
 fixes #82.

* switch loading notification to overlay and make it persist until loading complete (then fade)
* get rid of query success notification
---
 css/data-explorer.css | 33 +++++++++++++++++++++++++++++----
 src/view.js           | 31 +++++++++++++++++++------------
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/css/data-explorer.css b/css/data-explorer.css
index 635050bf..d1a6a94f 100644
--- a/css/data-explorer.css
+++ b/css/data-explorer.css
@@ -1,3 +1,8 @@
+.recline-data-explorer .data-view-container {
+  display: block;
+  clear: both;
+}
+
 .recline-data-explorer .header .navigation,
 .recline-data-explorer .header .navigation li,
 .recline-data-explorer .header .pagination,
@@ -25,6 +30,10 @@
   display: inline;
 }
 
+/**********************************************************
+  * Query Editor
+  *********************************************************/
+
 .header .recline-query-editor {
   float: right;
   height: 30px;
@@ -64,10 +73,9 @@
   vertical-align: top;
 }
 
-.recline-data-explorer .data-view-container {
-  display: block;
-  clear: both;
-}
+/**********************************************************
+  * Query Editor
+  *********************************************************/
 
 .recline-filter-editor .filter-term .input-append a {
   margin-left: -5px;
@@ -88,3 +96,20 @@
   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;
+}
+
diff --git a/src/view.js b/src/view.js
index ed3edfce..ada96afb 100644
--- a/src/view.js
+++ b/src/view.js
@@ -222,12 +222,11 @@ my.DataExplorer = Backbone.View.extend({
     }
 
     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() {
         self.clearNotifications();
         self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
-        self.notify({message: 'Data loaded', category: 'success'});
       });
     this.model.bind('query:fail', function(error) {
         self.clearNotifications();
@@ -392,19 +391,25 @@ my.DataExplorer = Backbone.View.extend({
   // * loader: if true show loading spinner
   notify: function(flash) {
     var tmplData = _.extend({
-      message: '',
-      category: 'warning'
+      message: 'Loading',
+      category: 'warning',
+      loader: false
       },
       flash
     );
-    var _template = ' \
-      <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
-        {{message}} \
-          {{#loader}} \
+    if (tmplData.loader) {
+      var _template = ' \
+        <div class="alert alert-info alert-loader"> \
+          {{message}} \
           <span class="notification-loader">&nbsp;</span> \
-          {{/loader}} \
-      </div>';
-    var _templated = $.mustache(_template, tmplData); 
+        </div>';
+    } else {
+      var _template = ' \
+        <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
+          {{message}} \
+        </div>';
+    }
+    var _templated = $($.mustache(_template, tmplData));
     _templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
     if (!flash.persist) {
       setTimeout(function() {
@@ -420,7 +425,9 @@ my.DataExplorer = Backbone.View.extend({
   // Clear all existing notifications
   clearNotifications: function() {
     var $notifications = $('.recline-data-explorer .alert-messages .alert');
-    $notifications.remove();
+    $notifications.fadeOut(1500, function() {
+      $(this).remove();
+    });
   }
 });