muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

added like count to nodes

Browse source
This commit is contained in:
Fedor Katurov 2020-05-08 18:00:39 +07:00
parent 7f372bb025
commit 5c1610218d
6 changed files with 39 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/node/NodePanelInner/index.tsx
View file

@ -26,7 +26,7 @@ interface IProps {
const NodePanelInner: FC<IProps> = memo(
({
node: { title, user, is_liked, is_heroic, deleted_at, created_at },
node: { title, user, is_liked, is_heroic, deleted_at, created_at, like_count },
stack,
can_star,
@ -53,7 +53,7 @@ const NodePanelInner: FC<IProps> = memo(
{is_loading ? (
<Placeholder width="100px" />
) : (
`~${user.username}, ${getPrettyDate(created_at)}`
`~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}`
)}
</div>
)}
@ -95,6 +95,8 @@ const NodePanelInner: FC<IProps> = memo(
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
{like_count > 0 && <div className={styles.like_count}>{like_count}</div>}
</div>
)}
</div>

25
src/components/node/NodePanelInner/styles.scss
View file

@ -214,19 +214,44 @@
.like {
transition: fill, stroke 0.25s;
will-change: transform;
position: relative;
&:global(.is_liked) {
svg {
fill: $red;
}
.like_count {
color: $red;
}
}
&:hover {
fill: $red;
animation: pulse 0.75s infinite;
.like_count {
opacity: 0;
}
}
}
.like_count {
position: absolute;
font: $font_12_bold;
left: 16px;
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $node_bg;
padding: 0 3px;
border-radius: 10px;
z-index: 3;
color: transparentize($color: white, $amount: 0.5);
pointer-events: none;
touch-action: none;
}
.star {
transition: fill, stroke 0.25s;
will-change: transform;