DG MS; background colors for great justice (on the stream)

app/assets/javascripts/app/views/comment_view.js

@@ -9,7 +9,8 @@ app.views.Comment = app.views.Content.extend({
     });
   },
 
-  initialize : function(){
+  initialize : function(options){
+    this.templateName = options.templateName || this.templateName
     this.model.on("change", this.render, this)
   },
 

app/assets/javascripts/app/views/post-viewer/reactions.js

@@ -38,7 +38,8 @@ app.views.PostViewerReactions = app.views.Base.extend({
 
     this.$("#post-comments").append(new app.views.Comment({
       model: comment,
-      className : "post-comment media"
+      className : "post-comment media",
+      templateName : "post-viewer/comment"
     }).render().el);
   }
 });

app/assets/stylesheets/new_styles/_canvas.scss

@@ -369,9 +369,19 @@
 /* new stream overrides */
 #stream {
   color : #fff;
-  background-color : #333;
-}
+  background-color : #222;
 
+  .background {
+    @include box-shadow(-2px, 0, 7px, rgba(0,0,0,0.8));
+    position : fixed;
+    background-color : cyan;
+    height : 100%;
+    width : 100%;
+
+    background-color : #333;
+  }
+
+}
 
 #stream-content {
   .stream-frame {

app/assets/templates/post-viewer/comment.jst.hbs

@@ -1,15 +1,27 @@
+{{#if canRemove}}
+<div class="controls">
+    <a href="#" class="delete comment_delete" title="{{t "delete"}}">
+        <img alt="Deletelabel" src="{{imageUrl "deletelabel.png"}}" />
+        <a/>
+</div>
+{{/if}}
+
 <div class="img">
-  {{#linkToPerson author}}
-    {{{personImage this "small" "small"}}}
-  {{/linkToPerson}}
+    {{#linkToPerson author}}
+        <div class="profile-image-container smaller" style="background-image : url('{{avatar.large}}')"></div>
+    {{/linkToPerson}}
 </div>
 
 <div class="bd">
-  {{#linkToPerson author}}
-    {{name}}
-  {{/linkToPerson}}
+    <a href="/people/{{author.guid}}" class="author author-name">
+        {{author.name}}
+    </a>
 
-  <div class="comment-content">
-    {{{text}}}
-  </div>
+    <div class="collapsible comment-content">
+        {{{text}}}
+    </div>
+
+    <div class="info">
+        <time class="timeago" datetime="{{created_at}}"/>
+    </div>
 </div>

app/assets/templates/stream.jst.hbs

@@ -1,5 +1,10 @@
 <div id="stream">
     <div class="container">
+
+        <div class="row">
+            <div class="background offset5"></div>
+        </div>
+
         <div class="row">
             <section id="stream-content" class="span4 offset1"/>