From b385df297a3477e3a0324c5020dcee1a3c441f5a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 23 Apr 2020 11:56:02 +0700
Subject: [PATCH] fixed image switcher
---
src/components/node/ImageSwitcher/styles.scss | 22 ++++++-------------
src/components/node/NodeImageBlock/index.tsx | 14 ++++++------
2 files changed, 14 insertions(+), 22 deletions(-)
diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
index b54d77ba..dae7fef9 100644
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -2,24 +2,21 @@
width: 100%;
height: 0;
position: relative;
- z-index: 2;
+ z-index: 4;
}
.switcher {
position: absolute;
- background: transparentize(black, 0.5);
+ background: darken($content_bg, 2%);
display: flex;
- right: $gap;
- top: $gap;
+ left: 50%;
+ transform: translate(-50%, 0);
+ top: 0;
border-radius: 24px;
- padding: 0 3px;
+ padding: 0 13px;
flex-wrap: wrap;
transition: background-color 0.5s;
- &:hover {
- background: transparentize(black, 0.2);
- }
-
& > div {
width: 30px;
height: 30px;
@@ -28,19 +25,14 @@
display: flex;
align-items: center;
justify-content: center;
- opacity: 0.5;
transition: opacity 0.25s;
-
- &:hover {
- opacity: 1;
- }
+ opacity: 0.5;
&::after {
content: ' ';
display: block;
width: 14px;
height: 14px;
- // background: white;
border-radius: 8px;
box-shadow: inset white 0 0 0 2px;
transform: scale(0.5);
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 9fe22919..0741da31 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -62,13 +62,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
return (
<div className={classNames(styles.wrap, { is_loading, is_animated })}>
- <ImageSwitcher
- total={images.length}
- current={current}
- onChange={setCurrent}
- loaded={loaded}
- />
-
<div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
{(is_loading || !loaded[0] || !images.length) && (
<div className={styles.placeholder}>
@@ -94,6 +87,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
</div>
))}
</div>
+
+ <ImageSwitcher
+ total={images.length}
+ current={current}
+ onChange={setCurrent}
+ loaded={loaded}
+ />
</div>
);
};