refactor wall.js. style wall page a bit

app/assets/javascripts/wall.js.coffee

@@ -58,14 +58,26 @@
     form.show()
   
   renderNote: (note) ->
-    author = '<strong class="wall-author">' + note.author.name + '</strong>'
-    body = '<span class="wall-text">' + linkify(sanitize(note.body)) + '</span>'
-    file = ''
-    time = '<abbr class="timeago" title="' + note.created_at + '">' + note.created_at + '</time>'
+    template = Wall.noteTemplate()
+    template = template.replace('{{author_name}}', note.author.name)
+    template = template.replace('{{created_at}}', note.created_at)
+    template = template.replace('{{text}}', linkify(sanitize(note.body)))
 
     if note.attachment
-      file = '<span class="wall-file"><a href="/files/note/' + note.id + '/' + note.attachment + '">' + note.attachment + '</a></span>'
-    
-    html = '<li>' + author + body + file + time + '</li>'
+      file = '<i class="icon-paper-clip"/><a href="/files/note/' + note.id + '/' + note.attachment + '">' + note.attachment + '</a>'
+    else
+      file = ''
+    template = template.replace('{{file}}', file)
 
-    $('ul.notes').append(html)
+
+    $('ul.notes').append(template)
+
+  noteTemplate: ->
+    return '<li>
+      <strong class="wall-author">{{author_name}}</strong>
+      <span class="wall-text">
+        {{text}}
+        <span class="wall-file">{{file}}</span>
+      </span>
+      <abbr class="timeago" title="{{created_at}}">{{created_at}}</abbr>
+    </li>'

app/assets/stylesheets/sections/wall.scss

@@ -14,12 +14,28 @@
 
   .notes {
     margin-bottom: 160px;
+    background: #FFE;
+    border: 1px solid #EED;
+
+    > li {
+      @extend .clearfix;
+      border-bottom: 1px solid #EED;
+      padding: 10px;
+    }
 
     .wall-author {
       color: #666;
-      margin-right: 10px;
-      border-right: 1px solid #CCC;
-      padding-right: 5px
+      float: left;
+      width: 100px;
+      text-overflow: ellipsis;
+    }
+
+    .wall-text {
+      border-left: 1px solid #CCC;
+      margin-left: 10px;
+      padding-left: 10px;
+      float: left;
+      width: 80%;
     }
 
     .wall-file {

app/views/walls/show.html.haml

@@ -1,5 +1,5 @@
 %div.wall-page
-  %ul.well-list.notes
+  %ul.notes
 
   - if can? current_user, :write_note, @project
     .note-form-holder