From 21d91f1b4ca740cf6c90c187da2db5935c7a1b95 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Wed, 22 Feb 2012 14:44:13 -0800
Subject: [PATCH] interaction buttons morph into reaction popup

---
 .../post-viewer/interactions.handlebars       | 75 +---------------
 .../post-viewer/reactions.handlebars          | 90 ++++++++++---------
 public/stylesheets/sass/new-templates.scss    |  7 +-
 3 files changed, 56 insertions(+), 116 deletions(-)

diff --git a/public/javascripts/app/templates/post-viewer/interactions.handlebars b/public/javascripts/app/templates/post-viewer/interactions.handlebars
index 8bfc0ef3c..b183ac42f 100644
--- a/public/javascripts/app/templates/post-viewer/interactions.handlebars
+++ b/public/javascripts/app/templates/post-viewer/interactions.handlebars
@@ -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">
diff --git a/public/javascripts/app/templates/post-viewer/reactions.handlebars b/public/javascripts/app/templates/post-viewer/reactions.handlebars
index 56bb63c9b..bd9474ecf 100644
--- a/public/javascripts/app/templates/post-viewer/reactions.handlebars
+++ b/public/javascripts/app/templates/post-viewer/reactions.handlebars
@@ -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}}
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 6f6261b27..7d6c8d21a 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -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 {