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

fixed image switcher

Browse source
This commit is contained in:
Fedor Katurov 2020-04-23 11:56:02 +07:00
parent 79c5c3be8d
commit b385df297a
2 changed files with 14 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,24 +2,21 @@
width: 100%; width: 100%;
height: 0; height: 0;
position: relative; position: relative;
z-index: 2; z-index: 4;
} }
.switcher { .switcher {
position: absolute; position: absolute;
background: transparentize(black, 0.5); background: darken($content_bg, 2%);
display: flex; display: flex;
right: $gap; left: 50%;
top: $gap; transform: translate(-50%, 0);
top: 0;
border-radius: 24px; border-radius: 24px;
padding: 0 3px; padding: 0 13px;
flex-wrap: wrap; flex-wrap: wrap;
transition: background-color 0.5s; transition: background-color 0.5s;
&:hover {
background: transparentize(black, 0.2);
}
& > div { & > div {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -28,19 +25,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.5;
transition: opacity 0.25s; transition: opacity 0.25s;
opacity: 0.5;
&:hover {
opacity: 1;
}
&::after { &::after {
content: ' '; content: ' ';
display: block; display: block;
width: 14px; width: 14px;
height: 14px; height: 14px;
// background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: inset white 0 0 0 2px; box-shadow: inset white 0 0 0 2px;
transform: scale(0.5); transform: scale(0.5);

14
src/components/node/NodeImageBlock/index.tsx
View file

@ -62,13 +62,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
return ( return (
<div className={classNames(styles.wrap, { is_loading, is_animated })}> <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}> <div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
{(is_loading || !loaded[0] || !images.length) && ( {(is_loading || !loaded[0] || !images.length) && (
<div className={styles.placeholder}> <div className={styles.placeholder}>
@ -94,6 +87,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
</div> </div>
))} ))}
</div> </div>
<ImageSwitcher
total={images.length}
current={current}
onChange={setCurrent}
loaded={loaded}
/>
</div> </div>
); );
}; };