From cd9f2633d732c1181e8326c1e99097bb0a3d0dcf Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 15 Oct 2019 12:09:01 +0300
Subject: [PATCH] highlight comment targeted in anchor link

---
 webapp/components/Comment/Comment.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 534c45e6b..ab3230e97 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -10,7 +10,7 @@
     </ds-card>
   </div>
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
-    <ds-card :id="anchor">
+    <ds-card :id="anchor" :class="{ 'comment--target': isTarget }">
       <ds-space margin-bottom="small" margin-top="small">
         <hc-user :user="author" :date-time="comment.createdAt">
           <template v-slot:dateTime>
@@ -116,6 +116,9 @@ export default {
       user: 'auth/user',
       isModerator: 'auth/isModerator',
     }),
+    isTarget() {
+      return this.$route.hash === `#${this.anchor}`
+    },
     anchor() {
       return `commentId-${this.comment.id}`
     },
@@ -204,4 +207,17 @@ span.show-more-or-less {
   margin: 0px 20px;
   cursor: pointer;
 }
+
+@keyframes highlight {
+  0% {
+    border: 1px solid $color-primary;
+  }
+  100% {
+    border: 1px solid transparent;
+  }
+}
+
+.comment--target {
+  animation: highlight 4s ease;
+}
 </style>