From 828624f392adfb7667646e23a0567b06a81c8e2f Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Sun, 18 Dec 2011 12:49:39 -0800
Subject: [PATCH] slightly fade in stream elements; made a better spinner for
 the stream (css3)

---
 app/views/layouts/application.html.haml       |  20 ++++++++++++++++++
 public/images/static-loader.png               | Bin 0 -> 301 bytes
 .../app/views/stream_object_view.js           |   3 +++
 public/javascripts/app/views/stream_view.js   |   5 +++--
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 public/images/static-loader.png

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index d164220ee..41c04bf72 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -17,6 +17,26 @@
     %link{:rel => 'shortcut icon', :href => '/favicon.png'}
     %link{:rel => 'apple-touch-icon', :href => '/apple-touch-icon.png'}
 
+    :css
+      @-webkit-keyframes fade-in {
+        0%   { opacity: 0; }
+        100% { opacity: 1; }
+      }
+
+      @-webkit-keyframes spin {
+        0%   { -webkit-transform: rotate(0deg); }
+        100% { -webkit-transform: rotate(360deg); }
+      }
+
+      .loaded {
+        -webkit-animation: fade-in 0.16s linear;
+      }
+
+      .loader {
+        -webkit-animation: spin 1s infinite ease-in-out,
+                           fade-in 0.2s ease-in;
+      }
+
     / Social Media Icons are by Paul Robert Lloyd @ http://paulrobertlloyd.com/2009/06/social_media_icons
 
     / bootstrap/blueprint switch
diff --git a/public/images/static-loader.png b/public/images/static-loader.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0dfc4075bed48543c55b5322003a27a43b93279
GIT binary patch
literal 301
zcmV+|0n+}7P)<h;3K|Lk000e1NJLTq000gE000gM0ssI2kSe-{0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUy&q+i<RCwBqk|7d=FbqWtgFqrHk;s)C
zfny*!R*!&0Rw7p-k(HG=_R;KgI<U<0O-cIm)BKR_`>q1K_tx5FS+;GHjMn-UP?qI5
zj+szxfck~1s;EJtNO@%2wyo=$59i!Fzz1+!tm`T~O8dU2mxxh7#sx?wpXXWhQl7vV
z6M2U!kKmy1i3f&ZNW(l1tNtNZkMX6ZZ@Q&6O~b)((fL~{1IenG_sYh~*znlaG)>X6
z>k4oNADR2uR@ZgJECOxHPQuZ|?BVZ1_z_?Lp+SeGW!;7A00000NkvXXu0mjftzU-(

literal 0
HcmV?d00001

diff --git a/public/javascripts/app/views/stream_object_view.js b/public/javascripts/app/views/stream_object_view.js
index c8ec672bf..2d1a0575f 100644
--- a/public/javascripts/app/views/stream_object_view.js
+++ b/public/javascripts/app/views/stream_object_view.js
@@ -1,4 +1,7 @@
 App.Views.StreamObject = Backbone.View.extend({
+
+  className : "loaded",
+
   initialize: function(options) {
     this.model.bind('remove', this.remove, this);
     this.model.bind('change', this.render, this);
diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js
index bb072ca70..7217056a8 100644
--- a/public/javascripts/app/views/stream_view.js
+++ b/public/javascripts/app/views/stream_view.js
@@ -26,7 +26,7 @@ App.Views.Stream = Backbone.View.extend({
       href: this.collection.url(),
       id: "paginate",
       "class": "paginate"
-    }).text('more'));
+    }).text('Load more posts'));
   },
 
   loadMore: function(evt) {
@@ -42,7 +42,8 @@ App.Views.Stream = Backbone.View.extend({
 
   addLoader: function(){
     this.$("#paginate").html($("<img>", {
-      src : "/images/ajax-loader.gif"
+      src : "/images/static-loader.png",
+      "class" : 'loader'
     }));
   }
 });