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 ( +