diff --git a/src/components/markdown/markdown.module.css b/src/components/markdown/markdown.module.css
index a711d3b4..fbd6783e 100644
--- a/src/components/markdown/markdown.module.css
+++ b/src/components/markdown/markdown.module.css
@@ -22,4 +22,4 @@
.hrWrapper hr {
margin: 0;
-}
\ No newline at end of file
+}
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index f7c16f82..d8844569 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -171,7 +171,7 @@
.postMobile .postMenuBtn {
color: var(--post-mobile-menu-button-color);
line-height: 1em;
- width: 10px;
+ width: 1em;
text-align: center;
transition: transform 0.1s;
transform: rotate(90deg);
@@ -264,8 +264,8 @@
}
.replyDesktop .reply {
- background-color: #f0e0d6;
- border: 1px solid #d9bfb7;
+ background-color: var(--reply-desktop-background-color);
+ border: var(--reply-desktop-border);
border-left: none;
border-top: none;
display: table;
@@ -276,6 +276,34 @@
padding: 3px 3px 0 0;
}
+.replyMobile {
+ padding-top: 7px;
+}
+
+.replyMobile .reply {
+ background-color: var(--post-mobile-background-color);
+}
+
+.replyMobile .postInfo {
+ padding: 5px;
+ border-bottom: var(--post-mobile-info-border-bottom);
+ background-color: var(--post-mobile-info-background-color);
+}
+
+.replyMobile .postInfo .postMenuBtn {
+ width: 1em;
+}
+
+.replyMobile .nameBlock {
+ display: inline;
+ float: left;
+}
+
+.replyMobile .dateTimePostNum {
+ float: right;
+ text-align: right;
+}
+
@media (max-width: 640px) {
.postDesktop {
display: none;
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index f32b56b8..8fc7859e 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -149,8 +149,36 @@ const PostDesktop = ({ post }: Comment) => {
);
};
+const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
+ const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
+ const { displayName, shortAddress } = author || {};
+
+ return (
+ index < 5 && (
+
+
+
+ ...
+
+ {displayName || 'Anonymous'}
+ (u/{shortAddress})
+
+
+ {getFormattedDate(timestamp)} c/
+ {shortCid}
+
+
+
+
+
+
+
+ )
+ );
+};
+
const PostMobile = ({ post }: Comment) => {
- const { author, cid, content, link, linkHeight, linkWidth, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
+ const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
const linkCount = countLinksInCommentReplies(post);
const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
@@ -159,6 +187,8 @@ const PostMobile = ({ post }: Comment) => {
const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+ const replies = useReplies(post);
+
return (
@@ -214,6 +244,12 @@ const PostMobile = ({ post }: Comment) => {
+ {!pinned &&
+ replies.map((reply, index) => (
+
+
+
+ ))}
);
diff --git a/src/themes.css b/src/themes.css
index a1ff5151..c2154100 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -100,6 +100,8 @@
/* reply desktop */
--side-arrows-color: #e0bfb7;
+ --reply-desktop-background-color: #f0e0d6;
+ --reply-desktop-border: 1px solid #d9bfb7;
/* post form */
--post-form-toggle-font-size: 22px;
@@ -201,8 +203,14 @@
--post-mobile-abbr-text-color: #707070;
--post-mobile-abbr-font-size: 10pt;
--post-mobile-content-font-size: 11pt;
+
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+ /* reply desktop */
+ --side-arrows-color: #b7c5d9;
+ --reply-desktop-background-color: #d6daf0;
+ --reply-desktop-border: 1px solid #b7c5d9;
+
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -281,8 +289,14 @@
--post-mobile-abbr-text-color: #707070;
--post-mobile-abbr-font-size: 12pt;
--post-mobile-content-font-size: 13pt;
+
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+ /* reply desktop */
+ --side-arrows-color: #e0bfb7;
+ --reply-desktop-background-color: #f0e0d6;
+ --reply-desktop-border: 1px solid #d9bfb7;
+
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -360,7 +374,13 @@
--post-menu-button-color: #34345c;
--post-menu-button-color-hover: #d00;
--post-greentext-color: #789922;
+
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+
+ /* reply desktop */
+ --side-arrows-color: #b7c5d9;
+ --reply-desktop-background-color: #d6daf0;
+ --reply-desktop-border: 1px solid #b7c5d9;
/* post form */
--post-form-toggle-font-size: 22px;
@@ -435,8 +455,14 @@
--post-menu-button-color: #5F89AC;
--post-menu-button-color-hover: #81a2be;
--post-greentext-color: #b5bd68;
+
--post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
+ /* reply desktop */
+ --side-arrows-color: #c5c8c6;
+ --reply-desktop-background-color: #282a2e;
+ --reply-desktop-border: 1px solid #282a2e;
+
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -505,8 +531,14 @@
--post-menu-button-color: #FF6600;
--post-menu-button-color-hover: #FF3300;
--post-greentext-color: #789922;
+
--post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+ /* reply desktop */
+ --side-arrows-color: #333;
+ --reply-desktop-background-color: #ddd;
+ --reply-desktop-border: 1px solid #ccc;
+
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;