From ddaff077f60d879010ea85c5cfe02570a744ef28 Mon Sep 17 00:00:00 2001
From: Evgeny Fadeev <evgeny.fadeev@gmail.com>
Date: Fri, 19 Apr 2013 02:55:19 -0400
Subject: responsive design on question page sort of works

---
 askbot/media/js/post.js                      |  31 +++--
 askbot/media/style/style.css                 | 165 ++++++++++-------------
 askbot/media/style/style.less                | 193 ++++++++++++---------------
 askbot/templates/macros.html                 |  53 +++++---
 askbot/templates/question.html               |   2 +-
 askbot/templates/question/answer_card.html   |  34 ++---
 askbot/templates/question/question_card.html |  58 ++++----
 7 files changed, 259 insertions(+), 277 deletions(-)

diff --git a/askbot/media/js/post.js b/askbot/media/js/post.js
index a4f74359..2af9a15d 100644
--- a/askbot/media/js/post.js
+++ b/askbot/media/js/post.js
@@ -617,17 +617,17 @@ var Vote = function(){
     };
 
     var getOffensiveQuestionFlag = function(){
-        var offensiveQuestionFlag = '#question-table span[id^="'+ offensiveIdPrefixQuestionFlag +'"]';
+        var offensiveQuestionFlag = '.question-card span[id^="'+ offensiveIdPrefixQuestionFlag +'"]';
         return $(offensiveQuestionFlag);
     };
 
     var getRemoveOffensiveQuestionFlag = function(){
-        var removeOffensiveQuestionFlag = '#question-table span[id^="'+ removeOffensiveIdPrefixQuestionFlag +'"]';
+        var removeOffensiveQuestionFlag = '.question-card span[id^="'+ removeOffensiveIdPrefixQuestionFlag +'"]';
         return $(removeOffensiveQuestionFlag);
     };
 
     var getRemoveAllOffensiveQuestionFlag = function(){
-        var removeAllOffensiveQuestionFlag = '#question-table span[id^="'+ removeAllOffensiveIdPrefixQuestionFlag +'"]';
+        var removeAllOffensiveQuestionFlag = '.question-card span[id^="'+ removeAllOffensiveIdPrefixQuestionFlag +'"]';
         return $(removeAllOffensiveQuestionFlag);
     };
 
@@ -1144,11 +1144,7 @@ var Vote = function(){
             postType = bits.shift();
 
             var do_proceed = false;
-            if (postType == 'answer'){
-                postNode = $('#post-id-' + postId);
-            } else if (postType == 'question') {
-                postNode = $('#question-table');
-            }
+            postNode = $('#post-id-' + postId);
             postRemoveLink = object;
             if (postNode.hasClass('deleted')) {
                 removeActionType = 'undelete';
@@ -1883,6 +1879,7 @@ EditCommentForm.prototype.getSaveHandler = function(){
         var commentData = me._comment.getData();
         var timestamp = commentData['comment_added_at'] || gettext('just now');
         var userName = commentData['user_display_name'] || askbot['data']['userName'];
+
         me._comment.setContent({
             'html': editor.getHtml(),
             'text': text,
@@ -1984,6 +1981,8 @@ Comment.prototype.decorate = function(element){
     var comment_id = this._element.attr('id').replace('comment-','');
     this._data = {id: comment_id};
 
+    this._contentBox = this._element.find('.comment-content');
+
     var timestamp = this._element.find('abbr.timeago');
     this._data['comment_added_at'] = timestamp.attr('title');
     var userLink = this._element.find('a.author');
@@ -2077,6 +2076,8 @@ Comment.prototype.getParentId = function(){
 Comment.prototype.setContent = function(data){
     this._data = $.extend(this._data, data);
     this._element.addClass('comment');
+    this._element.css('display', 'table');//@warning: hardcoded
+    //display is set to "block" if .show() is called, but we need table.
     this._element.attr('id', 'comment-' + this._data['id']);
 
     // 1) create the votes element if it is not there
@@ -2096,6 +2097,14 @@ Comment.prototype.setContent = function(data){
         votesBox.append(vote.getElement());
     } 
 
+    // 2) create the comment content container
+    if (this._contentBox === undefined) {
+        var contentBox = this.makeElement('div');
+        contentBox.addClass('comment-content');
+        this._contentBox = contentBox;
+        this._element.append(contentBox);
+    }
+
     // 2) create the comment deleter if it is not there
     if (this._comment_delete === undefined) {
         this._comment_delete = $('<div class="comment-delete"></div>');
@@ -2104,13 +2113,13 @@ Comment.prototype.setContent = function(data){
             this._delete_icon.setHandler(this.getDeleteHandler());
             this._comment_delete.append(this._delete_icon.getElement());
         }
-        this._element.append(this._comment_delete);
+        this._contentBox.append(this._comment_delete);
     }
 
     // 3) create or replace the comment body
     if (this._comment_body === undefined) {
         this._comment_body = $('<div class="comment-body"></div>');
-        this._element.append(this._comment_body);
+        this._contentBox.append(this._comment_body);
     }
     if (askbot['settings']['editorType'] === 'tinymce') {
         var theComment = $('<div/>');
@@ -4476,7 +4485,7 @@ CategorySelectorLoader.prototype.getCancelHandler = function() {
 CategorySelectorLoader.prototype.decorate = function(element) {
     this._element = element;
     this._display_tags_container = $('#question-tags');
-    this._question_body = $('.question-body');
+    this._question_body = $('.question .post-body');
     this._question_controls = $('#question-controls');
 
     this._editor_buttons = this.makeElement('div');
diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css
index 69444ec8..c48728b5 100644
--- a/askbot/media/style/style.css
+++ b/askbot/media/style/style.css
@@ -2013,7 +2013,7 @@ ul#related-tags li {
 .question-page p.rss {
   float: none;
   clear: both;
-  padding: 3px 0 0 23px;
+  padding: 3px 0 3px 18px;
   font-size: 15px;
   width: 130px;
   background-position: center left;
@@ -2023,71 +2023,57 @@ ul#related-tags li {
   font-family: 'Open Sans Condensed', Arial, sans-serif;
   vertical-align: top;
 }
-.question-page .question-card {
-  display: relative;
+.question-page .post {
+  display: table;
+  padding: 3px;
+  margin-bottom: 16px;
+  width: 100%;
 }
-.question-page .question-content {
-  padding-left: 43px;
-  margin-bottom: 10px;
+.question-page .post .mceEditor td {
   width: auto;
 }
-.question-page .question-content pre,
-.question-page .answer pre,
-.question-page .question-content code,
-.question-page .answer code {
+.question-page .post pre,
+.question-page .post code {
   clear: both;
 }
-.question-page #question-table {
-  float: left;
-  border-top: #f0f0f0 1px solid;
-}
-.question-page #question-table,
-.question-page .answer-table {
-  margin: 8px 0 6px 0;
+.question-page .post-content {
+  display: table-cell;
   border-spacing: 0px;
-  width: 670px;
-  padding-right: 10px;
-}
-.question-page .answer-table {
-  margin-top: 0px;
-  border-bottom: 1px solid #D4D4D4;
-  float: right;
-}
-.question-page .answer-table td,
-.question-page #question-table td {
-  width: 20px;
+  padding-left: 14px;
   vertical-align: top;
-}
-.question-page .answer-table .mceEditor td,
-.question-page #question-table .mceEditor td {
   width: auto;
 }
-.question-page .question-body,
-.question-page .answer-body {
+.question-page .question .post-content {
+  margin-bottom: 10px;
+}
+.question-page .answer .post-content {
+  border-bottom: 1px solid #D4D4D4;
+}
+.question-page .post-body {
   overflow: auto;
-  margin-top: 10px;
   font-family: Arial;
   color: #4b4b4b;
   word-wrap: break-word;
 }
-.question-page .question-body p,
-.question-page .answer-body p {
+.question-page .post-body a {
+  color: #1b79bd;
+}
+.question-page .post-body img {
+  max-width: 100%;
+}
+.question-page .post-body li {
+  margin-bottom: 7px;
+}
+.question-page .post-body p {
   margin-bottom: 14px;
   line-height: 1.4;
   font-size: 14px;
   padding: 0px 5px 5px 0px;
 }
-.question-page .question-body a,
-.question-page .answer-body a {
-  color: #1b79bd;
-}
-.question-page .question-body li,
-.question-page .answer-body li {
-  margin-bottom: 7px;
-}
-.question-page .question-body IMG,
-.question-page .answer-body IMG {
-  max-width: 600px;
+.question-page .question .post-body {
+  margin-top: 8px;
+  border-top: #f0f0f0 1px solid;
+  padding-top: 10px;
 }
 .question-page .post-update-info-container {
   float: right;
@@ -2098,9 +2084,10 @@ ul#related-tags li {
   float: right;
   font-size: 9px;
   font-family: Arial;
-  padding: 4px;
-  margin: 0px 0px 5px 5px;
   line-height: 14px;
+  margin: 0px 0px 5px 5px;
+  padding: 4px;
+  width: 166px;
   border-radius: 4px;
   -ms-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -2293,23 +2280,23 @@ ul#related-tags li {
 .question-page div.comments {
   padding: 0;
 }
-.question-page #comment-title {
+.question-page h2.comment-title {
+  color: #7ea9b3;
   font-weight: bold;
   font-size: 23px;
-  color: #7ea9b3;
-  width: 200px;
-  float: left;
   font-family: 'Open Sans Condensed', Arial, sans-serif;
+  float: left;
+  padding-left: 0;
+  width: 200px;
 }
 .question-page .comments {
   font-size: 12px;
   clear: both;
 }
 .question-page .comments div.controls {
-  clear: both;
-  float: left;
   width: 100%;
   margin: 3px 0 20px 5px;
+  padding-left: 30px;
 }
 .question-page .comments .edit-comment-buttons {
   margin-left: -4px;
@@ -2347,7 +2334,7 @@ ul#related-tags li {
   padding: 0;
 }
 .question-page .comments form.post-comments {
-  padding: 6px 6px 7px 42px;
+  padding: 1px 6px 7px 31px;
   border-bottom: 1px solid #edeeeb;
   margin-bottom: 0;
 }
@@ -2403,13 +2390,25 @@ ul#related-tags li {
 }
 .question-page .comments .comment {
   border-bottom: 1px solid #edeeeb;
-  clear: both;
-  margin: 0;
-  padding-bottom: 4px;
-  overflow: auto;
+  display: table;
   font-family: Arial;
   font-size: 11px;
+  margin: 0;
   min-height: 25px;
+  overflow: auto;
+  padding-bottom: 4px;
+  width: 100%;
+}
+.question-page .comments .comment .comment-votes,
+.question-page .comments .comment .comment-content {
+  display: table-cell;
+  vertical-align: top;
+}
+.question-page .comments .comment .comment-content {
+  width: auto;
+}
+.question-page .comments .comment .comment-votes {
+  width: 25px;
 }
 .question-page .comments .comment:last-child {
   border-bottom: none;
@@ -2444,14 +2443,12 @@ ul#related-tags li {
   margin-bottom: 7px;
 }
 .question-page .comments .comment-votes {
-  float: left;
-  width: 37px;
   line-height: 130%;
   padding: 6px 5px 6px 3px;
 }
 .question-page .comments .comment-body {
   line-height: 1.3;
-  margin: 3px 26px 0 46px;
+  margin: 3px 26px 0 0;
   padding: 5px 3px;
   color: #666;
   font-size: 13px;
@@ -2547,9 +2544,9 @@ ul#related-tags li {
   font-weight: normal;
 }
 .question-page .vote-buttons .notify-sidebar {
-  text-align: left;
+  text-align: center;
   width: 130px;
-  margin-top: 7px;
+  margin: 7px auto 0;
 }
 .question-page .vote-buttons .notify-sidebar label {
   vertical-align: top;
@@ -2560,19 +2557,10 @@ ul#related-tags li {
   width: 723px;
   margin-top: 10px;
 }
-.question-page .answer .vote-buttons {
-  float: left;
-  margin-top: 10px;
-}
 .question-page .accepted-answer {
   background-color: #f7fecc;
   border-bottom-color: #9BD59B;
 }
-.question-page .accepted-answer .vote-buttons {
-  width: 27px;
-  margin-right: 10px;
-  margin-top: 10px;
-}
 .question-page .answer .post-update-info a {
   color: #444444;
 }
@@ -2596,9 +2584,6 @@ ul#related-tags li {
 .question-page .answered-by-owner .comments {
   background-color: #E6ECFF;
 }
-.question-page .answered-by-owner .vote-buttons {
-  margin-right: 10px;
-}
 .question-page .answer-img-accept {
   background: url(../images/vote-accepted.png);
   width: 23px;
@@ -2608,12 +2593,6 @@ ul#related-tags li {
 .question-page .answer-img-accept:hover {
   background: url(../images/vote-accepted-on.png);
 }
-.question-page .answer-body a {
-  color: #1b79bd;
-}
-.question-page .answer-body li {
-  margin-bottom: 0.7em;
-}
 .question-page #fmanswer {
   color: #707070;
   line-height: 1.2;
@@ -2632,18 +2611,23 @@ ul#related-tags li {
   margin: 0px 0 10px 0;
 }
 .vote-buttons {
-  float: left;
+  display: table-cell;
   text-align: center;
   padding-top: 2px;
-  margin: 0px 10px 0px 3px;
+  width: 25px;
+  margin-right: 13px;
   /* small IE fixes */
 
   *margin: 0;
   *height: 210px;
   *width: 30px;
 }
-.vote-buttons img {
-  cursor: pointer;
+.vote-buttons * {
+  margin: 0;
+}
+.box.vote-buttons {
+  display: block;
+  width: 100%;
 }
 .question-img-upvote,
 .question-img-downvote,
@@ -3709,7 +3693,7 @@ ul.form-horizontal-rows li input {
   vertical-align: top;
 }
 ul.post-tags {
-  margin-left: 3px;
+  margin: 2px 0 0 3px;
 }
 ul.post-tags li {
   margin-top: 4px;
@@ -4326,11 +4310,6 @@ textarea.tipped-input {
   .question-page .post-update-info .badge-count {
     display: none;
   }
-  .question-page .answer-table,
-  .question-page #question-table {
-    float: left;
-    margin-left: 12px;
-  }
   .user-profile-page td {
     display: block;
   }
diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less
index de0e28e8..44b918b5 100644
--- a/askbot/media/style/style.less
+++ b/askbot/media/style/style.less
@@ -2122,7 +2122,7 @@ ul#related-tags li {
     p.rss {
         float:none;
         clear:both;
-        padding: 3px 0 0 23px;
+        padding: 3px 0 3px 18px;
         font-size: 15px;
         width:130px;
         background-position:center left;
@@ -2134,75 +2134,66 @@ ul#related-tags li {
         vertical-align: top;
     }
 
-    .question-card {
-        display: relative;
-    }
-
-    .question-content {
-        padding-left: 43px;
-        margin-bottom:10px;
-        width: auto;
-    }
-
-    .question-content, .answer {
+    .post {
+        display: table;
+        padding: 3px;
+        margin-bottom: 16px;
+        width: 100%;
+        .mceEditor td {
+            width: auto;
+        }
         pre, code {
             clear:both;
         }
     }
 
-    #question-table{
-        float:left;
-        border-top:#f0f0f0 1px solid;
+    .post-content {
+        display: table-cell;
+        border-spacing: 0px;
+        padding-left: 14px;
+        vertical-align: top;
+        width: auto;
     }
 
-    #question-table,
-    .answer-table {
-        margin: 8px 0 6px 0;
-        border-spacing: 0px;
-        width: 670px;
-        padding-right:10px;
+    .question .post-content {
+        margin-bottom:10px;
     }
 
-    .answer-table {
-        margin-top:0px;
+    .answer .post-content {
         border-bottom: 1px solid #D4D4D4;
-        float:right;
     }
 
-    .answer-table td,
-    #question-table td {
-        width:20px;
-        vertical-align:top;
-    }
-    .answer-table .mceEditor td,
-    #question-table .mceEditor td {
-        width: auto;
-    }
-    .question-body, .answer-body {
+    .post-body {
         overflow: auto;
-        margin-top:10px;
-        font-family:@body-font;
-        color:#4b4b4b;
+        font-family: @body-font;
+        color: #4b4b4b;
         word-wrap: break-word;
 
-        p{
-            margin-bottom:14px;
-          line-height:1.4;
-          font-size:14px;
-          padding:0px 5px 5px 0px;
-        }
-        
         a {
             color:@link;
         }
-        
+
+        img {
+            max-width: 100%;
+        }
+
         li {
             margin-bottom:7px;
         }
+
+        p {
+            margin-bottom:14px;
+            line-height:1.4;
+            font-size:14px;
+            padding:0px 5px 5px 0px;
+        }
+
     }
 
-    .question-body IMG, .answer-body IMG {
-        max-width: 600px;
+    .question .post-body {
+        margin-top: 8px;
+        border-top: #f0f0f0 1px solid;
+        padding-top: 10px;
     }
 
     .post-update-info-container {
@@ -2215,9 +2206,11 @@ ul#related-tags li {
         float: right;
         font-size: 9px;
         font-family:@secondary-font;
-        padding:4px;
-        margin:0px 0px 5px 5px;
         line-height: 14px;
+        margin:0px 0px 5px 5px;
+        padding:4px;
+        width: 166px;
+
         .rounded-corners(4px);
         .box-shadow (0px, 2px,1px,#bfbfbf);
         
@@ -2392,23 +2385,23 @@ ul#related-tags li {
     div.comments {
         padding: 0;
     }
-    #comment-title{
-       font-weight:bold;
-       font-size:23px;
-       color:@section-title;
+    h2.comment-title {
+       color: @section-title;
+       font-weight: bold;
+       font-size: 23px;
+       font-family: @main-font;
+       float: left;
+       padding-left: 0;
        width:200px;
-       float:left;
-       font-family:@main-font;
     }
     .comments {
         font-size: 12px;    
         clear: both;
         
         div.controls {
-            clear: both;
-            float:left;
             width: 100%;
             margin: 3px 0 20px 5px;
+            padding-left: 30px;
         }
 
         .edit-comment-buttons {
@@ -2447,7 +2440,7 @@ ul#related-tags li {
         }
         
         form.post-comments {
-            padding: 6px 6px 7px 42px;
+            padding: 1px 6px 7px 31px;
             border-bottom: 1px solid #edeeeb;
             margin-bottom: 0;
         }
@@ -2504,13 +2497,26 @@ ul#related-tags li {
         }
         .comment {
             border-bottom: 1px solid #edeeeb;
-            clear: both;
-            margin: 0;
-            padding-bottom: 4px;
-            overflow: auto;
+            display: table;
             font-family: @body-font;
             font-size: 11px;
+            margin: 0;
             min-height: 25px;
+            overflow: auto;
+            padding-bottom: 4px;
+            width: 100%;
+
+            .comment-votes, /* layout fixed-fluid */
+            .comment-content {
+                display: table-cell;
+                vertical-align: top;
+            }
+            .comment-content {
+                width: auto;
+            }
+            .comment-votes {
+                width: 25px;
+            }
         }
         .comment:last-child {
             border-bottom: none;
@@ -2543,15 +2549,13 @@ ul#related-tags li {
         }
 
         .comment-votes {
-            float: left;
-            width: 37px;
             line-height: 130%;
             padding: 6px 5px 6px 3px;
         }
 
         .comment-body {
             line-height: 1.3;
-            margin: 3px 26px 0 46px;
+            margin: 3px 26px 0 0;
             padding: 5px 3px;
             color: #666;
             font-size:13px;
@@ -2658,35 +2662,24 @@ ul#related-tags li {
     }
 
     .vote-buttons .notify-sidebar {
-        text-align: left;
+        text-align: center;
         width:130px;
-        margin-top: 7px;
+        margin: 7px auto 0;
         label {
             vertical-align: top;
         }
     }
 
-    .tabBar-answer{
+    .tabBar-answer {
         margin-bottom:15px;
         padding-left:7px;
         width:723px;
         margin-top:10px;
     }
-    .answer{
-        .vote-buttons {
-            float:left;
-            margin-top: 10px;
-        }
-    }
+
     .accepted-answer {
         background-color: #f7fecc;
         border-bottom-color: #9BD59B;
-
-        .vote-buttons {
-            width:27px;
-           margin-right:10px;
-           margin-top:10px;
-        }
     }
 
     .answer .post-update-info a{
@@ -2716,9 +2709,6 @@ ul#related-tags li {
         .comments {
             background-color: #E6ECFF;
        }
-        .vote-buttons {
-           margin-right:10px;
-        }
     }
 
     .answer-img-accept {
@@ -2732,13 +2722,6 @@ ul#related-tags li {
         background: url(../images/vote-accepted-on.png)
     }
 
-    .answer-body a {
-        color:@link;
-    }
-    .answer-body li {
-        margin-bottom:0.7em;
-    }
-
     #fmanswer{
         color:@info-text;
         line-height:1.2;
@@ -2762,25 +2745,30 @@ ul#related-tags li {
 }
 
 .vote-buttons {
-    float: left;
+    display: table-cell;
     text-align: center;
     padding-top: 2px;
-    margin:0px 10px 0px 3px;
+    width: 25px;
+    margin-right: 13px;
+    * {
+        margin: 0;
+    }
     /* small IE fixes */
     *margin:0; 
     *height:210px;
     *width:30px;
 }
 
-.vote-buttons img {
-    cursor: pointer;
+.box.vote-buttons {
+    display: block;
+    width: 100%;
 }
 
 .question-img-upvote, .question-img-downvote,
 .answer-img-upvote, .answer-img-downvote {
     width: 25px;
     height: 20px;
-    cursor:pointer;
+    cursor: pointer;
 }
 
 .question-img-upvote, .answer-img-upvote {
@@ -3926,11 +3914,11 @@ ul.form-horizontal-rows li input {
 
 
 ul.post-tags {
-    margin-left: 3px;
-}
-ul.post-tags li {
-    margin-top: 4px;
-    margin-bottom: 3px;
+    margin: 2px 0 0 3px;
+    li {
+        margin-top: 4px;
+        margin-bottom: 3px;
+    }
 }
 
 ul.post-retag {
@@ -4507,11 +4495,6 @@ textarea.tipped-input {
                 display: none;
             }
         }
-        .answer-table,
-        #question-table {
-            float: left;
-            margin-left: 12px;
-        }
     }
 
     .user-profile-page {
diff --git a/askbot/templates/macros.html b/askbot/templates/macros.html
index 933f47e7..6fd69647 100644
--- a/askbot/templates/macros.html
+++ b/askbot/templates/macros.html
@@ -392,7 +392,7 @@ for the purposes of the AJAX comment editor #}
 -%}
     {% spaceless %}
     {% if post.comment_count > 0 %}
-        <h2 id="comment-title">Comments</h2>
+        <h2 class="comment-title">Comments</h2>
         <div class="clean"></div> 
     {% endif %}
     {% set widget_id = 'comments-for-' + post.post_type + '-' + post.id|string %}
@@ -420,23 +420,38 @@ for the purposes of the AJAX comment editor #}
                             <div class="upvote"></div>
                         {% endif %}
                     </div>
-                    <div 
-                        id="post-{{comment.id}}-delete"
-                        class="comment-delete"
-                    >
-                        <span class="delete-icon" title="{% trans %}delete this comment{% endtrans %}"></span>
-                    </div>
-                    <div class="comment-body">
-                        {{comment.html}}
-                        <a class="author" href="{{comment.author.get_profile_url()}}">{{comment.author.username|escape}}</a>
-                        <span class="age">&nbsp;({{ timeago(comment.added_at) }})</span>
-                        <a id="post-{{comment.id}}-edit"
-                            class="edit">{% trans %}edit{% endtrans %}</a>
-                        <form action="{% url comment_to_answer %}" method="POST" accept-charset="utf-8" class='convert-comment'>
-                          {% csrf_token %}
-                          <input type="hidden" value="{{comment.id}}" name="comment_id" id="id_comment_id">
-                          <input type="submit" value="{% trans %}convert to answer{% endtrans %}">
-                        </form>
+                    <div class="comment-content">
+                        <div 
+                            id="post-{{comment.id}}-delete"
+                            class="comment-delete"
+                        >
+                            <span 
+                                class="delete-icon"
+                                title="{% trans %}delete this comment{% endtrans %}"
+                            ></span>
+                        </div>
+                        <div class="comment-body">
+                            {{comment.html}}
+                            <a 
+                                class="author"
+                                href="{{comment.author.get_profile_url()}}"
+                            >{{comment.author.username|escape}}</a>
+                            <span class="age">&nbsp;({{ timeago(comment.added_at) }})</span>
+                            <a 
+                                id="post-{{comment.id}}-edit"
+                                class="edit"
+                            >{% trans %}edit{% endtrans %}</a>
+                            <form 
+                                action="{% url comment_to_answer %}"
+                                method="POST"
+                                accept-charset="utf-8"
+                                class='convert-comment'
+                            >
+                                {% csrf_token %}
+                                <input type="hidden" value="{{comment.id}}" name="comment_id" id="id_comment_id">
+                                <input type="submit" value="{% trans %}convert to answer{% endtrans %}">
+                            </form>
+                        </div>
                     </div>
                 </div>
                 <script type="text/javascript">
@@ -552,7 +567,7 @@ for the purposes of the AJAX comment editor #}
 {%- endmacro -%}
 
 {%- macro answer_classes(answer, question) -%}
-answer {% if answer.accepted() %}accepted-answer{% endif %} {% if answer.author_id==question.author_id %} answered-by-owner{% endif %} {% if answer.deleted %}deleted{% endif -%}
+ {% if answer.accepted() %}accepted-answer{% endif %} {% if answer.author_id==question.author_id %} answered-by-owner{% endif %} {% if answer.deleted %}deleted{% endif -%}
 {%- endmacro -%}
 
 {%- macro follow_toggle(follow, name, alias, id) -%}
diff --git a/askbot/templates/question.html b/askbot/templates/question.html
index 0ab4221a..8312a8a9 100644
--- a/askbot/templates/question.html
+++ b/askbot/templates/question.html
@@ -128,7 +128,7 @@
                     //still may need to hide because answer may be too long
                     var answer_id = 'post-id-' + post_id;
                     var answer_container = document.getElementById(answer_id);
-                    var answerBody = findChildrenByClassName(answer_container, 'answer-body')[0];
+                    var answerBody = findChildrenByClassName(answer_container, 'post-body')[0];
                     //todo: this is not reliable
                     var answerBodyNodes = answerBody.childNodes;
                     var answerElement = answerBodyNodes[answerBodyNodes.length - 1];
diff --git a/askbot/templates/question/answer_card.html b/askbot/templates/question/answer_card.html
index ae7d30fa..9d17e8c2 100644
--- a/askbot/templates/question/answer_card.html
+++ b/askbot/templates/question/answer_card.html
@@ -4,28 +4,28 @@
     <a class="old_answer_id_anchor" name="{{ answer.old_answer_id }}"></a>
 {% endif %}
 <div
-        id="post-id-{{ answer.id }}"
-        class="{{ macros.answer_classes(answer, question) }}">
+    id="post-id-{{ answer.id }}"
+    data-post-id="{{ answer.id }}"
+    class="post answer {{ macros.answer_classes(answer, question) }}"
+>
+
     <div class="vote-buttons">
         {% include "question/answer_vote_buttons.html" %}
     </div>
-    <div class="answer-table">
-
-        <div class="item-right">
-            <div class="answer-body">
-                <div class="post-update-info-container">
-                    {% include "question/answer_author_info.html" %}
-                </div>
-                {% if answer.id in published_answer_ids %}
-                    <p><strong>{% trans %}This response is published{% endtrans %}</strong></p>
-                {% endif %}
-                {{ answer.html }}
+    <div class="post-content">
+        <div class="post-body">
+            <div class="post-update-info-container">
+                {% include "question/answer_author_info.html" %}
             </div>
-            <div class="answer-controls post-controls">
-                {% include "question/answer_controls.html" %}
-            </div>
-            {% include "question/answer_comments.html" %}
+            {% if answer.id in published_answer_ids %}
+                <p><strong>{% trans %}This response is published{% endtrans %}</strong></p>
+            {% endif %}
+            {{ answer.html }}
+        </div>
+        <div class="answer-controls post-controls">
+            {% include "question/answer_controls.html" %}
         </div>
+        {% include "question/answer_comments.html" %}
     </div>
     <div class="clean"></div>
 </div>
diff --git a/askbot/templates/question/question_card.html b/askbot/templates/question/question_card.html
index 91f8ee06..d0407dcb 100644
--- a/askbot/templates/question/question_card.html
+++ b/askbot/templates/question/question_card.html
@@ -1,40 +1,36 @@
-<div class="question-card">
+<div class="post question" data-post-id="{{ question.id }}">
     <div class="vote-buttons">
         {% include "question/question_vote_buttons.html" %}
         {% include "question/share_buttons.html" %}
     </div>
-    <div id="post-id-{{question.id}}" class="question-content{% if question.deleted %} deleted{% endif %}">
-        <div id="question-table">
-            <h1><a href="{{ question.get_absolute_url() }}">{{ thread.get_title(question)|escape }}</a></h1>
-            {% include "question/question_tags.html" %}
+    <div id="post-id-{{question.id}}" class="post-content{% if question.deleted %} deleted{% endif %}">
+        <h1><a href="{{ question.get_absolute_url() }}">{{ thread.get_title(question)|escape }}</a></h1>
+        {% include "question/question_tags.html" %}
+        <div class="clearfix"></div>
 
-            <div class="clearfix"></div>
-
-            <div class="question-body">
-                <div class="post-update-info-container">
-                    {% include "question/question_author_info.html" %}
-                </div>
-                {{ question.html }}
-            </div>
-            <div id="question-controls" class="post-controls">
-                {% include "question/question_controls.html" %}
+        <div class="post-body">
+            <div class="post-update-info-container">
+                {% include "question/question_author_info.html" %}
             </div>
-            <script type="text/javascript">
-                (function(){
-                    if (askbot['data']['userIsAuthenticated'] === false){
-                        var ctrl = document.getElementById('question-controls')
-                        ctrl.parentNode.removeChild(ctrl);
-                    }
-                })();
-            </script>
-            {% if thread.closed %}
-                <div class="clearfix"></div>
-                {# ==== START: question/closed_question_info.html ==== #}
-                {% include "question/closed_question_info.html" %}
-                {# ==== END: question/closed_question_info.html ==== #}
-            {% endif %}
-            {% include "question/question_comments.html" %}
+            {{ question.html }}
         </div>
-
+        <div id="question-controls" class="post-controls">
+            {% include "question/question_controls.html" %}
+        </div>
+        <script type="text/javascript">
+            (function(){
+                if (askbot['data']['userIsAuthenticated'] === false){
+                    var ctrl = document.getElementById('question-controls')
+                    ctrl.parentNode.removeChild(ctrl);
+                }
+            })();
+        </script>
+        {% if thread.closed %}
+            <div class="clearfix"></div>
+            {# ==== START: question/closed_question_info.html ==== #}
+            {% include "question/closed_question_info.html" %}
+            {# ==== END: question/closed_question_info.html ==== #}
+        {% endif %}
+        {% include "question/question_comments.html" %}
     </div>
 </div>
-- 
cgit v1.2.3-1-g7c22