diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss index 6efe6dab..4fb81734 100644 --- a/src/components/node/ImageSwitcher/styles.scss +++ b/src/components/node/ImageSwitcher/styles.scss @@ -12,7 +12,7 @@ display: flex; left: 50%; transform: translate(-50%, 0); - top: -5px; + top: -60px; border-radius: 24px; padding: 0 3px; // flex-wrap: wrap; diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 397a8a79..93509aaf 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -183,7 +183,7 @@ const NodeImageSlideBlock: FC = ({ setIsDragging(false); normalizeOffset(); - if (+new Date() - drag_start < 300) { + if (Math.abs(+new Date() - drag_start) < 200) { // click detection onOpenPhotoSwipe(); } diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss index c703829b..710854cb 100644 --- a/src/components/node/NodeImageSlideBlock/styles.scss +++ b/src/components/node/NodeImageSlideBlock/styles.scss @@ -4,8 +4,8 @@ min-width: 0; transition: height 0.25s; border-radius: $radius; - margin-right: -10px; - margin-left: -10px; + margin-right: -$gap / 2; + margin-left: -$gap / 2; .is_loading { .placeholder { @@ -51,7 +51,7 @@ display: flex; align-items: center; justify-content: center; - padding: 0 10px; + padding: 0 $gap / 2; &:global(.is_active) { opacity: 1; diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 1ea26f18..ad90d481 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -89,7 +89,8 @@ type INodeComponents = Record< >; export const NODE_HEADS: INodeComponents = { - [NODE_TYPES.IMAGE]: NodeImageBlock, + // [NODE_TYPES.IMAGE]: NodeImageBlock, + [NODE_TYPES.IMAGE]: NodeImageSlideBlock, }; export const NODE_COMPONENTS: INodeComponents = {