diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 44e97b93..aafb654c 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -272,7 +272,7 @@ const NodeImageSlideBlock: FC = ({
@@ -295,32 +295,46 @@ const NodeImageSlideBlock: FC = ({ images.map((file, index) => (
- { - // check if metadata is available, then show loader - } - - - + + + - + = ({ filter="url(#f1)" /> - { - - } + +
))}
diff --git a/src/components/node/NodeImageSlideBlock/styles.module.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss index e821d329..ee38720f 100644 --- a/src/components/node/NodeImageSlideBlock/styles.module.scss +++ b/src/components/node/NodeImageSlideBlock/styles.module.scss @@ -39,18 +39,6 @@ transition: none; } - .image { - max-width: 100%; - opacity: 1; - border-radius: $radius; - box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px, - transparentize($color: #000000, $amount: 0.6) 0 2px 5px; - - @include tablet { - border-radius: 0; - } - } - &.is_dragging { transition: none; } @@ -67,7 +55,7 @@ padding: 0 $gap / 2; position: relative; - &:global(.is_active) { + &.is_active { opacity: 1; } @@ -170,3 +158,28 @@ fill: white; } } + +.image, .preview { + max-width: 100%; + border-radius: $radius; + + @include tablet { + border-radius: 0; + } +} + +.image { + position: absolute; + opacity: 0; + + &.is_loaded { + opacity: 1; + position: static; + } +} + +.preview { + &.is_loaded { + display: none; + } +}