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

style(home): make popular threads box styling identical to 4chan

Browse Source
This commit is contained in:
plebeius.eth
2023-10-03 10:31:54 +02:00
parent de2ac49c1f
commit 6ec75d6e6e
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Home.styled.jsx
+7 -6
View File
@@ -277,18 +277,19 @@ export const BoardsContent = styled.div`
} }
.board-avatar-container { .board-avatar-container {
width: 150px; width: auto;
height: 150px; height: auto;
border: 1px solid #800; border: 1px solid #800;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
line-height: 0;
} }
.board-avatar-container img.board-avatar { img,
width: 100%; video {
height: 100%; max-width: 150px;
object-fit: cover; max-height: 150px;
} }
.offline-indicator { .offline-indicator {
src/components/views/Home.jsx
+12 -4
View File
@@ -18,6 +18,7 @@ const RecentThread = ({ commentCid }) => {
const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress }); const subplebbit = useSubplebbit({ subplebbitAddress: comment?.subplebbitAddress });
const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state); const { setSelectedAddress, setSelectedTitle } = useGeneralStore((state) => state);
const commentMediaInfo = getCommentMediaInfo(comment); const commentMediaInfo = getCommentMediaInfo(comment);
const fallbackImgUrl = 'assets/filedeleted-res.gif';
const isMediaShowed = const isMediaShowed =
comment.link && comment.link &&
commentMediaInfo && commentMediaInfo &&
@@ -30,7 +31,7 @@ const RecentThread = ({ commentCid }) => {
return ( return (
<> <>
{isMediaShowed ? ( {isMediaShowed && comment.replyCount > 0 ? (
<div className='board'> <div className='board'>
<div className='board-title' key='board-title'> <div className='board-title' key='board-title'>
<span>{subplebbit.title || subplebbit.address}</span> <span>{subplebbit.title || subplebbit.address}</span>
@@ -50,7 +51,14 @@ const RecentThread = ({ commentCid }) => {
) : commentMediaInfo?.type === 'image' ? ( ) : commentMediaInfo?.type === 'image' ? (
<img className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.url} alt='post' />
) : commentMediaInfo?.type === 'video' ? ( ) : commentMediaInfo?.type === 'video' ? (
<video className='board-avatar' src={commentMediaInfo?.url} alt='post' /> <video
className='board-avatar'
src={commentMediaInfo?.url}
onError={(e) => {
e.target.src = fallbackImgUrl;
}}
alt='post'
/>
) : commentMediaInfo?.type === 'iframe' ? ( ) : commentMediaInfo?.type === 'iframe' ? (
<img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' /> <img className='board-avatar' src={commentMediaInfo?.thumbnail} alt='post' />
) : ( ) : (
@@ -61,7 +69,7 @@ const RecentThread = ({ commentCid }) => {
</div> </div>
<div className='board-text' key='bt'> <div className='board-text' key='bt'>
{comment?.title ? <b>{comment?.title}</b> : null} {comment?.title ? <b>{comment?.title}</b> : null}
{comment?.content ? `: ${comment.content}` : null} {comment?.content ? (comment.content.length > 99 ? `: ${comment.content.substring(0, 99)}...` : `: ${comment.content}`) : null}
</div> </div>
</div> </div>
) : null} ) : null}
@@ -322,7 +330,7 @@ const Home = () => {
</BoardsBox> </BoardsBox>
<BoardsBox> <BoardsBox>
<div className='boxbar'> <div className='boxbar'>
<h2>Recent Threads</h2> <h2>Popular Threads</h2>
</div> </div>
<BoardsContent> <BoardsContent>
{sfwListCids.map((cid) => ( {sfwListCids.map((cid) => (