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 board rules and description

Browse Source
This commit is contained in:
plebeius.eth
2023-06-17 09:33:29 +02:00
parent 153a174019
commit f6095e90c0
2 changed files with 199 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Board.styled.jsx
+24
View File
@@ -1740,6 +1740,10 @@ export const BoardForm = styled.div`
border-left: none !important; border-left: none !important;
border-top: none !important; border-top: none !important;
} }
.capcode {
color: purple !important;
}
#post-menu { #post-menu {
border-right: 1px solid #d9bfb7; border-right: 1px solid #d9bfb7;
@@ -1763,6 +1767,10 @@ export const BoardForm = styled.div`
border-left: none !important; border-left: none !important;
border-top: none !important; border-top: none !important;
} }
.capcode {
color: purple !important;
}
#post-menu { #post-menu {
border-right: 1px solid #b7c5d9; border-right: 1px solid #b7c5d9;
@@ -1783,6 +1791,10 @@ export const BoardForm = styled.div`
return `.highlighted { return `.highlighted {
background-color: #f0c0b0 !important; background-color: #f0c0b0 !important;
} }
.capcode {
color: purple !important;
}
#post-menu { #post-menu {
font-size: 13px !important; font-size: 13px !important;
@@ -1803,6 +1815,10 @@ export const BoardForm = styled.div`
return `.highlighted { return `.highlighted {
background-color: #d6bad0 !important; background-color: #d6bad0 !important;
} }
.capcode {
color: purple !important;
}
#post-menu { #post-menu {
font-size: 13px !important; font-size: 13px !important;
@@ -1824,6 +1840,10 @@ export const BoardForm = styled.div`
background-color: #1d1d21 !important; background-color: #1d1d21 !important;
outline: 1px solid #111 !important; outline: 1px solid #111 !important;
} }
.capcode {
color: #81a2be !important;
}
#post-menu { #post-menu {
border: 1px solid #000; border: 1px solid #000;
@@ -1844,6 +1864,10 @@ export const BoardForm = styled.div`
background-color: #ccc !important; background-color: #ccc !important;
outline: 1px solid #ccc !important; outline: 1px solid #ccc !important;
} }
.capcode {
color: #f60 !important;
}
#post-menu { #post-menu {
border: 1px solid #ccc; border: 1px solid #ccc;
src/components/views/Board.jsx
+175 -7
View File
@@ -424,7 +424,7 @@ const Board = () => {
}, },
}); });
const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
@@ -764,6 +764,173 @@ const Board = () => {
null null
) : ( ) : (
feed.length > 0 ? ( feed.length > 0 ? (
<>
{subplebbit.rules ?
<div className="thread">
<div className="op-container">
<div className="post op op-desktop">
<hr />
<div className="post-info">
<span className="name-block">
<span className="title">Rules</span>
&nbsp;
<span className="name capcode">## Board Admins</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px"}} />
&nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px"}} />
<span>&nbsp;
[
<Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
]
</span>
<PostMenu
title="Post menu"
ref={el => {
threadMenuRefs.current[subplebbit.statsCid] = el;
}}
className='post-menu-button'
rotated={openMenuCid === subplebbit.statsCid}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current[subplebbit.statsCid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === subplebbit.statsCid ? null : subplebbit.statsCid));
}}
>
▶
</PostMenu>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${subplebbit.statsCid}`}
style={{ display: openMenuCid === subplebbit.statsCid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(subplebbit.statsCid)}>Hide thread</li>
{/* {isModerator ? (
<>
change rules
</>
) : null} */}
</ul>
</div>
</PostMenuCatalog>, document.body
)}
</span>
<blockquote>
<div className="custom-paragraph">
{subplebbit.rules.map((rule, index) => (
<React.Fragment key={index}>
{index + 1}. {rule}
<br />
</React.Fragment>
))}
</div>
</blockquote>
</div>
</div>
</div>
</div>
: null}
{subplebbit.description ?
<div className="thread" style={{
display: subplebbit.rules ? "grid" : "block"
}}>
<div className="op-container">
<div className="post op op-desktop">
<hr />
<div className="post-info">
{subplebbit.suggested?.avatarUrl ? (
<div className="file" style={{marginBottom: "5px"}}>
<div className="file-text">
Link:&nbsp;
<a href={subplebbit.suggested?.avatarUrl}
target="_blank" rel="noopener noreferrer">{
subplebbit.suggested?.avatarUrl.length > 30 ?
subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
subplebbit.suggested?.avatarUrl
}
</a>&nbsp;(image)
</div>
<div className="img-container">
<span className="file-thumb">
<img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick}
style={{cursor: "pointer"}} />
</span>
</div>
</div>
) : null}
<span className="name-block">
<span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
&nbsp;
<span className="name capcode">## Board Admins</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px"}} />
&nbsp;
<img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px"}} />
<span>&nbsp;
[
<Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
]
</span>
<PostMenu
title="Post menu"
ref={el => {
threadMenuRefs.current[subplebbit.pubsubTopic] = el;
}}
className='post-menu-button'
rotated={openMenuCid === subplebbit.pubsubTopic}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
}}
>
▶
</PostMenu>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
{/* {isModerator ? (
<>
change description
</>
) : null} */}
</ul>
</div>
</PostMenuCatalog>, document.body
)}
</span>
<blockquote>
<div className="custom-paragraph">
{subplebbit.description}
</div>
</blockquote>
</div>
</div>
</div>
</div>
: null}
<Virtuoso <Virtuoso
increaseViewportBy={2000} increaseViewportBy={2000}
data={selectedFeed} data={selectedFeed}
@@ -880,12 +1047,6 @@ const Board = () => {
setSelectedParentCid(thread.cid); setSelectedParentCid(thread.cid);
}} title="Reply to this post">{thread.shortCid}</Link> }} title="Reply to this post">{thread.shortCid}</Link>
&nbsp; &nbsp;
<span key={`rl1-${index}`}>&nbsp;
[
<Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
]
</span>
</span>&nbsp;
{thread.pinned ? ( {thread.pinned ? (
<> <>
&nbsp; &nbsp;
@@ -900,6 +1061,12 @@ const Board = () => {
style={{marginBottom: "-3px"}} /> style={{marginBottom: "-3px"}} />
</> </>
) : null} ) : null}
<span key={`rl1-${index}`}>&nbsp;
[
<Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
]
</span>
</span>
<PostMenu <PostMenu
key={`pmb-${index}`} key={`pmb-${index}`}
title="Post menu" title="Post menu"
@@ -1945,6 +2112,7 @@ const Board = () => {
useWindowScroll={true} useWindowScroll={true}
components={{ Footer: hasMore ? () => <PostLoader /> : null }} components={{ Footer: hasMore ? () => <PostLoader /> : null }}
/> />
</>
) : (<PostLoader />) ) : (<PostLoader />)
)} )}
</div> </div>