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 initial subscription UI, fixes

Browse Source
This commit is contained in:
Tom
2023-05-01 18:12:39 +02:00
parent 932de55eb3
commit 4a6596cd04
5 changed files with 124 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/Board.styled.jsx
+48 -25
View File
@@ -1262,13 +1262,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #00e;
a, #subscribe {
color: #00e !important;
text-decoration: none;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Yotsuba-B':
@@ -1285,13 +1285,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #34345c;
a, #subscribe {
color: #34345c !important;
text-decoration: none;
}
a:hover {
color: #d00;
a:hover, #subscribe:hover {
color: #d00 !important;
}`;
case 'Futaba':
@@ -1308,13 +1308,13 @@ export const TopBar = styled.div`
font-size: 12pt;
}
a {
color: #00e;
a, #subscribe {
color: #00e !important;
text-decoration: underline;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Burichan':
@@ -1331,13 +1331,13 @@ export const TopBar = styled.div`
font-size: 12pt;
}
a {
color: #34345c;
a, #subscribe{
color: #34345c !important;
text-decoration: underline;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Tomorrow':
@@ -1354,13 +1354,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #81a2be;
a, #subscribe {
color: #81a2be !important;
text-decoration: none;
}
a:hover {
color: #5f89ab;
a:hover, #subscribe:hover {
color: #5f89ab !important;
}`;
case 'Photon':
@@ -1377,13 +1377,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #f60;
a, #subscribe {
color: #f60 !important;
text-decoration: none;
}
a:hover {
color: #ff3300;
a:hover, #subscribe:hover {
color: #ff3300 !important;
}`;
default:
@@ -1399,6 +1399,16 @@ export const TopBar = styled.div`
#catalog-button-desktop {
display: inline-block;
}
.subscribe-button-desktop {
float: right;
margin-right: 10px;
margin-top: 3px;
}
.subscribe-button-mobile {
display: none;
}
}
@media (max-width: 480px) {
@@ -1419,6 +1429,20 @@ export const TopBar = styled.div`
transform: translateX(-50%);
font-size: 10pt;
}
.subscribe-button-desktop {
display: none;
}
.subscribe-button-mobile {
margin-right: 10px;
float: right;
margin-top: -2px;
a {
cursor: pointer;
}
}
}
${({ selectedStyle }) => {
@@ -2928,7 +2952,6 @@ export const BoardForm = styled.div`
}}
@media (max-width: 480px) {
margin-top: -5%;
margin-bottom: 335px;
.thread {
src/components/views/Board.jsx
+71 -50
View File
@@ -327,6 +327,11 @@ const Board = () => {
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
<span className="boardList">
[
<Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
@@ -339,7 +344,7 @@ const Board = () => {
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -356,6 +361,7 @@ const Board = () => {
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -365,7 +371,7 @@ const Board = () => {
<div className="page-jump">
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
@@ -393,49 +399,49 @@ const Board = () => {
<PostForm selectedStyle={selectedStyle}>
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-desktop">
[
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
]
</div>
<div id="post-form-link-mobile">
<span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
</span>
</div>
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody>
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td>
</tr>
<tr data-type="File">
<td>Embed File</td>
<td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
} data-tip="Help">?</button>
</td>
</tr>
</tbody>
</PostFormTable>
[
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
]
</div>
<div id="post-form-link-mobile">
<span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
</span>
</div>
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody>
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td>
</tr>
<tr data-type="File">
<td>Embed File</td>
<td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
} data-tip="Help">?</button>
</td>
</tr>
</tbody>
</PostFormTable>
</PostForm>
<TopBar selectedStyle={selectedStyle}>
<hr />
@@ -456,9 +462,20 @@ const Board = () => {
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</div>
<div id="stats" style={{float: "right", marginTop: "5px"}}>
{feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
</div>
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span>
</div>
)}
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
@@ -802,7 +819,11 @@ const Board = () => {
})}
</div>
<div key={`mob-t-${index}`} className="thread-mobile">
<hr key={`mob-hr-${index}`} />
{index === 0 ? (
<hr key={`mob-hr-${index}`} style={{marginTop: '10px'}} />
) : (
<hr key={`mob-hr-${index}`} />
)}
<div key={`mob-c-${index}`} className="op-container">
<div key={`mob-po-${index}`} className="post op op-mobile">
<div key={`mob-pi-${index}`} className="post-info-mobile">
@@ -1146,7 +1167,7 @@ const Board = () => {
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
src/components/views/Catalog.jsx
+2 -2
View File
@@ -253,7 +253,7 @@ const Catalog = () => {
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -279,7 +279,7 @@ const Catalog = () => {
<div className="page-jump">
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
src/components/views/Home.jsx
+1 -2
View File
@@ -16,7 +16,6 @@ const BoardAvatar = ({ address }) => {
if (subplebbit.suggested?.avatarUrl) {
setAvatarUrl(subplebbit.suggested.avatarUrl);
}
console.log(subplebbit);
}, [subplebbit.suggested?.avatarUrl, subplebbit]);
return <img alt="board logo" src={avatarUrl} />;
@@ -91,7 +90,7 @@ const Home = () => {
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and <button
style={{all: 'unset', cursor: 'pointer'}}
onClick={() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)}
>create a board</button>. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
<br />
src/components/views/Thread.jsx
+2 -2
View File
@@ -296,7 +296,7 @@ const Thread = () => {
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -322,7 +322,7 @@ const Thread = () => {
<div className="page-jump">
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>