diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss index 4824443b..69a5f869 100644 --- a/src/components/node/NodeImageSlideBlock/styles.scss +++ b/src/components/node/NodeImageSlideBlock/styles.scss @@ -16,6 +16,7 @@ position: relative; overflow: hidden; user-select: none; + will-change: transform, height; .image { max-height: 960px; diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx index 3364f0f8..92719751 100644 --- a/src/components/node/NodePanelInner/index.tsx +++ b/src/components/node/NodePanelInner/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; +import React, { FC } from 'react'; import * as styles from './styles.scss'; import { Group } from '~/components/containers/Group'; import { Filler } from '~/components/containers/Filler'; @@ -17,7 +17,7 @@ interface IProps { } const NodePanelInner: FC = ({ - node: { title, user }, + node: { title, user, is_liked }, stack, can_edit, can_like, @@ -41,8 +41,12 @@ const NodePanelInner: FC = ({ )} {can_like && ( -
- +
+ {is_liked ? ( + + ) : ( + + )}
)}
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss index 133cb699..f79e771a 100644 --- a/src/components/node/NodePanelInner/styles.scss +++ b/src/components/node/NodePanelInner/styles.scss @@ -124,3 +124,39 @@ .sep { } + +@keyframes pulse { + 0% { + transform: scale(1); + } + + 45% { + transform: scale(1); + } + + 60% { + transform: scale(1.25); + } + + 75% { + transform: scale(1); + } + + 90% { + transform: scale(1.25); + } + + 100% { + transform: scale(1); + } +} + +.like { + transition: fill, stroke 0.25s; + will-change: transform; + + &:hover { + fill: $red; + animation: pulse 0.75s infinite; + } +} diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index c4631a4f..391f9a54 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -49,6 +49,11 @@ const Sprites: FC<{}> = () => ( + + + + +