From b8fb70d44e85c58c245cfe89870455d67732dd6c Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sat, 17 Aug 2013 20:35:15 +0200
Subject: [PATCH] Visual changes to the spv.

---
 .../single_post_content_view.js               |  7 ++-
 .../stylesheets/single-post-view.css.sass     | 25 ++++++++
 .../single-post-actions_tpl.jst.hbs           |  8 +--
 .../single-post-content_tpl.jst.hbs           | 12 ++--
 .../single-post-interactions_tpl.jst.hbs      | 57 ++++++++++---------
 5 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js
index c04d63dd7..913375f0a 100644
--- a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js
+++ b/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(),
diff --git a/app/assets/stylesheets/single-post-view.css.sass b/app/assets/stylesheets/single-post-view.css.sass
index 1559c251c..038b0c76f 100644
--- a/app/assets/stylesheets/single-post-view.css.sass
+++ b/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
 
diff --git a/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs
index cd4609447..6dd66978b 100644
--- a/app/assets/templates/single-post-viewer/single-post-actions_tpl.jst.hbs
+++ b/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}}
diff --git a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
index abf755b7e..7c1d8373e 100644
--- a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
+++ b/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}}
-            <div class="profile-image-container small" style="background-image : url('{{avatar.small}}');" data-placement="right"></div>
-        {{/linkToPerson}}
+      {{{personImage author 'medium'}}}
     </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'>
diff --git a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
index e31284151..c5b426855 100644
--- a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
+++ b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
@@ -1,29 +1,32 @@
-<div id='reshares'>
-  <span class='label reshare'>
-    <i class='icon-retweet icon-white'></i>
-    {{resharesCount}}
-  </span>
-  {{#each reshares}}
-    {{{personImage author 'small' "micro"}}}
-  {{/each}}
-</div>
-<div id='likes'>
-  <span class='label like'>
-    <i class='icon-heart icon-white'></i>
-    {{likesCount}}
-  </span>
-  {{#each likes}}
-    {{{personImage author 'small' "micro"}}}
-  {{/each}}
-</div>
-<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 reshareCount}}
+  <div id='reshares'>
+    <span class='label reshare'>
+      <i class='icon-retweet icon-white'></i>
+      {{resharesCount}}
+    </span>
+    {{#each reshares}}
+      {{{personImage author 'small' "micro"}}}
+    {{/each}}
+  </div>
+{{/if}}
+{{#if likesCount}}
+  <div id='likes'>
+    <span class='label like'>
+      <i class='icon-heart icon-white'></i>
+      {{likesCount}}
+    </span>
+    {{#each likes}}
+      {{{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>
+  </div>
+{{/if}}
 <div id='comments'>
 </div>