From 24c3299512d2adeffb48d71db3a1a9047da9fce3 Mon Sep 17 00:00:00 2001 From: "J.-S. Caux" <J.S.Caux@uva.nl> Date: Tue, 22 Dec 2015 22:36:50 +0100 Subject: [PATCH] Commentaries complete, including categories and restyling. --- .../commentaries/commentary_detail.html | 350 ++++++++++-------- .../comments/author_reply_to_comment.html | 15 +- .../templates/comments/reply_to_comment.html | 43 ++- comments/views.py | 8 + scipost/static/scipost/SciPost.css | 136 +++++-- 5 files changed, 347 insertions(+), 205 deletions(-) diff --git a/commentaries/templates/commentaries/commentary_detail.html b/commentaries/templates/commentaries/commentary_detail.html index b88660554..baafcf059 100644 --- a/commentaries/templates/commentaries/commentary_detail.html +++ b/commentaries/templates/commentaries/commentary_detail.html @@ -13,7 +13,8 @@ $("#commentslist").toggle(); }); $("#ratingsbutton").click(function() { - $(".ratingsdata").toggle(); + $(".ratings").toggle(); + $(".ratingsinput").toggle(); }); }); </script> @@ -25,10 +26,10 @@ <section> <div class="row"> - <div class="col-11"> + <div class="col-10"> <h1>SciPost Commentary Page (for non-SciPost publications)</h1> </div> - <div class="col-1"> + <div class="col-2"> <br/> <button id="ratingsbutton">Toggle ratings view</button> </div> @@ -40,42 +41,53 @@ <div class="col-4"> <h2>Original publication: </h2> </div> - <div class="col-8"> - <ul class="ratingsdata"> - <li>Ratings: </li> - <li>clarity: {{ commentary.clarity_rating }}% ({{ commentary.nr_clarity_ratings }})</li> - <li>validity: {{ commentary.validity_rating }}% ({{ commentary.nr_validity_ratings }})</li> - <li>rigour: {{ commentary.rigour_rating }}% ({{ commentary.nr_rigour_ratings }})</li> - <li>originality: {{ commentary.originality_rating }}% ({{ commentary.nr_originality_ratings }})</li> - <li>significance: {{ commentary.significance_rating }}% ({{ commentary.nr_significance_ratings }})</li> - </ul> + </div> + <hr class="hr12"> + <div class="row"> + <div class="col-10"> + <table> + <tr><td>Title: </td><td>{{ commentary.pub_title }}</td></tr> + <tr><td>Author(s): </td><td>{{ commentary.author_list }}</td></tr> + <tr><td>arXiv link: </td><td><a href="{{ commentary.arxiv_link }}">{{ commentary.arxiv_link }}</a></td></tr> + <tr><td>DOI Link: </td><td><a href="{{ commentary.pub_DOI_link }}">{{ commentary.pub_DOI_link }}</a></td></tr> + <tr><td>Date published: </td><td>{{ commentary.pub_date }}</td></tr> + </table> </div> + + <div class="col-2"> + </div> + </div> - <br> - <table> - <tr><td>Title: </td><td>{{ commentary.pub_title }}</td></tr> - <tr><td>Author(s): </td><td>{{ commentary.author_list }}</td></tr> - <tr><td>arXiv link: </td><td><a href="{{ commentary.arxiv_link }}">{{ commentary.arxiv_link }}</a></td></tr> - <tr><td>DOI Link: </td><td><a href="{{ commentary.pub_DOI_link }}">{{ commentary.pub_DOI_link }}</a></td></tr> - <tr><td>Date published: </td><td>{{ commentary.pub_date }}</td></tr> - </table> - <br /> - <h3>Abstract:</h3> - <p>{{ commentary.pub_abstract }}</p> - - {% if user.is_authenticated and user.contributor.rank > 0 %} - <form action="{% url 'ratings:vote_on_commentary' commentary_id=commentary.id %}" method="post" class="ratingsdata"> - {% csrf_token %} - <ul> - <li>Rate this publication:</li> - {{ commentary_rating_form.as_ul }} - <li><input type="submit" value="Submit"></li> - </ul> - - </form> - {% endif %} + <div class="row"> + <div class="col-10"> + <h3>Abstract:</h3> + <p>{{ commentary.pub_abstract }}</p> + + <div class="ratings"> + <h4>Ratings:</h4> + <ul> + <li>clarity: {{ commentary.clarity_rating }}% ({{ commentary.nr_clarity_ratings }})</li> + <li>validity: {{ commentary.validity_rating }}% ({{ commentary.nr_validity_ratings }})</li> + <li>rigour: {{ commentary.rigour_rating }}% ({{ commentary.nr_rigour_ratings }})</li> + <li>originality: {{ commentary.originality_rating }}% ({{ commentary.nr_originality_ratings }})</li> + <li>significance: {{ commentary.significance_rating }}% ({{ commentary.nr_significance_ratings }})</li> + </ul> + </div> + <br /> + {% if user.is_authenticated and user.contributor.rank > 0 %} + <form action="{% url 'ratings:vote_on_commentary' commentary_id=commentary.id %}" method="post" class="ratingsinput"> + {% csrf_token %} + <ul> + {{ commentary_rating_form.as_ul }} + <li><input type="submit" value="Rate this publication"></li> + </ul> + </form> + {% endif %} + + </div> + </div> </section> @@ -93,125 +105,143 @@ <h2>Comments on this publication</h2> </div> <div class="col-2"> - <button id="commentsbutton">Toggle comments/ratings view</button> + <button id="commentsbutton">Toggle comments view</button> </div> </div> - <hr> + <hr class="hr12"> <div id="commentslist"> - {% for comment in comments %} - <div class="row"> - - <div class="col-4"> - <h3>{{ comment.id }} {% if comment.in_reply_to %} (in reply to {{ comment.in_reply_to.id }}) {% endif %}</h3> - <h4>Date: {{ comment.date_submitted }}</h4> - </div> - - <div class="col-8"> - <ul class="commentcategorydisplay"> - <li>Categories:</li> - {% if comment.is_rem %}<li>remark</li>{% endif %} - {% if comment.is_que %}<li>question</li>{% endif %} - {% if comment.is_ans %}<li>answer to question</li>{% endif %} - {% if comment.is_obj %}<li>objection</li>{% endif %} - {% if comment.is_rep %}<li>reply to objection</li>{% endif %} - {% if comment.is_val %}<li>validation or rederivation</li>{% endif %} - {% if comment.is_lit %}<li>pointer to related literature</li>{% endif %} - {% if comment.is_sug %}<li>suggestion for further work</li>{% endif %} - </ul> - <br/><br/> - <ul class="ratingsdata"> - <li>Ratings: </li> - <li>relevance: {{ comment.relevance_rating }}% ({{ comment.nr_relevance_ratings }})</li> - <li>importance: {{ comment.importance_rating }}% ({{ comment.nr_importance_ratings }})</li> - <li>clarity: {{ comment.clarity_rating }}% ({{ comment.nr_clarity_ratings }})</li> - <li>validity: {{ comment.validity_rating }}% ({{ comment.nr_validity_ratings }})</li> - <li>rigour: {{ comment.rigour_rating }}% ({{ comment.nr_rigour_ratings }})</li> - </ul> - </div> - </div> + {% for comment in comments %} + + <div class="row"> + + <div class="col-3"> + <div class="commentid"> + <span> + <h3>{{ comment.id }} {% if comment.in_reply_to %} (in reply to {{ comment.in_reply_to.id }}) {% endif %}</h3> + <h4>Date: {{ comment.date_submitted }}</h4> + </span> + </div> + </div> + + <div class="col-9"> + <div class="commentcategorydisplay"> + <h4>Category:</h4> + <ul> + {% if comment.is_rem %}<li>remark</li>{% endif %} + {% if comment.is_que %}<li>question</li>{% endif %} + {% if comment.is_ans %}<li>answer to question</li>{% endif %} + {% if comment.is_obj %}<li>objection</li>{% endif %} + {% if comment.is_rep %}<li>reply to objection</li>{% endif %} + {% if comment.is_val %}<li>validation or rederivation</li>{% endif %} + {% if comment.is_lit %}<li>pointer to related literature</li>{% endif %} + {% if comment.is_sug %}<li>suggestion for further work</li>{% endif %} + </ul> + </div> + <br/> + <div class="ratings"> + <h4>Ratings:</h4> + <ul> + <li>Relevance: {{ comment.relevance_rating }}% ({{ comment.nr_relevance_ratings }})</li> + <li>Importance: {{ comment.importance_rating }}% ({{ comment.nr_importance_ratings }})</li> + <li>Clarity: {{ comment.clarity_rating }}% ({{ comment.nr_clarity_ratings }})</li> + <li>Validity: {{ comment.validity_rating }}% ({{ comment.nr_validity_ratings }})</li> + <li>Rigour: {{ comment.rigour_rating }}% ({{ comment.nr_rigour_ratings }})</li> + </ul> + </div> + + </div> - <div class="row"> -<!-- <div class="col-1"></div> --> - <div class="col-10"> - <p>{{ comment.comment_text|linebreaks }}</p> </div> - </div> - {% if user.is_authenticated and user.contributor.rank > 0 %} - <div class="row"> -<!-- <div class="col-1"></div> --> - <div class="col-10"> - <form action="{% url 'ratings:vote_on_comment' comment_id=comment.id %}" method="post" class="ratingsdata"> - {% csrf_token %} - <ul> - <li>Rate this comment:</li> - {{ comment_rating_form.as_ul }} - <li><input type="submit" value="Submit"></li> - </ul> - </form> + <div class="row"> + <div class="col-1"></div> + <div class="col-10"> + <h3>Comment text:</h3> + <div class="twocolumn">{{ comment.comment_text|linebreaks }}</div> + + <br/> + <div class="ratingsinput"> + {% if user.is_authenticated and user.contributor.rank > 0 %} + <!-- <h4>Rate this comment:</h4> --> + <form action="{% url 'ratings:vote_on_comment' comment_id=comment.id %}" method="post"> + {% csrf_token %} + <ul> + {{ comment_rating_form.as_ul }} + <li><input type="submit" value="Rate this comment"></li> + </ul> + </form> + {% endif %} + </div> + + </div> </div> - </div> - {% endif %} - - {% for reply in author_replies %} - {% if reply.in_reply_to_comment.id = comment.id %} - - <div class="row"> - <div class="col-1"></div> - <hr style="border-style: dotted;" /> - <div class="col-3"> - <h3>Author reply ({{ reply.date_submitted }}):</h3> - </div> - <div class="col-8"> - <ul class="ratingsdata"> - <li>Ratings: </li> - <li>relevance: {{ reply.relevance_rating }}% ({{ reply.nr_relevance_ratings }})</li> - <li>importance: {{ reply.importance_rating }}% ({{ reply.nr_importance_ratings }})</li> - <li>clarity: {{ reply.clarity_rating }}% ({{ reply.nr_clarity_ratings }})</li> - <li>validity: {{ reply.validity_rating }}% ({{ reply.nr_validity_ratings }})</li> - <li>rigour: {{ reply.rigour_rating }}% ({{ reply.nr_rigour_ratings }})</li> - </ul> + + {% for reply in author_replies %} + {% if reply.in_reply_to_comment.id = comment.id %} + + <div class="row"> + <div class="col-1"></div> + <hr style="border-style: dotted;" /> + <div class="col-3"> + <h3>Author reply ({{ reply.date_submitted }}):</h3> + </div> + <div class="col-8"> + <div class="ratings"> + <h4>Ratings: </h4> + <ul> + <li>relevance: {{ reply.relevance_rating }}% ({{ reply.nr_relevance_ratings }})</li> + <li>importance: {{ reply.importance_rating }}% ({{ reply.nr_importance_ratings }})</li> + <li>clarity: {{ reply.clarity_rating }}% ({{ reply.nr_clarity_ratings }})</li> + <li>validity: {{ reply.validity_rating }}% ({{ reply.nr_validity_ratings }})</li> + <li>rigour: {{ reply.rigour_rating }}% ({{ reply.nr_rigour_ratings }})</li> + </ul> + </div> + </div> </div> - </div> - <div class="row"> - <div class="col-1"></div> - <div class="col-10"> - <p>{{ reply.reply_text|linebreaks }}</p> + <div class="row"> + <div class="col-1"></div> + <div class="col-10"> + <p>{{ reply.reply_text|linebreaks }}</p> + </div> </div> - </div> - {% if user.is_authenticated and user.contributor.rank > 0 %} - <div class="row"> - <div class="col-1"></div> - <div class="col-10"> - <form action="{% url 'ratings:vote_on_authorreply' authorreply_id=reply.id %}" method="post" class="ratingsdata"> - {% csrf_token %} - <ul> - <li>Rate this author reply:</li> - {{ authorreply_rating_form.as_ul }} - <li><input type="submit" value="Submit"></li> - </ul> - </form> + {% if user.is_authenticated and user.contributor.rank > 0 %} + <div class="row"> + <div class="col-1"></div> + <div class="col-10"> + <div class="ratingsinput"> + <form action="{% url 'ratings:vote_on_authorreply' authorreply_id=reply.id %}" method="post"> + {% csrf_token %} + <ul> + {{ authorreply_rating_form.as_ul }} + <li><input type="submit" value="Rate this author reply"></li> + </ul> + </form> + </div> + </div> </div> - </div> - {% endif %} - - {% endif %} - {% endfor %} - - {% if user.is_authenticated and user.contributor.rank > 0 %} - <hr style="border-style: dotted;" /> - <div class="row"> - <div class="col-6"> - <h3><a href="{% url 'comments:author_reply_to_comment' comment_id=comment.id %}">Reply to this comment (Author)</a></h3> + {% endif %} + + {% endif %} + {% endfor %} + + {% if user.is_authenticated and user.contributor.rank > 0 %} + <div class="row"> + <div class="col-1"></div> + <hr class="hr6"/> </div> - <div class="col-6"> - <h3><a href="{% url 'comments:reply_to_comment' comment_id=comment.id %}">Reply to this comment (Contributor)</a></h3> + <div class="row"> + <div class="col-1"></div> + <div class="col-5"> + <h3><a href="{% url 'comments:author_reply_to_comment' comment_id=comment.id %}">Reply to this comment (Author)</a></h3> + </div> + <div class="col-5"> + <h3><a href="{% url 'comments:reply_to_comment' comment_id=comment.id %}">Reply to this comment (Contributor)</a></h3> + </div> </div> - </div> - <hr> - {% endif %} - {% endfor %} + <hr class="hr12"> + {% endif %} + {% endfor %} </div id="commentslist"> </section> {% endif %} @@ -221,28 +251,32 @@ <div class="row"> <div class="col-3"> <h1>Contribute a Comment</h1> - <p>Specify whick category your comment belongs to (you can choose more than one).</p> + <p>Specify which category your comment belongs to (you can choose more than one).</p> <p>In your comment, you can use LaTeX \$...\$ for in-text equations or \ [ ... \ ] for separate equations.</p> </div> <div class="col-9"> <form action="{% url 'commentaries:commentary' commentary.id %}" method="post"> {% csrf_token %} - <div class="col-4"> - <ul class="commentcategorychoices"> - <li>{{ form.is_rem }} remark</li> - <li>{{ form.is_que }} question</li> - <li>{{ form.is_ans }} answer to question</li> - <li>{{ form.is_obj }} objection</li> - <li>{{ form.is_rep }} reply to objection</li> - <li>{{ form.is_val }} validation or rederivation</li> - <li>{{ form.is_lit }} pointer to related literature</li> - <li>{{ form.is_sug }} suggestion for further work</li> - </ul> - </div> - <div class="col-1"></div> - <div class="col-7"> - {{ form.comment_text }} - <input type="submit" value="Submit your Comment"> + <div class="row"> + <div class="col-4"> + <ul class="commentcategorychoices"> + <li><h3>Specify categorization:</h3></li> + <li>{{ form.is_rem }} remark</li> + <li>{{ form.is_que }} question</li> + <li>{{ form.is_ans }} answer to question</li> + <li>{{ form.is_obj }} objection</li> + <li>{{ form.is_rep }} reply to objection</li> + <li>{{ form.is_val }} validation or rederivation</li> + <li>{{ form.is_lit }} pointer to related literature</li> + <li>{{ form.is_sug }} suggestion for further work</li> + </ul> + </div> + <div class="col-1"></div> + <div class="col-7"> + <h3>Write your comment here:</h3> + {{ form.comment_text }} + <input type="submit" value="Submit your Comment"> + </div> </div> </form> </div> diff --git a/comments/templates/comments/author_reply_to_comment.html b/comments/templates/comments/author_reply_to_comment.html index ce9dd359d..86a1e6b68 100644 --- a/comments/templates/comments/author_reply_to_comment.html +++ b/comments/templates/comments/author_reply_to_comment.html @@ -44,18 +44,13 @@ <hr> <h2>The Comment you wish to reply to:</h2> <div class="row"> - <div class="col-9"> + <div class="col-1"></div> + <div class="col-10"> <h4>Date: {{ comment.date_submitted }}</h4> - <p>{{ comment.comment_text }}</p> - </div> - <div class="col-3"> - <table> - <th>Ratings:</th><th>(nr: {{ comment.nr_ratings }})</th> - <tr><td>clarity: </td><td>{{ comment.clarity_rating }}%</td></tr> - <tr><td>correctness: </td><td>{{ comment.correctness_rating }}%</td></tr> - <tr><td>usefulness: </td><td>{{ comment.usefulness_rating }}%</td></tr> - </table> + <h3>Comment text:</h3> + <div class="twocolumn">{{ comment.comment_text|linebreaks }}</div> </div> + </div> <hr> diff --git a/comments/templates/comments/reply_to_comment.html b/comments/templates/comments/reply_to_comment.html index 894cced57..9749e7908 100644 --- a/comments/templates/comments/reply_to_comment.html +++ b/comments/templates/comments/reply_to_comment.html @@ -49,32 +49,51 @@ <hr> <h2>The Comment you wish to reply to:</h2> <div class="row"> - <div class="col-9"> + <div class="col-1"></div> + <div class="col-10"> <h4>Date: {{ comment.date_submitted }}</h4> - <p>{{ comment.comment_text }}</p> - </div> - <div class="col-3"> - <table> - <th>Ratings:</th><th>(nr: {{ comment.nr_ratings }})</th> - <tr><td>clarity: </td><td>{{ comment.clarity_rating }}%</td></tr> - <tr><td>correctness: </td><td>{{ comment.correctness_rating }}%</td></tr> - <tr><td>usefulness: </td><td>{{ comment.usefulness_rating }}%</td></tr> - </table> + <div class="twocolumn">{{ comment.comment_text|linebreaks }}</div> </div> </div> <hr> <div class="row"> - <div class="col-2"> + <div class="col-3"> <h1>Write your Reply to this Comment here:</h1> </div> - <div class="col-10"> + + <div class="col-9"> <form action="{% url 'comments:reply_to_comment' comment.id %}" method="post"> {% csrf_token %} + <div class="row"> + <div class="col-4"> + <ul class="commentcategorychoices"> + <li><h3>Specify categorization:</h3></li> + <li>{{ form.is_rem }} remark</li> + <li>{{ form.is_que }} question</li> + <li>{{ form.is_ans }} answer to question</li> + <li>{{ form.is_obj }} objection</li> + <li>{{ form.is_rep }} reply to objection</li> + <li>{{ form.is_val }} validation or rederivation</li> + <li>{{ form.is_lit }} pointer to related literature</li> + <li>{{ form.is_sug }} suggestion for further work</li> + </ul> + </div> + <div class="col-1"></div> + <div class="col-7"> + <h3>Write your comment here:</h3> + {{ form.comment_text }} + <input type="submit" value="Submit your Reply"> + </div> + </div> +<!-- {{ form }} <input type="submit" value="Submit your Reply"> +--> </form> </div> + + </div> </section> {% endif %} diff --git a/comments/views.py b/comments/views.py index 33337e719..751cc881e 100644 --- a/comments/views.py +++ b/comments/views.py @@ -75,6 +75,14 @@ def reply_to_comment(request, comment_id): submission = comment.submission, in_reply_to = comment, author = Contributor.objects.get(user=request.user), + is_rem = form.cleaned_data['is_rem'], + is_que = form.cleaned_data['is_que'], + is_ans = form.cleaned_data['is_ans'], + is_obj = form.cleaned_data['is_obj'], + is_rep = form.cleaned_data['is_rep'], + is_val = form.cleaned_data['is_val'], + is_lit = form.cleaned_data['is_lit'], + is_sug = form.cleaned_data['is_sug'], comment_text = form.cleaned_data['comment_text'], date_submitted = timezone.now(), ) diff --git a/scipost/static/scipost/SciPost.css b/scipost/static/scipost/SciPost.css index a9693075c..c99ddc7d9 100644 --- a/scipost/static/scipost/SciPost.css +++ b/scipost/static/scipost/SciPost.css @@ -36,11 +36,117 @@ General style sheet for SciPost } } +hr.hr6 { + height: 6px; + border: 0; + box-shadow: inset 0 6px 6px -6px rgba(0, 0, 0, 0.5); +} +hr.hr12 { + height: 12px; + border: 0; + box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); +} -.ratingsdata select { - font-size: 40%; +.commentcategorychoices { + list-style-type: none; // for categorizing comments +} +.commentcategorydisplay { + display: inline-block; + margin: 4px; 4px; + padding: 1px; + box-shadow: 1px 1px 3px #888888; + background: linear-gradient(to right,#fcfcfc, #f0f0f0); +} +.commentcategorydisplay h4, .commentcategorydisplay ul { + display: inline-block; + margin: 2px; + padding: 0px; +} +.commentcategorydisplay li { + display: inline-block; + margin: 4px; + padding: 4px 8px; + background-color: #dddddd; + font-size: 90%; } +.commentid { + display: inline-block; + box-shadow: 5px 5px 10px #888888; + background: linear-gradient(to right,#f8f8f8, #e0e0e0); +} + +.ratings { + margin: 4px 4px; + padding: 1px; + display: inline-block; + box-shadow: 1px 1px 3px #888888; + background: linear-gradient(to right,#fcfcfc, #f0f0f0); +} +.ratings h4 { + display: inline-block; +} +.ratings ul { + display: inline-block; +} +.ratings li { + display: inline-block; + margin: 2px; + padding: 4px 8px; + color: #ffffff; + background-color: #204080; + font-size: 80%; +} + +.ratingsinput { + margin: 1px; + padding: 4px; + display: inline-block; +// box-shadow: 1px 1px 3px #888888; +// background: linear-gradient(to right,#fcfcfc, #f0f0f0); +} +.ratingsinput h4, .ratingsinput form { + display: inline-block; +} +.ratingsinput ul { + display: inline-block; + background-color: #204080; + color: #ffffff; + padding: 2px; + box-shadow: 1px 1px 3px #888888; +} +.ratingsinput ul li { +// color: #ffffff; + display: inline-block; + margin: 0px; + padding: 0px 4px; +} +.ratingsinput label { + color: #ffffff; + font-size: 80%; +} +.ratingsinput input { + margin: 0px; +} +.ratingsinput select { + margin: 0px; + padding: 0px; + height: 6px; +} + + +.twocolumn { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; + -webkit-column-width: 360px; /* Chrome, Safari, Opera */ + column-width: 360px; + -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ + -moz-column-rule-width: 1px; /* Firefox */ + column-rule-width: 1px; +} + + body { // font-family: Verdana, sans-serif; font-family: Helvetica Neue, sans-serif; @@ -67,23 +173,6 @@ a:hover { } -.commentcategorychoices { - list-style-type: none; // for categorizing comments -} -.commentcategorydisplay { - list-style-type: circle; - display: inline; -} -.commentcategorydisplay li { - float: left; - list-style-type: square; - padding: 2px 5px; - margin: 1px 0px; - background-color: #eeeeee; - border-right: 1px solid black; -} - - header { // background-color: #333333; // background-color: #102040; @@ -263,6 +352,7 @@ section table th, td { section ul { margin: 0px; } + section ul.ratingsdata { display: inline-block; padding: 2px; @@ -275,7 +365,7 @@ section ul.ratingsdata { font-size: 90%; } section ul.ratingsdata li{ - display: inline; +// display: inline; padding: 2px 2px; color: #ffffff; } @@ -291,7 +381,7 @@ section form.ratingsdata ul { font-size: 90%; } section form.ratingsdata ul li { - display: inline; +// display: inline; padding: 0px 2px; color: #ffffff; } @@ -299,10 +389,6 @@ section form.ratingsdata ul li label { color: #ffffff; } -section div table.ratings { - font-size: 90%; - color: #ffffff; -} article { background-color:#eeeeee; -- GitLab