improve reshared posts

Changelog.md

@@ -3,6 +3,7 @@
 ## Refactor
 * Drop number of followers from tags page [#4717](https://github.com/diaspora/diaspora/issues/4717)
 * Remove some unused beta code [#4738](https://github.com/diaspora/diaspora/issues/4738)
+* Style improvements for SPV, use original author's avatar for reshares [#4754](https://github.com/diaspora/diaspora/issue/4754)
 
 ## Bug fixes
 * Improve time agos by updating the plugin [#4280](https://github.com/diaspora/diaspora/issues/4280)

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

@@ -1,6 +1,5 @@
 app.views.SinglePostActions = app.views.Feedback.extend({
   templateName: "single-post-viewer/single-post-actions",
-  tooltipSelector: "time",
 
   events: function() {
     return _.defaults({

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

@@ -1,5 +1,6 @@
 app.views.SinglePostContent = app.views.Base.extend({
   templateName: 'single-post-viewer/single-post-content',
+  tooltipSelector: "time, .post_scope",
 
   subviews : {
     "#single-post-actions" : "singlePostActionsView",

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

@@ -4,14 +4,15 @@
 
 #single-post-content {
   #head {
-    padding-bottom: 5px;
+    padding-bottom: 10px;
     border-bottom: 1px solid $border-grey;
     #post-info {
+      .author{ color: $grey; }
       .info {
-        color: $text-grey;
+        color: lighten($text-grey,10%);
         font-size: 12px;
-        .post-time { color: $grey; }
+        .post-time a { color: $grey; }
-        i { margin-right: 5px; }
+        .post_scope { margin-right: 5px; }
         .status-message-location { 
           padding-top: 2px; 
           line-height: 14px;
@@ -23,25 +24,38 @@
       .bd {
         padding-left: 10px;
       }
-      .retweet {
+    }
-        color: $grey;
+    .reshare {
-        line-height: 14px;
+      border-top: 1px solid lighten($border-grey,5%);
-        padding-top: 2px; 
+      padding-top: 10px; 
-        i { 
+      margin-top: 10px; 
-          font-size: 28px;
+    }
-          line-height: 28px;
+    #reshare-info {
-        }
+      line-height: 15px;
-        .post-time { display: block; }
+      i.retweet {
-        .avatar { 
+        color: $text-dark-grey;
-          height: 28px;
+        font-size: 28px;
-          width: 28px;
+        line-height: 30px;
-        }
+        margin-left: 8px;
+        margin-right: 8px;
       }
+      .post-time a {
+        color: $grey;
+        display: block;
+        font-size: 12px;
+      }
+      .avatar { 
+        height: 30px;
+        width: 30px;
+      }
+      .img { margin-right: 10px; }
     }
     #single-post-actions {
-      color: $text-grey;
+      padding-right: 5px;
-      font-size: 12px;
+      i {
-      i { line-height: 50px; }
+        font-size: 28px;
+        line-height: 30px;
+      }
       i.comment:hover {
         color: #424242;
       }

app/assets/templates/feedback_tpl.jst.hbs

@@ -7,7 +7,7 @@
 
   {{#if provider_display_name}}
     <strong>
-      via {{provider_display_name}}
+      {{t "stream.via" provider=provider_display_name}}
     </strong>
   {{/if}}
   –

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

@@ -1,70 +1,86 @@
 <div id='head' class='row-fluid'>
-  <div id='post-info' class='span8'>
+  <div class='row-fluid'>
-    <div class="img pull-left">
+    <div id='post-info' class='span8'>
-      {{#if root}}
+      <div class="img pull-left">
-        {{{personImage root.author 'medium'}}}
+        {{#if root}}
-      {{else}}
+          {{{personImage root.author 'medium'}}}
-        {{{personImage author 'medium'}}}
+        {{else}}
-      {{/if}}
+          {{{personImage author 'medium'}}}
-    </div>
+        {{/if}}
+      </div>
 
-    <div class="bd">
+      <div class="bd">
-      <span class='author'>
+        <span class='author'>
-        {{#if root}}
-          {{#linkToPerson root.author}}
-            {{name}}
-          {{/linkToPerson}}
-        {{else}}
-          {{#linkToPerson author}}
-            {{name}}
-          {{/linkToPerson}}
-        {{/if}}
-      </span>
-          
-      <div class='info'>
-        <span class='post_scope'>
-          {{#if public}}
-            <i class="entypo globe small" data-original-title="{{t "stream.public"}}"></i>
-          {{else}}
-            <i class="entypo lock small" data-original-title="{{t "stream.limited"}}"></i>
-          {{/if}}
-        </span>
-        <span class="post-time">
           {{#if root}}
-            <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
+            {{#linkToPerson root.author}}
+              {{name}}
+            {{/linkToPerson}}
           {{else}}
-            <time datetime="{{created_at}}" title="{{localTime created_at}}" />
-          {{/if}}
-        </span>
-        {{#if root}}
-          {{#if root.provider_display_name}}
-            via {{root.provider_display_name}}
-          {{/if}}
-        {{else}}
-          {{#if provider_display_name}}
-            via {{provider_display_name}}
-          {{/if}}
-        {{/if}}
-        <div class='status-message-location' />
-        {{#if root}}
-          <div class='retweet'>
-            <i class='entypo retweet small pull-left'></i>
-            <div class="img pull-left">
-              {{{personImage author 'small'}}}
-            </div>
             {{#linkToPerson author}}
               {{name}}
             {{/linkToPerson}}
-            <span class="post-time">
+          {{/if}}
-              <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+        </span>
+            
+        <div class='info'>
+          {{#if public}}
+            <span class='post_scope' title="{{t "stream.public"}}">
+              <i class="entypo globe small"></i>
             </span>
-          </div>
+          {{else}}
-        {{/if}}
+            <span class='post_scope' title="{{t "stream.limited"}}">
+              <i class="entypo lock small"></i>
+            </span>
+          {{/if}}
+          <span class="post-time">
+            {{#if root}}
+              <a href="/posts/{{root.id}}">
+                <time datetime="{{root.created_at}}" title="{{localTime root.created_at}}" />
+              </a>
+            {{else}}
+              <a href="/posts/{{id}}">
+                <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+              </a>
+            {{/if}}
+          </span>
+          {{#if root}}
+            {{#if root.provider_display_name}}
+              {{t "stream.via" provider=root.provider_display_name}}
+            {{/if}}
+          {{else}}
+            {{#if provider_display_name}}
+              {{t "stream.via" provider=provider_display_name}}
+            {{/if}}
+          {{/if}}
+          <div class='status-message-location' />
+        </div>
       </div>
     </div>
+    {{#unless root}}
+      <div id='single-post-actions' class='span4' />
+    {{/unless}}
   </div>
-  <div id='single-post-actions' class='span4'>
+  {{#if root}}
-  </div>
+    <div class='row-fluid reshare'>
+      <div class='pull-left' id='reshare-info'>
+        <i class='entypo retweet small pull-left'></i>
+        <div class="img pull-left">
+          {{{personImage author 'small'}}}
+        </div>
+        <span class="author">
+          {{#linkToPerson author}}
+            {{name}}
+          {{/linkToPerson}}
+        </span>
+        <span class="post-time">
+          <a href="/posts/{{id}}">
+            <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+          </a>
+        </span>
+      </div>
+      <div id='single-post-actions' class='pull-right' />
+    </div>
+  {{/if}}
 </div>
 <div id='body' class='row-fluid'>
   <div id='real-post-content' class='span12'>

config/locales/javascript/javascript.en.yml

@@ -111,6 +111,7 @@ en:
       hide_nsfw_posts: "Hide #nsfw posts"
       follow: "Follow"
       unfollow: "Unfollow"
+      via: "via <%= provider %>"
 
       likes:
         zero: "<%= count %> Likes"