Merge pull request #4426 from Flaburgan/fix-padding-spv

[Ready to merge] fix padding between panels

Changelog.md

@@ -23,6 +23,7 @@ Read more in [#4249](https://github.com/diaspora/diaspora/pull/4249) and [#4883]
 * Port notifications and hovercards to Bootstrap [#4814](https://github.com/diaspora/diaspora/pull/4814)
 * Replace .rvmrc by .ruby-version and .ruby-gemset [#4854](https://github.com/diaspora/diaspora/pull/4855)
 * Reorder and reword items on user settings page [#4912](https://github.com/diaspora/diaspora/pull/4912)
+* SPV: Improve padding and interaction counts [#4426](https://github.com/diaspora/diaspora/pull/4426)
 
 ## Bug fixes
 * Improve time agos by updating the plugin [#4280](https://github.com/diaspora/diaspora/issues/4280)
@@ -372,7 +373,6 @@ Updated:
 * webmock 1.11.0 -> 1.13.0
 * xpath 0.1.4 -> 2.0.0
 
-
 # 0.1.1.0
 
 ## Refactor

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

@@ -3,6 +3,8 @@
 }
 
 #single-post-content {
+  border-right: solid 1px #cccccc;
+  padding-right: 12px;
   #head {
     padding-bottom: 10px;
     border-bottom: 1px solid $border-grey;
@@ -44,7 +46,7 @@
         display: block;
         font-size: 12px;
       }
-      .avatar { 
+      .avatar {
         height: 30px;
         width: 30px;
       }
@@ -80,9 +82,7 @@
       }
     }
   }
-  border-right: solid 1px #cccccc;
-  padding-right: 10px;
-
+  
   #body {
     margin-left: 20px;
     padding-top: 20px;
@@ -129,7 +129,8 @@
   position: relative;
   left: -1px;
   margin-left: 0;
-  padding-left: 2.5%;
+  padding-left: 15px;
+  
   .comments .comment {
     border-bottom: solid 1px #cccccc;
     padding-top: 10px;
@@ -164,18 +165,22 @@
     font-size: smaller;
   }
   .count {
-    width: 12.8%;
-    text-align: right;
     i {
       display: inline-block;
       text-align: center;
       width: 25px;
       vertical-align: middle;
     }
+    span {
+      margin-left: -3px;
+      width: 30px;
+      display: inline-block;
+      text-align: center;
+    }
   }
-  #reshares .count i { text-align: left; }
-  .persons {
-    margin-left: 5px;
+  #reshares, #likes, #comments-meta {
+    margin-left: 7px;
+    margin-bottom: 8px;
   }
 }
 

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

 {{#if resharesCount}}
-  <div class='row' id='reshares'>
-    <div class='span2 count'>
-      {{resharesCount}}
+  <div id='reshares'>
+    <span class="count">
       <i class='entypo retweet middle gray'></i>
-    </div>
-    <div class='span10 persons'>
+      <span>{{resharesCount}}</span>
+    </span>
+    <span>
       {{#each reshares}}
         {{#linkToPerson author}}
           {{{personImage this 'small' 'micro'}}}
         {{/linkToPerson}}
       {{/each}}
-    </div>
+    </span>
   </div>
 {{/if}}
 {{#if likesCount}}
-  <div class='row' id='likes'>
-    <div class='span2 count'>
-      {{likesCount}}
+  <div id='likes'>
+    <span class="count">
       <i class='entypo heart middle gray'></i>
-    </div>
-    <div class='span10 persons'>
+      <span>{{likesCount}}</span>
+    </span>
+    <span>
       {{#each likes}}
         {{#linkToPerson author}}
           {{{personImage this 'small' 'micro'}}}
         {{/linkToPerson}}
       {{/each}}
-    </div>
+    </span>
   </div>
 {{/if}}
 {{#if commentsCount}}
-  <div class='row' id='comments-meta'>
-    <div class='span2 count'>
-      {{commentsCount}}
+  <div id='comments-meta'>
+    <span class='count'>
       <i class='entypo comment middle gray'></i>
-    </div>
+      <span>{{commentsCount}}</span>
+    </span>
   </div>
 {{else}}
   <div class='no_comments'>