changed handlebars "avatar" helper to "personImage"; added home button to interaction pane (only when sneaky -- needs further investigating on getting it showing up when the interaction pane is invoked); minor css tweaks.

public/javascripts/app/helpers/handlebars-helpers.js

@@ -14,7 +14,7 @@ Handlebars.registerHelper('linkToPerson', function(context, block) {
   return html
 })
 
-Handlebars.registerHelper('avatar', function(person, size, imageClass) {
+Handlebars.registerHelper('personImage', function(person, size, imageClass) {
   size = (typeof(size) != "string" ? "small" : size);
   imageClass = (typeof(imageClass) != "string" ? size : imageClass);
 

public/javascripts/app/templates/comment-stream.handlebars

@@ -15,7 +15,7 @@
     <div class="media new_comment_form_wrapper {{#unless comments_count}} hidden {{/unless}}">
       {{#with current_user}}
         <a href="/people/{{guid}}" class="img">
-          {{{avatar this}}}
+          {{{personImage this}}}
         </a>
       {{/with}}
 

public/javascripts/app/templates/comment.handlebars

@@ -7,9 +7,9 @@
 {{/if}}
 
 <div class="img">
-  <a href="/people/{{author.guid}}">
+  {{#linkToPerson author}}
-    <img src="{{author.avatar.small}}" class="avatar smaller" />
+    {{{personImage this "small" "small"}}}
-  </a>
+  {{/linkToPerson}}
 </div>
 
 <div class="bd">

public/javascripts/app/templates/post-viewer/author.handlebars

@@ -1,6 +1,6 @@
 <div class="img">
   {{#linkToPerson author}}
-    {{{avatar this "small"}}}
+    {{{personImage this "small"}}}
   {{/linkToPerson}}
 </div>
 

public/javascripts/app/templates/post-viewer/comment.handlebars

@@ -1,6 +1,6 @@
 <div class="img">
   {{#linkToPerson author}}
-    {{{avatar this "small"}}}
+    {{{personImage this "small" "small"}}}
   {{/linkToPerson}}
 </div>
 

public/javascripts/app/templates/post-viewer/feedback.handlebars

@@ -34,15 +34,19 @@
 
 <!-- this acts as a dock underlay -->
 <div id="post-info-sneaky" class="passive">
-  <a href="#" rel="invoke-interaction-pane">
+  <div id="post-info-container-sneaky">
-    <div id="post-info-container-sneaky">
+    <a href="#" rel="invoke-interaction-pane" class="invoker">
       <img src="/images/up-tick-inset.png" class="info-tick"/>
-    </div>
+      <a href="/" title="Home" class="home-button">
-  </a>
+        <i class="icon-home icon-white"></i>
+      </a>
+    </a>
+  </div>
 </div>
 
 <!-- this closes an open interaction pane -->
 <div id="close-reactions-pane-container">
-  <a href="#" id="close-reactions-pane" rel="hide-interaction-pane"> </a>
+  <a href="#" id="close-reactions-pane" rel="hide-interaction-pane">
+  </a>
 </div>
 

public/javascripts/app/templates/post-viewer/interactions.handlebars

@@ -2,7 +2,6 @@
 
 <div id="post-info" style="display:none;">
   <div id="post-info-container">
-
     <img src="/images/down-tick-inset.png" class="info-tick"/>
 
     <div id="post-reactions"> </div>

public/javascripts/app/templates/post-viewer/new-comment.handlebars

@@ -2,7 +2,6 @@
   <form class="form-inline">
     <textarea class="new-comment-text" id="new-comment-text" placeholder="Comment"></textarea>
     <button type="submit" class="btn btn-small">
-      <i class="icon-comment"></i>
       Comment
     </button>
   </form>

public/javascripts/app/templates/post-viewer/reactions.handlebars

@@ -7,7 +7,7 @@
       <div class="bd">
         {{#each likes}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>
@@ -24,7 +24,7 @@
       <div class="bd">
         {{#each participations}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>
@@ -41,7 +41,7 @@
       <div class="bd">
         {{#each reshares}}
           {{#linkToPerson author}}
-            {{{avatar this "small" "micro"}}}
+            {{{personImage this "small" "micro"}}}
           {{/linkToPerson}}
         {{/each}}
       </div>

public/javascripts/app/templates/stream-element.handlebars

@@ -19,7 +19,7 @@
 
   {{#with author}}
     <a href="/people/{{guid}}" class="img">
-      {{{avatar this}}}
+      {{{personImage this}}}
     </a>
   {{/with}}
 

public/javascripts/app/views/post-viewer/feedback.js

@@ -14,7 +14,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click *[rel='hide-interaction-pane']" : "hidePane"
   },
 
-  tooltipSelector : ".label",
+  tooltipSelector : ".label, .home-button",
 
   postRenderTemplate : function() {
     this.sneakyVisiblity()

public/javascripts/app/views/post-viewer/interactions.js

@@ -30,15 +30,26 @@ app.views.PostViewerInteractions = app.views.Base.extend({
   togglePane : function(evt) {
     if(evt) { evt.preventDefault() }
     this.$("#post-info").slideToggle(300)
-    this.$("#post-info-sneaky").toggleClass('passive')
     this.removeTooltips()
   },
 
   invokePane : function() {
-    if(!this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(!this.$("#post-info").is(":visible")) {
+      this.$("#post-info-sneaky").addClass("passive")
+      this.togglePane()
+    }
   },
 
   hidePane : function() {
-    if(this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(this.$("#post-info").is(":visible")) {
+
+      /* it takes about 400ms for the pane to hide.  we need to keep
+       * the sneaky hidden until the slide is complete */
+      setTimeout(function(){
+        this.$("#post-info-sneaky").removeClass("passive")
+      }, 400)
+
+      this.togglePane()
+    }
   }
 })

public/stylesheets/sass/new-templates.scss

@@ -424,9 +424,17 @@ body.idle {
       top: 1px solid #111;
     }
 
+    .img {
+      margin-right: 5px;
+    }
+
+    i {
+      margin-top: 1px;
+    }
+
     .avatar {
       @include border-radius();
-      margin-right: 2px;
+      margin-right: 0;
     }
   }
 
@@ -452,7 +460,7 @@ body.idle {
 
     textarea{
       height: 18px;
-      width: 300px;
+      width: 318px;
     }
 
     form {
@@ -488,6 +496,30 @@ body.idle {
   }
 }
 
+.home-button {
+  @include transition(opacity, 0.3s);
+  @include opacity(0.6);
+
+  position: absolute;
+  left: 2px;
+  top: 4px;
+
+  padding: 4px 6px;
+
+  &:hover {
+    @include opacity(1);
+  }
+}
+
+.invoker {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 #post-feedback:hover {
   #post-info-sneaky:not(.passive) {
     @include opacity(1);
@@ -495,7 +527,6 @@ body.idle {
   }
 }
 
-
 .post-comment {
   -moz-box-shadow: 0 1px 2px -2px #999;
   -webkit-box-shadow: 0 1px 2px -2px #999;