loader is background image of span

fix tests

app/assets/stylesheets/application.css.sass

@@ -1,5 +1,6 @@
 @import 'ui.css.sass'
 @import '_mixins.css.scss'
+@import 'new_styles/_spinner'
 
 /* ====== media ====== */
 .media
@@ -596,20 +597,6 @@ form.new_comment
       h4
         :font-weight bold
 
-#paginate, #infscr-loading
-  :display block
-
-  :margin
-    :top 10px
-
-  :padding 8px 0
-  :text-align center
-  :width 100%
-  img
-    :border none
-
-  :min-height 20px
-
 #photo_container
   :text
     :align center

app/assets/stylesheets/loader.css.scss

@@ -29,6 +29,5 @@
   fade-in 0.2s ease-in;
   -moz-animation: spin 1s infinite ease-in-out,
   fade-in 0.2s ease-in;
-
 }
 

app/assets/stylesheets/new-templates.css.scss

@@ -8,3 +8,4 @@
 
 /* profile */
 @import 'new_styles/canvas';
+@import 'new_styles/spinner';

app/assets/stylesheets/new_styles/_spinner.scss

@@ -0,0 +1,15 @@
+#paginate, #infscr-loading {
+  margin-top: 10px;
+  padding: 8px 0;
+  text-align: center;
+  width: 100%;
+  display: block;
+
+  .loader {
+    display: inline-block;
+    width : 14px;
+    height: 14px;
+    background-image : url(asset_path("static-loader.png", "image"))
+  }
+}
+

app/assets/templates/profile.jst.hbs

@@ -1,14 +1,11 @@
 <section id="profile_info">
     <h1>{{full_name}}</h1>
-    <div>
-        Gender: {{gender}}
-    </div>
-    <div>
-        Bio: {{bio}}
-    </div>
-    <div>
-        Birthday: {{birthday}}
-    </div>
+    <dl>
+        <dt>Location:</dt><dd>{{location}}</dd>
+        <dt>Bio:</dt><dd>{{bio}}</dd>
+        <dt>Birthday:</dt><dd>{{birthday}}</dd>
+        <dt>Gender:</dt><dd>{{gender}}</dd>
+    </dl>
 </section>
 
 <a href="/posts/new">COMPOSE</a>
@@ -16,3 +13,5 @@
 <section id="canvas">
 
 </section>
+
+<div id=paginate><span class="loader hidden"/></div>

app/views/aspects/_aspect_stream.haml

@@ -13,7 +13,7 @@
 #main_stream.stream
 
 #paginate
-  = image_tag "static-loader.png", :height => 14, :width => 14, :class => "loader hidden"
+  %span.loader.hidden
 
 - if current_user.contacts.size < 2
   = render 'aspects/no_contacts_message'

app/views/people/show.html.haml

@@ -34,4 +34,4 @@
           = t('.ignoring', :name => @person.first_name)
           
     #paginate
-      = image_tag "static-loader.png", :height => 14, :width => 14, :class => "loader hidden"
+      %span.loader.hidden

spec/javascripts/app/views/small_frame_view_spec.js

@@ -20,18 +20,18 @@ describe("app.views.SmallFrame", function(){
   })
 
   describe("textClass", function(){
-    it("returns and empty string with a post with text longer than 140 characters", function(){
-      expect(this.view.textClass()).toBe("")
+    it("returns and 'text extra-small' with a post with text longer than 140 characters", function(){
+      expect(this.view.textClass()).toBe("text extra-small")
     });
 
-    it("returns 'x2 height' if if it is less than 500 characters", function(){
+    it("returns 'text medium' if if it is less than 500 characters", function(){
       this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
         "dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
         "jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj "})
-      expect(this.view.textClass()).toBe("x2 height")
+      expect(this.view.textClass()).toBe("text medium")
     });
 
-    it("returns 'x2 width' if if it is more than 500 characters", function(){
+    it("returns 'text large' if if it is more than 500 characters", function(){
       this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
         "dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
         "jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj f;lkajs;dflkjasd;lfkja;sldkjf;alskdjfs" +
@@ -41,7 +41,7 @@ describe("app.views.SmallFrame", function(){
         "as;dlfk;alsdkjf;lkasdf;lkjasd;flkjasd;lfkjasdkl;" +
         "asl;dkfj;asldkfj;alsdkfj;alsdfjk" +
         "askdjf;laksdf;lkdflkjhasldfhoiawufjkhasugfoiwaufaw "})
-      expect(this.view.textClass()).toBe("x2 width")
+      expect(this.view.textClass()).toBe("text large")
     })
   })
 })