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" style="display:none;">
<div id="post-info-container"> <div id="post-info-container">
<div id="post-reactions"> <div id="post-reactions"> </div>
<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="new-post-comment"> <div id="new-post-comment">
<div id="new-post-comment-container"> <div id="new-post-comment-container">

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

@ -1,8 +1,10 @@
<div class="well media"> {{# if likes}}
<div id="post-likes">
<div class="well media">
<div class="img"> <div class="img">
<i class="icon-heart icon-red"></i> <i class="icon-heart icon-red"></i>
</div> </div>
<div id="post-likes" class="bd"> <div class="bd">
{{#each likes}} {{#each likes}}
{{#with author}} {{#with author}}
<a href="/people/{{guid}}"> <a href="/people/{{guid}}">
@ -11,14 +13,17 @@
{{/with}} {{/with}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div>
{{/if}}
<div id="post-follows"> {{# if participations}}
<div id="post-follows">
<div class="well media"> <div class="well media">
<div class="img"> <div class="img">
<i class="icon-plus icon-green"></i> <i class="icon-plus icon-green"></i>
</div> </div>
<div id="post-likes" class="bd"> <div class="bd">
{{#each participations}} {{#each participations}}
{{#with author}} {{#with author}}
<a href="/people/{{guid}}"> <a href="/people/{{guid}}">
@ -28,14 +33,16 @@
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div> </div>
{{/if}}
<div id="post-reshares"> {{# if reshares}}
<div id="post-reshares">
<div class="well media"> <div class="well media">
<div class="img"> <div class="img">
<i class="icon-retweet icon-blue"></i> <i class="icon-retweet icon-blue"></i>
</div> </div>
<div id="post-likes" class="bd"> <div class="bd">
{{#each reshares}} {{#each reshares}}
{{#with author}} {{#with author}}
<a href="/people/{{guid}}"> <a href="/people/{{guid}}">
@ -45,7 +52,8 @@
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div> </div>
{{/if}}
<div id="post-comments"> <div id="post-comments">
{{#each last_three_comments}} {{#each last_three_comments}}

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

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