Merge pull request #4754 from svbergerem/small-improvements-spv

SPV small improvements

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

 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

 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,31 +4,57 @@
 
 #single-post-content {
   #head {
-    color: #aaaaaa;
-    font-size: 12px;
-    #author {
-      .img {
-        max-width: 25%;
+    padding-bottom: 10px;
+    border-bottom: 1px solid $border-grey;
+    #post-info {
+      .author{ color: $grey; }
+      .info {
+        color: lighten($text-grey,10%);
+        font-size: 12px;
+        .post-time a { color: $grey; }
+        .post_scope { margin-right: 5px; }
+        .status-message-location { 
+          padding-top: 2px; 
+          line-height: 14px;
+        }
+      }
+      .avatar.medium {
+        max-width: 75px;
       }
-      .avatar {}
       .bd {
         padding-left: 10px;
-        .retweet {
-          i {
-            margin: 0 3px;
-          }
-        }
       }
     }
+    .reshare {
+      border-top: 1px solid lighten($border-grey,5%);
+      padding-top: 10px; 
+      margin-top: 10px; 
+    }
+    #reshare-info {
+      line-height: 15px;
+      i.retweet {
+        color: $text-dark-grey;
+        font-size: 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 {
-      .buttons {
-        position: relative;
-        top: 6px;
-        clear: right;
-      }
-      .public-info > i {
-        float: left;
-        margin: 2px 4px 0 0;
+      padding-right: 5px;
+      i {
+        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-actions_tpl.jst.hbs

 <div class='pull-right'>
-  <span class='public-info'>
-    {{#if public}}
-      <i class="entypo globe small"> </i>
-    {{else}}
-      <i class="entypo lock small"> </i>
-    {{/if}}
-  </span>
-  <span class="post-time">
-    <time datetime="{{created_at}}" title="{{localTime created_at}}" />
-  </span>
-  <div class="buttons pull-right">
     <a href="#" rel="auth-required" class="like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
         {{#if userLike}}
             <i class="entypo heart red large"></i>

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

 <div id='head' class='row-fluid'>
-  <div id='author' class='span8'>
-    <div class="img pull-left">
-      {{{personImage author 'medium'}}}
-    </div>
-
-    <div class="bd">
-      {{#linkToPerson author}}
-          {{name}}
-      {{/linkToPerson}}
+  <div class='row-fluid'>
+    <div id='post-info' class='span8'>
+      <div class="img pull-left">
+        {{#if root}}
+          {{{personImage root.author 'medium'}}}
+        {{else}}
+          {{{personImage author 'medium'}}}
+        {{/if}}
+      </div>
 
-      {{#if root}}
-      <span class="retweet">
-        <i class="icon-retweet"></i>
-          {{#linkToPerson root.author}}
+      <div class="bd">
+        <span class='author'>
+          {{#if root}}
+            {{#linkToPerson root.author}}
+              {{name}}
+            {{/linkToPerson}}
+          {{else}}
+            {{#linkToPerson author}}
+              {{name}}
+            {{/linkToPerson}}
+          {{/if}}
+        </span>
+            
+        <div class='info'>
+          {{#if public}}
+            <span class='post_scope' title="{{t "stream.public"}}">
+              <i class="entypo globe small"></i>
+            </span>
+          {{else}}
+            <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>
+  {{#if root}}
+    <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>
-      {{/if}}
-
-      <div class='status-message-location' />
+        </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>
-  </div>
-  <div id='single-post-actions' class='span4'>
-  </div>
+  {{/if}}
 </div>
-<hr />
 <div id='body' class='row-fluid'>
   <div id='real-post-content' class='span12'>
   </div>

config/locales/javascript/javascript.en.yml

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