add file info on mobile

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;
 }

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);

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 (
+    <div className={styles.replyDesktop}>
+      <div className={styles.sideArrows}>{'>>'}</div>
+      {content}
+    </div>
+  );
+};
+
 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 && (
               <span className={styles.fileThumb}>
                 <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={true} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
+                {commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
               </span>
             )}
             {content && (
@@ -162,12 +172,19 @@ const PostMobile = ({ post }: Comment) => {
 };
 
 const Post = ({ post }: Comment) => {
+  const replies = useReplies(post);
+
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         <PostDesktop post={post} />
         <PostMobile post={post} />
       </div>
+      {replies.map((reply) => (
+        <div key={reply.cid} className={styles.replyContainer}>
+          <ReplyDesktop reply={reply} />
+        </div>
+      ))}
     </div>
   );
 };

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 */