toggle feedback slider; css tweaks

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

@@ -5,7 +5,7 @@
     <div id="post-author" class="media">
       <div class="img">
         <a href="/people/{{author.guid}}" class="author-name">
-          <img src="{{author.avatar.small}}" class="avatar"/>
+          <img src="{{author.avatar.small}}" class="avatar smaller"/>
         </a>
       </div>
 
@@ -23,7 +23,45 @@
   </div>
 </div>
 
-
 <div id="post-content"></div>
 <div id="post-nav"></div>
-<div id="post-feedback"></div>
+
+<div id="post-reactions">
+  <div id="post-feedback"></div>
+
+  <div id="post-interactions" style="display:none;">
+    <div id="post-interactions-container">
+      <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 id="new-post-comment">
+        <div id="new-post-comment-container">
+          <textarea class="new-comment-text" placeholder="Comment"></textarea>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+

public/javascripts/app/views/post_feedback_view.js

@@ -14,9 +14,9 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
 
   tooltipSelector : ".label",
 
-  comment : function(){
+  comment : function(evt){
-    console.log(this.model)
+    if(evt) { evt.preventDefault() }
+    $("#post-interactions").slideToggle()
   }
 
 })
-

public/stylesheets/sass/new-templates.scss

@@ -255,9 +255,22 @@ $light-grey: #999;
   padding: 20px;
 }
 
+.avatar.smaller {
+  height: 35px;
+  width: 35px;
+}
+
+.author-name {
+  color: inherit;
+  font-weight: bold;
+}
+
 #post-author {
   @include border-radius();
 
+  border: 1px solid rgba(255,255,255,0.2);
+  border-top: 1px solid rgba(255,255,255,0.5);
+
   float: left;
   margin: 0;
 
@@ -269,13 +282,6 @@ $light-grey: #999;
 
   .avatar {
     @include border-radius();
-    height: 35px;
-    width: 35px;
-  }
-
-  .author-name {
-    color: inherit;
-    font-weight: bold;
   }
 
   .post-time {
@@ -290,13 +296,80 @@ $light-grey: #999;
   }
 }
 
-#user-controls {
+#post-reactions {
   position: fixed;
-  height: 30px;
   width: 100%;
   bottom: 0;
   left: 0;
   text-align: center;
+}
+
+#post-interactions {
+  @include center(horizontal);
+
+  #post-interactions-container {
+    @include box-shadow(0, 6px, 15px, #000);
+    @include border-radius();
+
+    border-top: 1px solid #555;
+    border-right: 1px solid #444;
+    border-left: 1px solid #444;
+
+    width: 420px;
+    background-image: url("../images/hatched-bg-dark.png");
+
+    color: #ccc;
+  }
+
+  #post-comments {
+    text-align: left;
+    padding-top: 0;
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  #new-post-comment {
+    border: 2px solid #333;
+    text-align: left;
+    background-image: url("../images/hatched-bg-dark.png");
+  }
+
+  #new-post-comment-container {
+    padding: 10px;
+
+    textarea{
+      width: 390px;
+      height: 18px;
+    }
+  }
+}
+
+.post-comment {
+  box-shadow: 0 1px 2px -2px #999;
+  border-bottom: 1px solid #333;
+
+  &:last-child {
+    box-shadow: none;
+    border-bottom: none;
+  }
+
+  padding: 10px;
+  padding-right: 40px;
+  margin: 0px;
+
+  .avatar {
+    @include border-radius();
+  }
+
+  text-shadow: 0 1px 3px #222;
+
+  a {
+    color: inherit;
+  }
+}
+
+#user-controls {
+  height: 30px;
 
   .avatar {
     vertical-align: top;