diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css index 2ce8c925..1bfde978 100644 --- a/src/components/media/media.module.css +++ b/src/components/media/media.module.css @@ -1,38 +1,29 @@ .thumbnailBig { - float: left; + background-color: var(--post-thumbnail-background-color); width: var(--width); height: var(--height); - padding: 3px 20px 5px 0; + margin: 3px 20px 5px 0; + display: flex; + justify-content: center; + align-items: center; } .thumbnailSmall { - float: left; + background-color: var(--post-thumbnail-background-color); width: var(--width); height: var(--height); - padding: 3px 10px 5px 5px; + margin: 3px 10px 5px 5px; + display: flex; + justify-content: center; + align-items: center; } -.thumbnailWrapperBig { - background-color: var(--post-thumbnail-background-color); - display: inline-block; - height: 250px; - width: 250px; +.thumbnailBig img, .thumbnailBig video { + max-width: 250px; + max-height: 250px; } -.thumbnailWrapperSmall { - background-color: var(--post-thumbnail-background-color); - display: inline-block; - height: 150px; - width: 150px; -} - -.transparentThumbnailWrapper { - background-color: transparent; - opacity: 1; -} - -.thumbnail img, .thumbnail video { - object-fit: contain; - width: 100%; - height: 100%; +.thumbnailSmall img, .thumbnailSmall video { + max-width: 125px; + max-height: 125px; } diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index d2cc35ae..371ec368 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -40,6 +40,10 @@ background-image: var(--post-unhide-button-background-image); } +.postDesktop .fileThumb { + float: left; +} + .postDesktop .fileText a { color: var(--post-link-text-color); text-decoration: var(--post-link-text-decoration); @@ -197,6 +201,18 @@ text-align: right; } +.postMobile .fileThumb { + float: left; +} + +.postMobile .fileThumb .fileInfo { + padding-bottom: 5px; + text-align: center; + color: var(--post-mobile-file-info-text-color); + font-size: 9pt; + display: block; +} + .postMobile .postMessage { padding: 10px; font-size: var(--post-mobile-content-font-size); diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 3dceec2f..350f6d17 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -10,11 +10,20 @@ import { Thumbnail } from '../media'; import { countLinksInCommentReplies } from '../../lib/utils/comment-utils'; +const ReplyDesktop = ({ reply }: Comment) => { + const { content, link, linkHeight, linkWidth, shortCid, subplebbitAddress, timestamp } = reply || {}; + return ( +
+
{'>>'}
+ {content} +
+ ); +}; + const PostDesktop = ({ post }: Comment) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; - const replies = useReplies(post); const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title; const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content; @@ -132,6 +141,7 @@ const PostMobile = ({ post }: Comment) => { {hasThumbnail && ( + {commentMediaInfo?.type &&
{commentMediaInfo.type}
}
)} {content && ( @@ -162,12 +172,19 @@ const PostMobile = ({ post }: Comment) => { }; const Post = ({ post }: Comment) => { + const replies = useReplies(post); + return (
+ {replies.map((reply) => ( +
+ +
+ ))}
); }; diff --git a/src/themes.css b/src/themes.css index 926c9bbf..920c566b 100644 --- a/src/themes.css +++ b/src/themes.css @@ -68,7 +68,7 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; - /* post */ + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); --post-subject-text-color: #cc1105; @@ -78,6 +78,8 @@ --post-menu-button-color: #000080; --post-menu-button-color-hover: red; --post-greentext-color: #789922; + + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; --post-mobile-info-background-color: #ead6ca; @@ -91,7 +93,9 @@ --post-mobile-link-info-text-color: #800; --post-mobile-abbr-text-color: #707070; --post-mobile-abbr-font-size: 10pt; + --post-mobile-file-info-text-color: #707070; --post-mobile-content-font-size: 11pt; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */