History: anchors for comments

issues/templates/issues/history.html

@@ -53,6 +53,7 @@
         </div>
 
         <div class="border-slate-300 border-2 rounded-md mt-6 flex-auto js-balloon"><!-- the "balloon" -->
+            <a name="comment-{{ turningpoint.id }}"/>
             <div class="pl-4 flex triangle-left"><!-- 'header' row -->
                 <div class="mt-4 mb-4">
                     <span class="font-bold text-slate-800">{{ turningpoint.get_kind_display }}</span> by
@@ -61,14 +62,14 @@
             
                 <div class="ml-auto flex"> <!-- 'header' row right side -->
                     {% if turningpoint.user == request.user %}
-                    <div class="border-l-2 p-4 text-slate-800" onclick="makeCommentEditable(this)">
+                    <div class="border-l-2 p-4 text-slate-800" onclick="toggleCommentEditable(this)">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
 </svg>
                     </div>
                     {% endif %}
 
-                    <div class="border-l-2 p-4">
+                    <div class="border-l-2 p-4 w-40 text-right">
                         {{ turningpoint.timestamp|date:"j M G:i"  }}
                     </div>
                 </div>

issues/views.py

@@ -7,6 +7,7 @@ from django.db.models import Q
 from django.http import HttpResponseRedirect, HttpResponseNotAllowed
 from django.utils.safestring import mark_safe
 from django.template.defaultfilters import date
+from django.urls import reverse
 
 from events.models import Event
 from bugsink.decorators import project_membership_required, issue_membership_required
@@ -438,6 +439,6 @@ def history_comment_edit(request, issue, comment_pk):
         form = CommentForm(request.POST, instance=comment)
         assert form.is_valid()
         form.save()
-        return redirect(issue_history, issue_pk=issue.pk)
+        return redirect(reverse(issue_history, kwargs={'issue_pk': issue.pk}) + f"#comment-{ comment_pk }")
 
     raise HttpResponseNotAllowed()

static/js/issue_history.js

@@ -1,7 +1,7 @@
 "use strict";
 
-function makeCommentEditable(element) {
+function toggleCommentEditable(element) {
     const balloon = element.closest(".js-balloon");
-    balloon.querySelector(".js-comment-editable").classList.remove("hidden");
-    balloon.querySelector(".js-comment-plain").classList.add("hidden");
+    balloon.querySelector(".js-comment-editable").classList.toggle("hidden");
+    balloon.querySelector(".js-comment-plain").classList.toggle("hidden");
 }

theme/static/css/dist/styles.css

@@ -999,6 +999,26 @@ select {
   width: 1rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-40 {
+  width: 10rem;
+}
+
 .flex-\[2_1_96rem\] {
   flex: 2 1 96rem;
 }
@@ -1351,6 +1371,10 @@ select {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .align-top {
   vertical-align: top;
 }