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 switcher appearance

Browse source
This commit is contained in:
Fedor Katurov 2020-04-23 14:12:43 +07:00
parent b385df297a
commit 511a8b5768
3 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,14 +7,15 @@
.switcher { .switcher {
position: absolute; position: absolute;
background: darken($content_bg, 2%); // background: darken($content_bg, 2%);
background: url('../../../../src/sprites/noise.png') $main_bg_color;
display: flex; display: flex;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
top: 0; top: -5px;
border-radius: 24px; border-radius: 24px;
padding: 0 13px; padding: 0 3px;
flex-wrap: wrap; // flex-wrap: wrap;
transition: background-color 0.5s; transition: background-color 0.5s;
& > div { & > div {

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

@ -20,7 +20,7 @@ interface IProps {
const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => { const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
const [is_animated, setIsAnimated] = useState(false); const [is_animated, setIsAnimated] = useState(false);
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(window.innerHeight - 140); const [height, setHeight] = useState(window.innerHeight - 150);
const [loaded, setLoaded] = useState<Record<number, boolean>>({}); const [loaded, setLoaded] = useState<Record<number, boolean>>({});
const refs = useRef<Record<number, HTMLDivElement>>({}); const refs = useRef<Record<number, HTMLDivElement>>({});
@ -41,7 +41,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
useEffect(() => { useEffect(() => {
if (!refs || !refs.current[current] || !loaded[current]) if (!refs || !refs.current[current] || !loaded[current])
return setHeight(window.innerHeight - 140); return setHeight(window.innerHeight - 150);
const el = refs.current[current]; const el = refs.current[current];
const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height; const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;

4
src/components/node/NodeImageBlock/styles.scss
View file

@ -23,7 +23,7 @@
user-select: none; user-select: none;
.image { .image {
max-height: calc(100vh - 140px); max-height: calc(100vh - 150px);
max-width: 100%; max-width: 100%;
opacity: 1; opacity: 1;
border-radius: $radius; border-radius: $radius;
@ -52,7 +52,7 @@
.placeholder { .placeholder {
width: 100%; width: 100%;
height: calc(100vh - 140px); height: calc(100vh - 130px);
border-radius: $radius; border-radius: $radius;
display: flex; display: flex;
align-items: center; align-items: center;