diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx index 41dc46de..a888ee85 100644 --- a/packages/app/src/components/PostCard/index.jsx +++ b/packages/app/src/components/PostCard/index.jsx @@ -349,6 +349,16 @@ export const PostCard = React.memo(({ return events.onDoubleClick(data) } + React.useEffect(() => { + if (fullmode) { + app.eventBus.emit("style.compactMode", true) + } + + return () => { + app.eventBus.emit("style.compactMode", false) + } + }, []) + React.useEffect(() => { // first listen to post changes window.app.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate) @@ -397,29 +407,36 @@ export const PostCard = React.memo(({ isLiked={hasLiked} likes={likes.length} comments={comments.length} + fullmode={fullmode} /> -
-
- + {!fullmode && +
+
+ +
-
-
- -
+ } + {!fullmode && +
+ +
+ }
}) diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less index 427597b8..869996ce 100644 --- a/packages/app/src/components/PostCard/index.less +++ b/packages/app/src/components/PostCard/index.less @@ -33,6 +33,51 @@ &.fullmode { max-width: none; + height: 100%; + + background-color: transparent; + + filter: none; + + .actionsIndicatorWrapper { + opacity: 0; + } + + .actionsWrapper { + opacity: 1; + } + + .wrapper { + height: 100%; + + .content { + height: 100%; + + .additions { + height: fit-content; + max-height: 80vh; + + .addition { + display: flex !important; + flex-direction: column; + + align-items: center; + justify-content: center; + + img, + video { + width: fit-content; + height: 100%; + + align-self: center; + + object-fit: contain; + border-radius: 8px; + } + } + } + } + } } .wrapper {