Improve hovercard style on Bootstrap pages

This commit is contained in:
Steffen van Bergerem 2014-03-28 14:00:16 +01:00
parent dfa41997df
commit 1fc38278bb
4 changed files with 17 additions and 9 deletions

View file

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

View file

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

View file

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

View file

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