diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss index b54d77ba..0a4e5eab 100644 --- a/src/components/node/ImageSwitcher/styles.scss +++ b/src/components/node/ImageSwitcher/styles.scss @@ -9,12 +9,13 @@ position: absolute; background: transparentize(black, 0.5); display: flex; - right: $gap; - top: $gap; + left: 50%; + top: -60px; border-radius: 24px; padding: 0 3px; flex-wrap: wrap; transition: background-color 0.5s; + transform: translate(-50%, 0); &:hover { background: transparentize(black, 0.2); diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index f7753228..397a8a79 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -41,6 +41,7 @@ const NodeImageSlideBlock: FC = ({ const [initial_x, setInitialX] = useState(0); const [offset, setOffset] = useState(0); const [is_dragging, setIsDragging] = useState(false); + const [drag_start, setDragStart] = useState(); const slide = useRef(); const wrap = useRef(); @@ -165,7 +166,7 @@ const NodeImageSlideBlock: FC = ({ const updateMaxHeight = useCallback(() => { if (!wrap.current) return; const { width } = wrap.current.getBoundingClientRect(); - setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT); + setMaxHeight(window.innerHeight - 143); normalizeOffset(); }, [wrap, setMaxHeight, normalizeOffset]); @@ -182,11 +183,12 @@ const NodeImageSlideBlock: FC = ({ setIsDragging(false); normalizeOffset(); - if (initial_x - getX(event) < 10) { + if (+new Date() - drag_start < 300) { + // click detection onOpenPhotoSwipe(); } }, - [setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe] + [setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe, drag_start] ); const startDragging = useCallback( @@ -194,8 +196,9 @@ const NodeImageSlideBlock: FC = ({ setIsDragging(true); setInitialX(getX(event)); setInitialOffset(offset); + setDragStart(+new Date()); }, - [setIsDragging, setInitialX, offset, setInitialOffset] + [setIsDragging, setInitialX, offset, setInitialOffset, setDragStart] ); useEffect(() => updateMaxHeight(), [images]); @@ -242,15 +245,6 @@ const NodeImageSlideBlock: FC = ({ - {!is_loading && ( - - )} -
= ({
))} + + {!is_loading && ( + + )} ); }; diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss index 4b9874c8..c703829b 100644 --- a/src/components/node/NodeImageSlideBlock/styles.scss +++ b/src/components/node/NodeImageSlideBlock/styles.scss @@ -2,9 +2,10 @@ overflow: hidden; position: relative; min-width: 0; - width: 100%; transition: height 0.25s; - border-radius: $radius $radius 0 0; + border-radius: $radius; + margin-right: -10px; + margin-left: -10px; .is_loading { .placeholder { @@ -14,7 +15,6 @@ } .image_container { - // background: $node_image_bg; border-radius: $panel_radius 0 0 $panel_radius; display: flex; align-items: flex-start; @@ -24,17 +24,18 @@ user-select: none; will-change: transform, height; transition: height 500ms, transform 500ms; + padding: 0 0 20px 0; &:active { transition: none; } .image { - // max-height: 960px; - max-height: 120vh !important; max-width: 100%; opacity: 1; - border-radius: $radius $radius 0 0; + border-radius: $radius; + box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px, + transparentize($color: #000000, $amount: 0.6) 0 2px 5px; } &.is_dragging { @@ -44,15 +45,13 @@ .image_wrap { width: 100%; - // top: 0; - // left: 0; - // opacity: 0; pointer-events: none; touch-action: none; z-index: 1; display: flex; align-items: center; justify-content: center; + padding: 0 10px; &:global(.is_active) { opacity: 1; diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss index 60894c34..e93905be 100644 --- a/src/components/node/NodePanelInner/styles.scss +++ b/src/components/node/NodePanelInner/styles.scss @@ -28,7 +28,7 @@ justify-content: stretch; border-radius: $radius $radius 0 0; box-sizing: border-box; - padding: 0 $gap; + padding: $gap $gap; background: $node_bg; height: 64px; @@ -50,7 +50,7 @@ text-transform: uppercase; font: $font_24_semibold; // height: 24px; - padding-bottom: 3px; + // padding-bottom: 6px; @include tablet { // font-size: 16px; diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index dfcc0a3e..87ec4d14 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -112,91 +112,107 @@ const NodeLayoutUnconnected: FC = memo( }, [nodeSetCoverImage, node.cover]); return ( - +
{block && createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} - + + - {node.deleted_at ? ( - - ) : ( - - - - - {inline_block && ( -
- {createElement(inline_block, { - node, - is_loading, - updateLayout, - layout, - modalShowPhotoswipe, - })} -
- )} + {node.deleted_at ? ( + + ) : ( + + + + + {inline_block && ( +
+ {createElement(inline_block, { + node, + is_loading, + updateLayout, + layout, + modalShowPhotoswipe, + })} +
+ )} - {is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( - - ) : ( - - )} + {is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( + + ) : ( + + )} - {is_user && !is_loading && } + {is_user && !is_loading && } +
+ +
+ + + {!is_loading && ( + + )} + + {is_loading && } + + {!is_loading && + related && + related.albums && + Object.keys(related.albums) + .filter(album => related.albums[album].length > 0) + .map(album => ( + + ))} + + {!is_loading && + related && + related.similar && + related.similar.length > 0 && ( + + )} + + +
+
+
+ )} -
- - - {!is_loading && ( - - )} - - {is_loading && } - - {!is_loading && - related && - related.albums && - Object.keys(related.albums) - .filter(album => related.albums[album].length > 0) - .map(album => ( - - ))} - - {!is_loading && related && related.similar && related.similar.length > 0 && ( - - )} - - -
-
-
-
- )} - -
); } ); diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.scss index 1770299b..b789bfaa 100644 --- a/src/containers/node/NodeLayout/styles.scss +++ b/src/containers/node/NodeLayout/styles.scss @@ -27,8 +27,8 @@ } .node { - background: $node_bg; - box-shadow: $node_shadow; + // background: $node_bg; + // box-shadow: $node_shadow; } .buttons {