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

fixed image sliders appearance for square images

Browse source
This commit is contained in:
Fedor Katurov 2020-04-24 14:42:13 +07:00
parent ad2c8dca80
commit 38fd09cfe1
4 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/node/ImageSwitcher/styles.scss
View file

@ -12,7 +12,7 @@
display: flex; display: flex;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
top: -5px; top: -60px;
border-radius: 24px; border-radius: 24px;
padding: 0 3px; padding: 0 3px;
// flex-wrap: wrap; // flex-wrap: wrap;

2
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -183,7 +183,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
setIsDragging(false); setIsDragging(false);
normalizeOffset(); normalizeOffset();
if (+new Date() - drag_start < 300) { if (Math.abs(+new Date() - drag_start) < 200) {
// click detection // click detection
onOpenPhotoSwipe(); onOpenPhotoSwipe();
} }

6
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -4,8 +4,8 @@
min-width: 0; min-width: 0;
transition: height 0.25s; transition: height 0.25s;
border-radius: $radius; border-radius: $radius;
margin-right: -10px; margin-right: -$gap / 2;
margin-left: -10px; margin-left: -$gap / 2;
.is_loading { .is_loading {
.placeholder { .placeholder {
@ -51,7 +51,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 10px; padding: 0 $gap / 2;
&:global(.is_active) { &:global(.is_active) {
opacity: 1; opacity: 1;

3
src/redux/node/constants.ts
View file

@ -89,7 +89,8 @@ type INodeComponents = Record<
>; >;
export const NODE_HEADS: INodeComponents = { export const NODE_HEADS: INodeComponents = {
[NODE_TYPES.IMAGE]: NodeImageBlock, // [NODE_TYPES.IMAGE]: NodeImageBlock,
[NODE_TYPES.IMAGE]: NodeImageSlideBlock,
}; };
export const NODE_COMPONENTS: INodeComponents = { export const NODE_COMPONENTS: INodeComponents = {