Visual changes to the spv.

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

@@ -5,7 +5,8 @@ app.views.SinglePostContent = app.views.Base.extend({
     "#single-post-actions" : "singlePostActionsView",
     '#real-post-content' : 'postContentView',
     ".oembed" : "oEmbedView",
-    ".opengraph" : "openGraphView"
+    ".opengraph" : "openGraphView",
+    ".status-message-location" : "postLocationStreamView"
   },
 
   initialize : function() {
@@ -15,6 +16,10 @@ app.views.SinglePostContent = app.views.Base.extend({
     this.postContentView = new app.views.StatusMessage({model: this.model});
   },
 
+  postLocationStreamView : function(){
+    return new app.views.LocationStream({ model : this.model});
+  },
+
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
       authorIsCurrentUser : this.authorIsCurrentUser(),

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

@@ -1,11 +1,26 @@
 #single-post-container
   padding-top: 20px
 #single-post-content
+  #head
+    color: #aaa
+    font-size: 12px
   #author
     .bd
       padding-left: 10px
   border-right: solid 1px #ccc
   padding-right: 10px
+  #body
+    margin-left: 20px
+    padding-top: 20px
+    .photo_attachments
+      padding-bottom: 10px
+      img
+        display: block
+        margin-left: auto
+        margin-right: auto
+        padding-bottom: 5px
+        max-width: 90%
+
 #single-post-interactions
   #likes, #reshares, #comments-meta
     padding-bottom: 5px
@@ -13,4 +28,14 @@
     border-bottom: solid 1px #ccc
     padding-top: 10px
     padding-bottom: 10px
+    p
+      margin: 0
+  textarea
+    width: 95%
+  a
+    color: #3f8fba
+  .timeago
+    color: #aaaaaa
+    text-decoration: none
+    font-size: smaller
 

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

@@ -3,20 +3,20 @@
     <time datetime="{{created_at}}" />
   </div>
   <div class='pull-right'>
-    <a href="#" rel="auth-required" class="label like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
+    <a href="#" rel="auth-required" class="like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
         {{#if userLike}}
             <i class="icon-heart icon-red"></i>
         {{else}}
-            <i class="icon-heart icon-white"></i>
+            <i class="icon-heart icon-grey"></i>
         {{/if}}
     </a>
 
     {{#if userCanReshare}}
-        <a href="#" rel="auth-required" class="label reshare" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
+        <a href="#" rel="auth-required" class="reshare" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
             {{#if userReshare}}
                 <i class="icon-retweet icon-blue"></i>
             {{else}}
-                <i class="icon-retweet icon-white"></i>
+                <i class="icon-retweet icon-grey"></i>
             {{/if}}
         </a>
     {{/if}}

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

@@ -1,9 +1,7 @@
 <div id='head' class='row-fluid'>
-  <div id='author' class='span6'>
+  <div id='author' class='span8'>
     <div class="img pull-left">
-        {{#linkToPerson author}}
+      {{{personImage author 'medium'}}}
-            <div class="profile-image-container small" style="background-image : url('{{avatar.small}}');" data-placement="right"></div>
-        {{/linkToPerson}}
     </div>
 
     <div class="bd">
@@ -22,12 +20,14 @@
 
       <div class='public-info'>
         {{#unless public}}
-          <i class="icon-lock"> </i>
+          <i class="icon-lock icon-grey"> </i>
         {{/unless}}
       </div>
+
+      <div class='status-message-location' />
     </div>
   </div>
-  <div id='single-post-actions' class='span6'>
+  <div id='single-post-actions' class='span4'>
   </div>
 </div>
 <div id='body' class='row-fluid'>

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

@@ -1,3 +1,4 @@
+{{#if reshareCount}}
   <div id='reshares'>
     <span class='label reshare'>
       <i class='icon-retweet icon-white'></i>
@@ -7,6 +8,8 @@
       {{{personImage author 'small' "micro"}}}
     {{/each}}
   </div>
+{{/if}}
+{{#if likesCount}}
   <div id='likes'>
     <span class='label like'>
       <i class='icon-heart icon-white'></i>
@@ -16,14 +19,14 @@
       {{{personImage author 'small' "micro"}}}
     {{/each}}
   </div>
+{{/if}}
+{{#if commentsCount}}
   <div id='comments-meta'>
     <span class='label comments'>
       <i class='icon-comment icon-white'></i>
       {{commentsCount}}
     </span>
-  {{#each comments}}
-    {{{personImage author 'small' "micro"}}}
-  {{/each}}
   </div>
+{{/if}}
 <div id='comments'>
 </div>