nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

interaction buttons morph into reaction popup

Browse source
This commit is contained in:
danielgrippi 2012-02-22 14:44:13 -08:00
parent 8f4fed8c0e
commit 21d91f1b4c
3 changed files with 56 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
public/javascripts/app/templates/post-viewer/interactions.handlebars
View file

@ -3,80 +3,7 @@
<div id="post-info" style="display:none;">
<div id="post-info-container">
<div id="post-reactions">
<div class="well media">
<div class="img">
<i class="icon-heart icon-red"></i>
</div>
<div id="post-likes" class="bd">
{{#each likes}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
<div id="post-follows">
<div class="well media">
<div class="img">
<i class="icon-plus icon-green"></i>
</div>
<div id="post-likes" class="bd">
{{#each participations}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
</div>
<div id="post-reshares">
<div class="well media">
<div class="img">
<i class="icon-retweet icon-blue"></i>
</div>
<div id="post-likes" class="bd">
{{#each reshares}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
</div>
<div id="post-comments">
{{#each last_three_comments}}
<div class="post-comment media">
<div class="img">
<a href="/people/{{author.guid}}" class="author-name">
<img src="{{author.avatar.small}}" class="avatar smaller"/>
</a>
</div>
<div class="bd">
<div>
<a href="/people/{{author.guid}}" class="author-name">
{{author.name}}
</a>
</div>
<div class="comment-content">
{{text}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
<div id="post-reactions"> </div>
<div id="new-post-comment">
<div id="new-post-comment-container">

90
public/javascripts/app/templates/post-viewer/reactions.handlebars
View file

@ -1,51 +1,59 @@
<div class="well media">
<div class="img">
<i class="icon-heart icon-red"></i>
{{# if likes}}
<div id="post-likes">
<div class="well media">
<div class="img">
<i class="icon-heart icon-red"></i>
</div>
<div class="bd">
{{#each likes}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
</div>
<div id="post-likes" class="bd">
{{#each likes}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
{{/if}}
<div id="post-follows">
<div class="well media">
<div class="img">
<i class="icon-plus icon-green"></i>
</div>
<div id="post-likes" class="bd">
{{#each participations}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
{{# if participations}}
<div id="post-follows">
<div class="well media">
<div class="img">
<i class="icon-plus icon-green"></i>
</div>
<div class="bd">
{{#each participations}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
<div id="post-reshares">
<div class="well media">
<div class="img">
<i class="icon-retweet icon-blue"></i>
</div>
<div id="post-likes" class="bd">
{{#each reshares}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
{{# if reshares}}
<div id="post-reshares">
<div class="well media">
<div class="img">
<i class="icon-retweet icon-blue"></i>
</div>
<div class="bd">
{{#each reshares}}
{{#with author}}
<a href="/people/{{guid}}">
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
</a>
{{/with}}
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
<div id="post-comments">
{{#each last_three_comments}}

7
public/stylesheets/sass/new-templates.scss
View file

@ -314,13 +314,17 @@ $light-grey: #999;
}
#post-reactions {
max-height: 350px;
overflow: auto;
margin-top: 5px;
}
#post-info {
@include center(horizontal);
z-index: 20;
margin-top: -33px;
#post-info-container {
@include box-shadow(0, 6px, 20px, #000);
@include border-radius(3px, 0px);
@ -329,6 +333,8 @@ $light-grey: #999;
border-right: 1px solid #444;
border-left: 1px solid #444;
padding-top: 22px;
width: 420px;
background-color: #444;
background-image: url("../images/hatched-bg-dark.png");
@ -364,7 +370,6 @@ $light-grey: #999;
#post-comments {
text-align: left;
padding-top: 0;
max-height: 500px;
}
#new-post-comment {