Add reply highlighting

If a user hovers over a reply link, that reply is highlighted.
Obviously, this is only useful if the reply is on-screen.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>

board/static/board/post.js

@@ -346,6 +346,16 @@ $(window).on("load", () => {
         }
     });
 
+    $(".post_link").on("mouseover", (e) => {
+        let postId = $(e.target).attr("data-post-id");
+        $("#p" + postId + ".post").addClass("post_highlight");
+    });
+
+    $(".post_link").on("mouseout", (e) => {
+        let postId = $(e.target).attr("data-post-id");
+        $("#p" + postId + ".post").removeClass("post_highlight");
+    });
+
     $(".youtube_embed_link").on("click", (e) => {
         e.preventDefault();
         let fullEnt = $(e.target).parents(".youtube_embed");

board/static/board/style.css

@@ -1,6 +1,7 @@
 :root {
     --body: #ededed;
-    --highlight: #555;
+    --highlight: #aaa;
+    --link: #555;
     --border-color: #555;
     --name: #060;
     --quote: #595;
@@ -121,6 +122,10 @@ th {
     float: right;
 }
 
+.post_highlight {
+    background-color: var(--highlight);
+}
+
 .thread {
     background-color: var(--post-background);
     padding: 10px;
@@ -169,9 +174,6 @@ th {
     right: 0px;
 }
 
-/* Youtube embeds */
-
-
 /* Spoilers */
 
 .spoiler {
@@ -200,11 +202,11 @@ nav {
 /* Misc */
 
 a:link {
-    color: var(--highlight);
+    color: var(--link);
 }
 
 a:visited {
-    color: var(--highlight);
+    color: var(--link);
 }
 
 a:hover {

board/templatetags/post_body.py

@@ -105,7 +105,10 @@ class ReplyBuilder:
             self.adv()
         post = Post.objects.filter(id=int(post_id)).first()
         if post:
-            self.final += f'<a class="post_link" href="{post.get_absolute_url()}">&gt;&gt;{post_id}</a>'
+            self.final += (
+                f'<a class="post_link" href="{post.get_absolute_url()}" '
+                f'data-post-id="{post_id}">&gt;&gt;{post_id}</a>'
+            )
         else:
             self.final += f'<span class="post_link_broken">&gt;&gt;{post_id}</span>'