Improve comment automarkup, include remarks_for_editors

comments/templates/comments/_add_comment_form.html

@@ -67,7 +67,10 @@
     Preview of your comment
   </div>
   <div class="card-content">
-    <div id="preview-comment_text"></div>
+    <div id="preview-comment_text" class="markup-preview"></div>
+    <div id="preview-remarks_for_editors-div" class="m-1 pt-1">
+      <strong>Remarks for editors (will not be publicly visible):</strong>
+      <div id="preview-remarks_for_editors" class="markup-preview"></div>
+    </div>
   </div>
 </div>
-<br>

comments/templates/comments/_single_comment.html

@@ -16,7 +16,7 @@
     {% include 'comments/_comment_voting_form.html' with comment=comment perms=perms user=user %}
   {% endif %}
 
-  <p class="my-3 pb-2">
+  <p class="my-2 pb-1">
     {{ comment.comment_text|automarkup }}
   </p>
 
@@ -35,8 +35,14 @@
 
   {% if is_editorial_college or is_edcol_admin %}
     {% if comment.remarks_for_editors %}
-      <h3>Remarks for editors:</h3>
-      <p>{{ comment.remarks_for_editors|automarkup }}</p>
+      <div class="card">
+	<div class="card-header">
+	  Remarks for editors (not publicly visible)
+	</div>
+	<div class="card-content p-2">
+	  {{ comment.remarks_for_editors|automarkup }}
+	</div>
+      </div>
     {% endif %}
   {% endif %}
 

comments/templates/comments/_vet_comment_form.html

@@ -18,25 +18,8 @@
   <div class="row">
     <div class="col-md-6">
       {% include 'comments/_single_comment.html' with comment=comment hide_votes=1 %}
-
-      {% if comment.file_attachment %}
-        <h3>Attachment:</h3>
-        <p>
-          <a target="_blank" href="{{ comment.get_attachment_url }}">
-            {% if comment.file_attachment|is_image %}
-              <img class="attachment attachment-comment" src="{{ comment.get_attachment_url }}">
-            {% else %}
-              {{ comment.file_attachment|filename }}<br><small>{{ comment.file_attachment.size|filesizeformat }}</small>
-            {% endif %}
-          </a>
-        </p>
-      {% endif %}
-
-      {% if comment.remarks_for_editors %}
-        <h3>Remarks for Editors only:</h3>
-        <p>{{ comment.remarks_for_editors|automarkup }}</p>
-      {% endif %}
     </div>
+
     <div class="col-md-6">
       <form action="{% url 'comments:vet_submitted_comment' comment_id=comment.id %}" method="post">
         {% csrf_token %}

scipost/static/scipost/SciPost.css

@@ -33,6 +33,14 @@ li ol > li:before {
   content: counters(item, ".") " ";
 }
 
+.markup-preview {
+    border: 1px solid black;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 1rem;
+    border-radius: 1.4px;
+}
+
 .opinionsDisplay {
   font-family: 'Merriweather Sans';
   font-size: 10px;
@@ -91,16 +99,6 @@ li ol > li:before {
   background-color: #990000;
 }
 
-
-
-#preview-comment_text {
-    border: 1px solid black;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    padding: 1rem;
-    border-radius: 1.4px;
-}
-
 /* Styling of sphinxdoc-generated docs */
 .pagination-top {
   background-color: #dddddd;

scipost/static/scipost/comment-preview.js

 $(document).ready(function() {
 
     $('#submitButton').hide();
+    $('#preview-remarks_for_editors-div').hide();
 
     $("#id_comment_text").on('keyup', function(){
 	$('#runPreviewButton').show();
 	$('#preview-comment_text').css('background', '#feebce');
 	$('#submitButton').hide();
     });
+    $("#id_remarks_for_editors").on('keyup', function(){
+	$('#runPreviewButton').show();
+	$('#preview-remarks_for_editors-div').show();
+	$('#preview-remarks_for_editors').css('background', '#feebce');
+	$('#submitButton').hide();
+    });
 
     $('#runPreviewButton').on('click', function(){
 	fetchMarkupPreview('comment_text');
+	fetchMarkupPreview('remarks_for_editors');
     	$('#runPreviewButton').hide();
     	$('#preview-comment_text').css('background', '#ffffff');
+    	$('#preview-remarks_for_editors').css('background', '#ffffff');
     	$('#submitButton').show();
     }).trigger('change');