From 99324e753eb2b28398b87a53630ecb0b2173ee2c Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 30 Mar 2024 22:19:49 +0100 Subject: [PATCH] add replies on mobile --- src/components/markdown/markdown.module.css | 2 +- src/components/post/post.module.css | 34 ++++++++++++++++-- src/components/post/post.tsx | 38 ++++++++++++++++++++- src/themes.css | 32 +++++++++++++++++ 4 files changed, 101 insertions(+), 5 deletions(-) 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;