IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

highlight comment targeted in anchor link

Browse Source
This commit is contained in:
Alina Beck 2019-10-15 12:09:01 +03:00
parent 6e10a1063c
commit cd9f2633d7
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webapp/components/Comment/Comment.vue
View File

@ -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>