diff --git a/src/components/containers/PageCover/styles.scss b/src/components/containers/PageCover/styles.scss index 4c2b9724..92f9c352 100644 --- a/src/components/containers/PageCover/styles.scss +++ b/src/components/containers/PageCover/styles.scss @@ -18,6 +18,7 @@ height: 100%; animation: fadeIn 2s; will-change: transform, opacity; + filter: blur(10px); &::after { content: ' '; @@ -26,7 +27,7 @@ left: 0; width: 100%; height: 100%; - background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3); + background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2); } @include tablet { diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss index 0a4e5eab..6efe6dab 100644 --- a/src/components/node/ImageSwitcher/styles.scss +++ b/src/components/node/ImageSwitcher/styles.scss @@ -2,25 +2,23 @@ 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%); + background: url('../../../../src/sprites/noise.png') $main_bg_color; display: flex; left: 50%; - top: -60px; + transform: translate(-50%, 0); + top: -5px; border-radius: 24px; padding: 0 3px; - flex-wrap: wrap; + // flex-wrap: wrap; transition: background-color 0.5s; transform: translate(-50%, 0); - &:hover { - background: transparentize(black, 0.2); - } - & > div { width: 30px; height: 30px; @@ -29,19 +27,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 ef2f9f85..124200d7 100644 --- a/src/components/node/NodeImageBlock/index.tsx +++ b/src/components/node/NodeImageBlock/index.tsx @@ -7,6 +7,7 @@ import { getURL } from '~/utils/dom'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { PRESETS } from '~/constants/urls'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; +import { LoaderCircle } from '~/components/input/LoaderCircle'; interface IProps { is_loading: boolean; @@ -19,7 +20,7 @@ interface IProps { const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => { const [is_animated, setIsAnimated] = useState(false); const [current, setCurrent] = useState(0); - const [height, setHeight] = useState(320); + const [height, setHeight] = useState(window.innerHeight - 150); const [loaded, setLoaded] = useState>({}); const refs = useRef>({}); @@ -30,23 +31,19 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP ); const setRef = useCallback(index => el => (refs.current[index] = el), [refs]); + const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [ setLoaded, loaded, ]); - const onOpenPhotoSwipe = useCallback( - (index: number) => () => modalShowPhotoswipe(images, index), - [modalShowPhotoswipe, images] - ); - useEffect(() => updateLayout(), [loaded]); useEffect(() => { - if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320); + if (!refs || !refs.current[current] || !loaded[current]) + return setHeight(window.innerHeight - 150); const el = refs.current[current]; - const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height; setHeight(element_height); @@ -57,38 +54,46 @@ const NodeImageBlock: FC = ({ node, is_loading, updateLayout, modalShowP return () => clearTimeout(timer); }, []); + const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [ + modalShowPhotoswipe, + images, + current, + ]); + return (
-
- +
+ {(is_loading || !loaded[0] || !images.length) && ( +
+ +
+ )} -
- {(is_loading || !loaded[0] || !images.length) &&
} - - {images.map((file, index) => ( -
( +
+ - -
- ))} -
+ onLoad={onImageLoad(index)} + /> +
+ ))}
+ +
); }; diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.scss index 7e537fa4..a9529f4d 100644 --- a/src/components/node/NodeImageBlock/styles.scss +++ b/src/components/node/NodeImageBlock/styles.scss @@ -1,4 +1,6 @@ .wrap { + padding-bottom: $gap * 2; + &:global(.is_animated) { .image_container { transition: height 0.5s; @@ -12,7 +14,6 @@ .image_container { width: 100%; - background: $node_image_bg; border-radius: $panel_radius 0 0 $panel_radius; display: flex; align-items: center; @@ -22,10 +23,12 @@ user-select: none; .image { - max-height: 960px; + max-height: calc(100vh - 150px); max-width: 100%; opacity: 1; - border-radius: $radius $radius 0 0; + border-radius: $radius; + + @include outer_shadow(); } } @@ -48,6 +51,10 @@ } .placeholder { - background: red; - height: 320px; + width: 100%; + height: calc(100vh - 130px); + border-radius: $radius; + display: flex; + align-items: center; + justify-content: center; } diff --git a/src/components/node/NodePanel/index.tsx b/src/components/node/NodePanel/index.tsx index 5eed452c..bebb3218 100644 --- a/src/components/node/NodePanel/index.tsx +++ b/src/components/node/NodePanel/index.tsx @@ -47,7 +47,8 @@ const NodePanel: FC = memo( return (
- {stack && + {/* + stack && createPortal( = memo( stack />, document.body - )} + ) + */} = memo( const can_like = useMemo(() => canLikeNode(node, user), [node, user]); const can_star = useMemo(() => canStarNode(node, user), [node, user]); + const head = node && node.type && NODE_HEADS[node.type]; const block = node && node.type && NODE_COMPONENTS[node.type]; - const inline_block = node && node.type && NODE_INLINES[node.type]; + const inline = node && node.type && NODE_INLINES[node.type]; const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]); const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]); @@ -112,11 +113,14 @@ const NodeLayoutUnconnected: FC = memo( }, [nodeSetCoverImage, node.cover]); return ( -
- {block && - createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} + <> + {head && + createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} + + + {block && + createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} - = memo( - {inline_block && ( -
- {createElement(inline_block, { + {inline && ( +
+ {createElement(inline, { node, is_loading, updateLayout, @@ -152,7 +156,7 @@ const NodeLayoutUnconnected: FC = memo(
)} - {is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( + {is_loading || is_loading_comments || (!comments.length && !inline) ? ( ) : ( = memo(
+ ); } ); diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 8cee2dba..1ea26f18 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -14,6 +14,7 @@ import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadB import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton'; import { Filler } from '~/components/containers/Filler'; import { modalShowPhotoswipe } from '../modal/actions'; +import { NodeImageBlock } from '~/components/node/NodeImageBlock'; const prefix = 'NODE.'; export const NODE_ACTIONS = { @@ -87,8 +88,12 @@ type INodeComponents = Record< }> >; +export const NODE_HEADS: INodeComponents = { + [NODE_TYPES.IMAGE]: NodeImageBlock, +}; + export const NODE_COMPONENTS: INodeComponents = { - [NODE_TYPES.IMAGE]: NodeImageSlideBlock, + // [NODE_TYPES.IMAGE]: NodeImageSlideBlock, [NODE_TYPES.VIDEO]: NodeVideoBlock, [NODE_TYPES.AUDIO]: NodeAudioImageBlock, };