External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add media to replies on mobile, adjust padding on all media

Browse Source
This commit is contained in:
plebeius.eth
2024-04-01 17:39:10 +02:00
parent 510bd7027a
commit c2f1007d1c
4 changed files with 92 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.module.css
+8 -1
View File
@@ -280,10 +280,17 @@
padding-top: 7px;
}
.replyMobile .reply {
.replyMobile .replyContainer {
background-color: var(--post-mobile-background-color);
}
/* clearfix to the container of the floatied elements to contain them */
.replyContainer::after {
content: "";
display: table;
clear: both;
}
.replyMobile .postInfo {
padding: 5px;
border-bottom: var(--post-mobile-info-border-bottom);
src/components/post/post.tsx
+66 -28
View File
@@ -16,6 +16,10 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {};
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
index < 5 && (
<div className={styles.replyDesktop}>
@@ -47,6 +51,27 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{link && (
<div className={styles.file}>
<div className={styles.fileText}>
{t('link')}:{' '}
<a href={link} target='_blank' rel='noopener noreferrer'>
{link.length > 30 ? link.slice(0, 30) + '...' : link}
</a>
</div>
{hasThumbnail && (
<Media
commentMediaInfo={commentMediaInfo}
isMobile={false}
isReply={true}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
)}
</div>
)}
{content && (
<blockquote className={styles.postMessage}>
<Markdown content={content} />
@@ -67,11 +92,10 @@ const PostDesktop = ({ post }: Comment) => {
const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
@@ -173,24 +197,41 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {};
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
index < 5 && (
<div className={styles.replyMobile}>
<div className={styles.reply}>
<div className={styles.postInfo}>
<span className={styles.postMenuBtn}>...</span>
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.address}>(u/{shortAddress})</span>
</span>
<span className={styles.dateTimePostNum}>
{getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
</span>
<div className={styles.replyContainer}>
<div className={styles.postInfo}>
<span className={styles.postMenuBtn}>...</span>
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.address}>(u/{shortAddress})</span>
</span>
<span className={styles.dateTimePostNum}>
{getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
</span>
</div>
{hasThumbnail && (
<Media
commentMediaInfo={commentMediaInfo}
isMobile={true}
isReply={false}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
)}
<blockquote className={styles.postMessage}>
<Markdown content={content} />
</blockquote>
</div>
<blockquote className={styles.postMessage}>
<Markdown content={content} />
</blockquote>
</div>
</div>
)
@@ -206,11 +247,10 @@ const PostMobile = ({ post }: Comment) => {
const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
<div className={styles.postMobile}>
<div className={styles.hrWrapper}>
@@ -239,17 +279,15 @@ const PostMobile = ({ post }: Comment) => {
</span>
</div>
{hasThumbnail && (
<>
<Media
commentMediaInfo={commentMediaInfo}
isMobile={true}
isReply={false}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
</>
<Media
commentMediaInfo={commentMediaInfo}
isMobile={true}
isReply={false}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
)}
{content && (
<blockquote className={`${styles.postMessage} ${styles.clampLines}`}>