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 images to be under node

Browse source
This commit is contained in:
Fedor Katurov 2020-04-21 16:35:14 +07:00
parent 335c9b6523
commit 650e62cfa1
4 changed files with 106 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -165,7 +165,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
const updateMaxHeight = useCallback(() => { const updateMaxHeight = useCallback(() => {
if (!wrap.current) return; if (!wrap.current) return;
const { width } = wrap.current.getBoundingClientRect(); const { width } = wrap.current.getBoundingClientRect();
setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT); // setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT);
setMaxHeight(window.innerHeight - 175);
normalizeOffset(); normalizeOffset();
}, [wrap, setMaxHeight, normalizeOffset]); }, [wrap, setMaxHeight, normalizeOffset]);

13
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -4,7 +4,8 @@
min-width: 0; min-width: 0;
width: 100%; width: 100%;
transition: height 0.25s; transition: height 0.25s;
border-radius: $radius $radius 0 0; border-radius: $radius;
margin-bottom: 20px;
.is_loading { .is_loading {
.placeholder { .placeholder {
@ -24,17 +25,21 @@
user-select: none; user-select: none;
will-change: transform, height; will-change: transform, height;
transition: height 500ms, transform 500ms; transition: height 500ms, transform 500ms;
padding: 10px 0;
&:active { &:active {
transition: none; transition: none;
} }
.image { .image {
// that was for containered image:
// max-height: 960px; // max-height: 960px;
max-height: 120vh !important; // max-height: 120vh !important;
max-width: 100%; // max-width: 100%;
opacity: 1; 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.5) 0 4px 10px;
} }
&.is_dragging { &.is_dragging {

170
src/containers/node/NodeLayout/index.tsx
View file

@ -112,91 +112,107 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
}, [nodeSetCoverImage, node.cover]); }, [nodeSetCoverImage, node.cover]);
return ( return (
<Card className={styles.node} seamless> <div className={styles.node}>
{block && {block &&
createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
<NodePanel <Card seamless>
node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)} <NodePanel
layout={layout} node={pick(
can_edit={can_edit} ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
can_like={can_like} node
can_star={can_star} )}
onEdit={onEdit} layout={layout}
onLike={onLike} can_edit={can_edit}
onStar={onStar} can_like={can_like}
onLock={onLock} can_star={can_star}
is_loading={is_loading} onEdit={onEdit}
/> onLike={onLike}
onStar={onStar}
onLock={onLock}
is_loading={is_loading}
/>
{node.deleted_at ? ( {node.deleted_at ? (
<NodeDeletedBadge /> <NodeDeletedBadge />
) : ( ) : (
<Group> <Group>
<Padder> <Padder>
<Group horizontal className={styles.content}> <Group horizontal className={styles.content}>
<Group className={styles.comments}> <Group className={styles.comments}>
{inline_block && ( {inline_block && (
<div className={styles.inline_block}> <div className={styles.inline_block}>
{createElement(inline_block, { {createElement(inline_block, {
node, node,
is_loading, is_loading,
updateLayout, updateLayout,
layout, layout,
modalShowPhotoswipe, modalShowPhotoswipe,
})} })}
</div> </div>
)} )}
{is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
<NodeNoComments is_loading={is_loading_comments || is_loading} /> <NodeNoComments is_loading={is_loading_comments || is_loading} />
) : ( ) : (
<NodeComments <NodeComments
comments={comments} comments={comments}
comment_data={comment_data} comment_data={comment_data}
comment_count={comment_count} comment_count={comment_count}
user={user} user={user}
onDelete={nodeLockComment} onDelete={nodeLockComment}
onEdit={nodeEditComment} onEdit={nodeEditComment}
onLoadMore={nodeLoadMoreComments} onLoadMore={nodeLoadMoreComments}
order="DESC" order="DESC"
/> />
)} )}
{is_user && !is_loading && <NodeCommentForm />} {is_user && !is_loading && <NodeCommentForm />}
</Group>
<div className={styles.panel}>
<Sticky>
<Group style={{ flex: 1, minWidth: 0 }}>
{!is_loading && (
<NodeTags
is_editable={is_user}
tags={node.tags}
onChange={onTagsChange}
/>
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated
title={album}
items={related.albums[album]}
key={album}
/>
))}
{!is_loading &&
related &&
related.similar &&
related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</Sticky>
</div>
</Group> </Group>
</Padder>
</Group>
)}
<div className={styles.panel}> <Footer />
<Sticky> </Card>
<Group style={{ flex: 1, minWidth: 0 }}> </div>
{!is_loading && (
<NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated title={album} items={related.albums[album]} key={album} />
))}
{!is_loading && related && related.similar && related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</Sticky>
</div>
</Group>
</Padder>
</Group>
)}
<Footer />
</Card>
); );
} }
); );

4
src/containers/node/NodeLayout/styles.scss
View file

@ -27,8 +27,8 @@
} }
.node { .node {
background: $node_bg; // background: $node_bg;
box-shadow: $node_shadow; // box-shadow: $node_shadow;
} }
.buttons { .buttons {