Revamp comment stuff layout, now with full markdown in comments

3 files changed, 84 insertions, 40 deletions

diff --git a/app/assets/stylesheets/screen.css.erb b/app/assets/stylesheets/screen.css.erb
index ea444e8..69e17b8 100644
--- a/app/assets/stylesheets/screen.css.erb
+++ b/app/assets/stylesheets/screen.css.erb
@@ -274,15 +274,6 @@ span.hspacer {
   padding-right: 3em;
 }
 
-ul#commentslist  {
-  list-style-type: none;
-  padding-left: 1em;
-}
-
-ul#commentslist li {
-  margin-bottom: 8px;
-}
-
 /** Tables **/
 table {
   border-spacing: 0;
@@ -293,10 +284,14 @@ tr {
   border-spacing: .3em;
 }
 
-tr.odd, p.odd {
+.odd {
   background-color: #D3CFE5;
 }
 
+.odd-bright {
+  background-color: #DEDBEF;
+}
+
 tr.invalid, tr.invalid td {
   background-color: #a40000 !important;
   color: white;
@@ -402,6 +397,50 @@ div.box .box-actions {
   width: 100%;
 }
 
+/** comment list **/
+ul#commentslist  {
+  list-style-type: none;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+li.comment {
+  border-bottom: 1px solid #8875B0;
+  padding: .25em;
+}
+
+.comment-header {
+  float: left;
+  text-align: center;
+}
+
+.comment-toolbox {
+  float: right;
+}
+
+.comment-text {
+  margin-left: 1.5em;
+}
+
+.comment-text p {
+  margin-bottom: .5em !important;
+}
+
+.comment-author {
+  font-size: smaller;
+  clear: both;
+  text-align: right;
+  padding-bottom: .3em;
+}
+
+.comment-number {
+  float: left;
+  color: gray;
+}
+
+#addcommentsubmit {
+  margin-right: 0;
+}
 
 /** popups **/
 div.popup {
@@ -422,6 +461,10 @@ div#left {
   width: 55%;
 }
 
+span.left {
+  float: left;
+}
+
 table.padcells td {
   padding: 0.3em;
   padding-left: 0.5em;
@@ -500,6 +543,12 @@ form.l label {
   float: left;
 }
 
+form.popupform p {
+  padding:  0;
+  margin: 0;
+  margin-bottom: .3em;
+}
+
 input.text {
   border: 1px solid #4C3E61;
   /*background-color: #D3CFE5;*/
diff --git a/app/views/comments/new.html.erb b/app/views/comments/new.html.erb
index bcf8faa..87d836f 100644
--- a/app/views/comments/new.html.erb
+++ b/app/views/comments/new.html.erb
@@ -1,27 +1,25 @@
 <% if @glsa.nil? %>
 <p>No or invalid GLSA ID specified.</p>
 <% else %>
-<%= form_tag(glsa_comments_path(@glsa, @comment), :remote => true) do -%>
-<p><label for="addcomment"><%= image_tag 'icons/comment.png' %>
-  Please enter your comment:</label></p>
-
+<%= form_tag(glsa_comments_path(@glsa, @comment), :remote => true, :class => "popupform") do -%>
   <%= fields_for :newcomment do |f| %>
     <p>
-      <%= f.text_area :text, :class => "nice", :rows => 2 %>
+      <%= f.text_area :text, :class => "nice", :rows => 4 %>
     </p>
 
-    <% if current_user.access >= 2 and not @glsa.is_owner? current_user %>
-    <div align="right">
+    <p style="text-align: right;">
+      <% if current_user.access >= 2 and not @glsa.is_owner? current_user %>
+      <span class="left">
       Rating:
-      <%= f.radio_button :rating, "approval" %><label for="newcomment_rating_approval"><%= image_tag 'icons/unaffected.png', :alt => 'Approval', :title => 'Approval' %></label>&nbsp;
-      <%= f.radio_button :rating, "rejection" %><label for="newcomment_rating_rejection"><%= image_tag 'icons/affected.png', :alt => 'Rejection', :title => 'Rejection' %></label>&nbsp;
-      <%= f.radio_button :rating, "neutral", :checked => true %><label for="newcomment_rating_neutral"><%= image_tag 'icons/reference.png', :alt => 'Neutral', :title => 'Neutral' %></label>
-    </div>
-    <% else %>
-      <%= f.hidden_field :rating, :value => 'neutral' %>
+      <%= f.radio_button :rating, "approval" %><label for="newcomment_rating_approval"><%= image_tag 'icons/approval.png', :alt => 'Approval', :title => 'Approval' %></label>&nbsp;
+      <%= f.radio_button :rating, "rejection" %><label for="newcomment_rating_rejection"><%= image_tag 'icons/rejection.png', :alt => 'Rejection', :title => 'Rejection' %></label>&nbsp;
+      <%= f.radio_button :rating, "neutral", :checked => true %><label for="newcomment_rating_neutral"><%= image_tag 'icons/comment.png', :alt => 'Neutral', :title => 'Neutral' %></label>
+      </span>
+      <% else %>
+        <%= f.hidden_field :rating, :value => 'neutral' %>
+      <% end %>
     <% end %>
-  <% end %>
-
-    <p style="text-align: right;"><input type="submit" class="button" value="Add comment" id="addcommentsubmit" /></p>
+      <input type="submit" class="button" value="Add comment" id="addcommentsubmit" />
+    </p>
 <% end -%>
 <% end %>
\ No newline at end of file
diff --git a/app/views/glsa/_comment.html.erb b/app/views/glsa/_comment.html.erb
index 81c5066..059f4a0 100644
--- a/app/views/glsa/_comment.html.erb
+++ b/app/views/glsa/_comment.html.erb
@@ -1,30 +1,27 @@
-<li>
+<li class="comment <%= @css_class || cycle("odd-bright", "") %>">
   <input type="hidden" name="commentread-<%= comment.id %>" id="commentread-<%= comment.id %>" value="<%= comment.read ? "true" : "false" %>" />
-  <span style="float: right;">
+  <span class="comment-toolbox">
     <%= link_to_function(comment.read ? image_tag("icons/flag-green.png", :title => 'done') : image_tag("icons/flag.png", :title => 'todo'),
                               "toggleCommentRead(#{comment.id})",
                               :title => 'Toggle read status',
                               :id => "commentflag-#{comment.id}") %>
   </span>
-   
-  <div style="float: left;">
+  <div class="comment-header">
     <%= case comment.rating
         when "approval"
-          image_tag('icons/unaffected.png', :title => 'Approval')
+          image_tag('icons/approval.png', :title => 'Approval')
         when "rejection"
-          image_tag('icons/affected.png', :title => 'Rejection')
+          image_tag('icons/rejection.png', :title => 'Rejection')
         else
-          image_tag('icons/reference.png', :title => 'Neutral')
+          image_tag('icons/comment.png', :title => 'Neutral')
         end -%>
-    <small style="color: grey; vertical-align: text-bottom;"><%= @comment_number ||= 1 %></small>
   </div>
   
-  <div style="margin-left: 35px;"><%= comment.text %></div>
-  <div style="font-size: 2px;">&nbsp;</div>
-  
-  <div style=" float: right;"><small>-- <%= comment.user.name %>, <%= comment.created_at %></small></div>
- 
-  <div style="float: none;">&nbsp;</div>
+  <div class="comment-text"><%= Kramdown::Document.new(h(comment.text)).to_html.html_safe %></div>
+  <div class="comment-author">
+    <span class="comment-number">#<strong><%= @comment_number ||= 1 %></strong></span>
+    &mdash;<strong><%= comment.user.name %></strong>, <%= comment.created_at %>
+   </div>
 </li>
 
 <% @comment_number += 1 -%>
\ No newline at end of file