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

fixed appearance for mobile

Browse source
This commit is contained in:
Fedor Katurov 2019-10-30 17:45:42 +07:00
parent 89a0cdd970
commit 8294c20d04
4 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/flow/Cell/styles.scss
View file

@ -59,6 +59,10 @@
box-sizing: border-box;
word-break: break-word;
@media (max-width: $cell * 2) {
font: $font_18_semibold;
}
}
.title {
@ -221,6 +225,7 @@
@media (max-width: $cell * 2 + $grid_line) {
right: 0;
top: 0;
display: none;
}
}

4
src/components/flow/FlowGrid/styles.scss
View file

@ -44,9 +44,9 @@ $stamp_color: $content_bg;
}
@media (max-width: $cell * 2) {
grid-template-columns: repeat(1, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 40vh 75vw;
grid-auto-rows: 75vw;
grid-auto-rows: 50vw;
grid-column-gap: $gap;
grid-row-gap: $gap;
}

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

@ -37,6 +37,11 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
[node]
);
useEffect(() => {
setLoaded({});
refs.current = {};
}, [images]);
const updateSizes = useCallback(() => {
const values = Object.keys(refs.current).reduce((obj, key) => {
const ref = refs.current[key];
@ -53,7 +58,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
index => el => {
refs.current[index] = el;
},
[refs, heights, setHeights]
[refs, heights, setHeights, images]
);
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
@ -62,8 +67,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
]);
// update outside hooks
useEffect(() => updateLayout(), [loaded, height]);
useEffect(() => updateSizes(), [refs, current, loaded]);
useEffect(() => updateLayout(), [loaded, height, images]);
useEffect(() => updateSizes(), [refs, current, loaded, images]);
useEffect(() => {
if (!wrap || !wrap.current) return;
@ -77,7 +82,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
if (current !== Math.round(selected)) setCurrent(Math.round(selected));
setHeight(now);
}, [offset, heights, max_height]);
}, [offset, heights, max_height, images]);
const onDrag = useCallback(
event => {
@ -136,7 +141,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
[setIsDragging, setInitialX, offset, setInitialOffset]
);
useEffect(() => updateMaxHeight(), []);
useEffect(() => updateMaxHeight(), [images]);
useEffect(() => {
window.addEventListener('resize', updateSizes);