restyle informational section in the new SPV

app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js

@@ -1,5 +1,6 @@
 app.views.SinglePostInteractions = app.views.Base.extend({
   templateName: "single-post-viewer/single-post-interactions",
+  tooltipSelector: ".avatar.micro",
 
   subviews: {
     '#comments': 'commentStreamView'

app/assets/stylesheets/entypo.css.scss

@@ -35,4 +35,8 @@
   &.large {
     font-size: 2.5em;
   }
+
+  &.middle {
+    font-size: 1.5em;
+  }
 }

app/assets/stylesheets/single-post-view.css.scss

@@ -92,10 +92,7 @@
   left: -1px;
   margin-left: 0;
   padding-left: 2.5%;
-  #likes, #reshares, #comments-meta {
-    padding-bottom: 5px;
-  }
-  .comment {
+  .comments .comment {
     border-bottom: solid 1px #cccccc;
     padding-top: 10px;
     padding-bottom: 10px;
@@ -117,6 +114,20 @@
     text-decoration: none;
     font-size: smaller;
   }
+  .count {
+    width: 12.8%;
+    text-align: right;
+    i {
+      display: inline-block;
+      text-align: center;
+      width: 25px;
+      vertical-align: middle;
+    }
+  }
+  #reshares .count i { text-align: left; }
+  .persons {
+    margin-left: 5px;
+  }
 }
 
 .comment {

app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs

@@ -1,31 +1,35 @@
 {{#if resharesCount}}
-  <div id='reshares'>
-    <span class='label reshare'>
-      <i class='icon-retweet icon-white'></i>
+  <div class='row' id='reshares'>
+    <div class='span2 count'>
       {{resharesCount}}
-    </span>
-    {{#each reshares}}
-      {{{personImage author 'small' "micro"}}}
-    {{/each}}
+      <i class='entypo retweet middle gray'></i>
+    </div>
+    <div class='span10 persons'>
+      {{#each reshares}}
+        {{{personImage author 'small' 'micro'}}}
+      {{/each}}
+    </div>
   </div>
 {{/if}}
 {{#if likesCount}}
-  <div id='likes'>
-    <span class='label like'>
-      <i class='icon-heart icon-white'></i>
+  <div class='row' id='likes'>
+    <div class='span2 count'>
       {{likesCount}}
-    </span>
-    {{#each likes}}
-      {{{personImage author 'small' "micro"}}}
-    {{/each}}
+      <i class='entypo heart middle gray'></i>
+    </div>
+    <div class='span10 persons'>
+      {{#each likes}}
+        {{{personImage author 'small' 'micro'}}}
+      {{/each}}
+    </div>
   </div>
 {{/if}}
 {{#if commentsCount}}
-  <div id='comments-meta'>
-    <span class='label comments'>
-      <i class='icon-comment icon-white'></i>
+  <div class='row' id='comments-meta'>
+    <div class='span2 count'>
       {{commentsCount}}
-    </span>
+      <i class='entypo comment middle gray'></i>
+    </div>
   </div>
 {{/if}}
 <div id='comments'>