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/media/media.module.css
+8 -8
View File
@@ -71,14 +71,14 @@
padding: 5px 0 10px 0; padding: 5px 0 10px 0;
} }
@media (min-width: 640px) { .thumbnailReplyDesktop {
.media img, .media iframe, .media video, .media audio { margin: 3px 20px 5px 20px;
margin: 3px 20px 5px 0;
}
} }
@media (max-width: 640px) { .thumbnailMobile {
.media img, .media iframe, .media video, .media audio { margin: 8px 10px 5px 5px;
padding: 3px 0 5px 0; }
}
.mediaMobile img, .mediaMobile video, .mediaMobile iframe, .mediaMobile audio {
padding: 3px 0 5px 0;
} }
src/components/media/media.tsx
+10 -7
View File
@@ -19,7 +19,7 @@ interface MediaProps {
interface ThumbnailProps { interface ThumbnailProps {
style: React.CSSProperties; style: React.CSSProperties;
children: React.ReactNode; children: React.ReactNode;
type?: string; thumbnailSmallPadding?: string;
} }
const ThumbnailBig = ({ style, children }: ThumbnailProps) => ( const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
@@ -28,8 +28,8 @@ const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
</span> </span>
); );
const ThumbnailSmall = ({ style, children, type }: ThumbnailProps) => ( const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailProps) => (
<span className={styles.thumbnailSmall} style={style}> <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={style}>
{children} {children}
</span> </span>
); );
@@ -61,19 +61,22 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth
mediaComponent = <img src={gifFrameUrl} alt='' />; mediaComponent = <img src={gifFrameUrl} alt='' />;
} }
const thumbnailStyle = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
return isMobile || isReply ? ( return isMobile || isReply ? (
<ThumbnailSmall style={thumbnailStyle} type={commentMediaInfo?.type}> <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
{mediaComponent} {mediaComponent}
</ThumbnailSmall> </ThumbnailSmall>
) : ( ) : (
<ThumbnailBig style={thumbnailStyle}>{mediaComponent}</ThumbnailBig> <ThumbnailBig style={thumbnailDimensions}>{mediaComponent}</ThumbnailBig>
); );
}; };
const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => { const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const mediaClass = isMobile ? styles.mediaMobile : styles.mediaDesktop;
return ( return (
<span className={styles.content}> <span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}> <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
@@ -88,7 +91,7 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
/> />
{isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>} {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
</span> </span>
<span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}> <span className={`${showThumbnail ? styles.hide : styles.show} ${mediaClass}`}>
{commentMediaInfo?.type === 'iframe' ? ( {commentMediaInfo?.type === 'iframe' ? (
<Embed url={commentMediaInfo.url} /> <Embed url={commentMediaInfo.url} />
) : commentMediaInfo?.type === 'gif' ? ( ) : commentMediaInfo?.type === 'gif' ? (
src/components/post/post.module.css
+8 -1
View File
@@ -280,10 +280,17 @@
padding-top: 7px; padding-top: 7px;
} }
.replyMobile .reply { .replyMobile .replyContainer {
background-color: var(--post-mobile-background-color); 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 { .replyMobile .postInfo {
padding: 5px; padding: 5px;
border-bottom: var(--post-mobile-info-border-bottom); 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 { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {}; const { displayName, shortAddress } = author || {};
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
return ( return (
index < 5 && ( index < 5 && (
<div className={styles.replyDesktop}> <div className={styles.replyDesktop}>
@@ -47,6 +51,27 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
</span> </span>
<span className={styles.postMenuBtn}>▶</span> <span className={styles.postMenuBtn}>▶</span>
</div> </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 && ( {content && (
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
<Markdown content={content} /> <Markdown content={content} />
@@ -67,11 +92,10 @@ const PostDesktop = ({ post }: Comment) => {
const commentMediaInfo = getCommentMediaInfoMemoized(post); const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
const replies = useReplies(post); const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return ( return (
<div className={styles.postDesktop}> <div className={styles.postDesktop}>
<div className={styles.hrWrapper}> <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 { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {}; const { displayName, shortAddress } = author || {};
const commentMediaInfo = getCommentMediaInfoMemoized(reply);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
return ( return (
index < 5 && ( index < 5 && (
<div className={styles.replyMobile}> <div className={styles.replyMobile}>
<div className={styles.reply}> <div className={styles.reply}>
<div className={styles.postInfo}> <div className={styles.replyContainer}>
<span className={styles.postMenuBtn}>...</span> <div className={styles.postInfo}>
<span className={styles.nameBlock}> <span className={styles.postMenuBtn}>...</span>
<span className={styles.name}>{displayName || 'Anonymous'} </span> <span className={styles.nameBlock}>
<span className={styles.address}>(u/{shortAddress})</span> <span className={styles.name}>{displayName || 'Anonymous'} </span>
</span> <span className={styles.address}>(u/{shortAddress})</span>
<span className={styles.dateTimePostNum}> </span>
{getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span> <span className={styles.dateTimePostNum}>
<span className={styles.replyToPost}>{shortCid}</span> {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
</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> </div>
<blockquote className={styles.postMessage}>
<Markdown content={content} />
</blockquote>
</div> </div>
</div> </div>
) )
@@ -206,11 +247,10 @@ const PostMobile = ({ post }: Comment) => {
const commentMediaInfo = getCommentMediaInfoMemoized(post); const commentMediaInfo = getCommentMediaInfoMemoized(post);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
const [showThumbnail, setShowThumbnail] = useState(true);
const replies = useReplies(post); const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return ( return (
<div className={styles.postMobile}> <div className={styles.postMobile}>
<div className={styles.hrWrapper}> <div className={styles.hrWrapper}>
@@ -239,17 +279,15 @@ const PostMobile = ({ post }: Comment) => {
</span> </span>
</div> </div>
{hasThumbnail && ( {hasThumbnail && (
<> <Media
<Media commentMediaInfo={commentMediaInfo}
commentMediaInfo={commentMediaInfo} isMobile={true}
isMobile={true} isReply={false}
isReply={false} linkHeight={linkHeight}
linkHeight={linkHeight} linkWidth={linkWidth}
linkWidth={linkWidth} showThumbnail={showThumbnail}
showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail}
setShowThumbnail={setShowThumbnail} />
/>
</>
)} )}
{content && ( {content && (
<blockquote className={`${styles.postMessage} ${styles.clampLines}`}> <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>