Merge pull request #4880 from svbergerem/hovercard-bootstrap-style-fixes

Improve hovercard style on Bootstrap pages

app/assets/javascripts/app/views/hovercard_view.js

@@ -14,7 +14,7 @@ app.views.Hovercard = Backbone.View.extend({
     this.dropdown_container = this.$('#hovercard_dropdown_container');
     this.hashtags = this.$('.hashtags');
     this.person_link = this.$('a.person');
-    this.person_handle = this.$('p.handle');
+    this.person_handle = this.$('div.handle');
     this.active = true;
   },
 

app/assets/stylesheets/hovercard.css.scss

@@ -30,11 +30,11 @@
 
   $image_width: 80px; /* including margin */
 
-  & > h4, & > div, & > p {
+  & > h4, & > div {
     margin-left: $image_width;
   }
 
-  & > h4, & > div, & > p, .hashtags {
+  & > h4, & > div, .hashtags {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -59,8 +59,9 @@
     }
   }
 
-  p {
+  .handle {
     color: $text-grey;
+    line-height: 18px;
     padding-top: 0px;
     margin-top: 0px;
     margin-bottom: 5px;
@@ -78,7 +79,8 @@
     width: 100%;
     min-height: 19px;
 
-    font-size: smaller;
+    font-size: 10px;
+    line-height: 18px;
 
     border-top: 1px solid #cccccc;
 

app/assets/templates/header_tpl.jst.hbs

@@ -74,7 +74,7 @@
       <h4>
         <a class="person"></a>
       </h4>
-      <p class="handle"></p>
+      <div class="handle"></div>
       <div id="hovercard_dropdown_container"></div>
       <div class="hovercard_footer">
         <div class="footer_container">

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

@@ -3,9 +3,13 @@
     <div id='post-info' class='span8'>
       <div class="img pull-left">
         {{#if root}}
-          {{{personImage root.author 'medium'}}}
+          {{#linkToPerson root.author}}
+            {{{personImage this 'medium'}}}
+          {{/linkToPerson}}
         {{else}}
-          {{{personImage author 'medium'}}}
+          {{#linkToPerson author}}
+            {{{personImage this 'medium'}}}
+          {{/linkToPerson}}
         {{/if}}
       </div>
 
@@ -65,7 +69,9 @@
       <div class='span8' id='reshare-info'>
         <i class='entypo retweet small pull-left'></i>
         <div class="img pull-left">
-          {{{personImage author 'small'}}}
+          {{#linkToPerson author}}
+            {{{personImage this 'small'}}}
+          {{/linkToPerson}}
         </div>
         <span class="author">
           {{#linkToPerson author}}