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

added mobile thread view

Browse Source
This commit is contained in:
plebbitor
2023-02-27 12:35:23 +01:00
parent b3c9af4e3d
commit 5bced2a03d
4 changed files with 185 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+8 -8
View File
@@ -391,7 +391,7 @@ const Board = ({ setBodyStyle }) => {
return ( return (
<> <>
<div key={`t-${thread.cid}`} className="thread"> <div key={`t-${thread.cid}`} className="thread">
<div key={`c-${thread.cid}`} className="post-container op-container"> <div key={`c-${thread.cid}`} className="op-container">
<div key={`po-${thread.cid}`} className="post op"> <div key={`po-${thread.cid}`} className="post op">
<hr key={`hr-${thread.cid}`} /> <hr key={`hr-${thread.cid}`} />
<div key={`pi-${thread.cid}`} className="post-info"> <div key={`pi-${thread.cid}`} className="post-info">
@@ -447,7 +447,7 @@ const Board = ({ setBodyStyle }) => {
counter++; counter++;
const counterString = counter.toString().padStart(8, '0'); const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`pc-${reply.cid}`} className="post-container reply-container"> <div key={`pc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info"> <div key={`pi-${reply.cid}`} className="post-info">
@@ -479,22 +479,22 @@ const Board = ({ setBodyStyle }) => {
</div> </div>
<div key={`mob-t-${thread.cid}`} className="thread-mobile"> <div key={`mob-t-${thread.cid}`} className="thread-mobile">
<hr key={`mob-hr-${thread.cid}`} /> <hr key={`mob-hr-${thread.cid}`} />
<div key={`mob-c-${thread.cid}`} className="post-container op-container"> <div key={`mob-c-${thread.cid}`} className="op-container">
<div key={`mob-po-${thread.cid}`} className="post op"> <div key={`mob-po-${thread.cid}`} className="post op">
<div key={`mob-pi-${thread.cid}`} className="post-info-mobile"> <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
<a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a> <a key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
<span className="name-block-mobile"> <span className="name-block-mobile">
<span key={`mob-n-${thread.cid}`} className="name-mobile">{thread.author.displayName || "Anonymous"}</span> <span key={`mob-n-${thread.cid}`} className="name-mobile">LongName (...)</span>
&nbsp; &nbsp;
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">{thread.author.address}</span> <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
) )
</span> </span>
<br key={`mob-br1-${thread.cid}`} /> <br key={`mob-br1-${thread.cid}`} />
<span key={`mob-s-${thread.cid}`} className="subject-mobile"> <span key={`mob-s-${thread.cid}`} className="subject-mobile">
{/* {thread.title ? `${thread.title}` : null} */} {/* {thread.title ? `${thread.title}` : null} */}
This is a test title because titles are (…) Sometimes titles can be very lon (…)
</span> </span>
</span> </span>
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile"> <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
@@ -527,12 +527,12 @@ const Board = ({ setBodyStyle }) => {
counter++; counter++;
const counterString = counter.toString().padStart(8, '0'); const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`mob-rc-${reply.cid}`} className="post-container reply-container"> <div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply"> <div key={`mob-pr-${reply.cid}`} className="post-reply">
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile"> <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<a className="post-menu-button-mobile" title="Post menu">...</a> <a className="post-menu-button-mobile" title="Post menu">...</a>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile"> <span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
<span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span> <span key={`mob-n-${reply.cid}`} className="name-mobile">LongName (...)</span>
&nbsp; &nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile"> <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp; (User:&nbsp;
src/components/Thread.jsx
+131 -49
View File
@@ -3,12 +3,12 @@ import { Link, useNavigate } from 'react-router-dom';
import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled'; import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled';
import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
import { BoardContext } from '../App'; import { BoardContext } from '../App';
import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
const Thread = ({ setBodyStyle }) => { const Thread = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
const [showReplyFormLink, setShowReplyFormLink] = useState(true); const [showReplyFormLink, setShowReplyFormLink] = useState(true);
const [showReplyForm, setShowReplyForm] = useState(false); const [showReplyForm, setShowReplyForm] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -317,7 +317,7 @@ const Thread = ({ setBodyStyle }) => {
{comment ? ( {comment ? (
<> <>
<div className="thread"> <div className="thread">
<div className="post-container op-container"> <div className="op-container">
<div className="post op"> <div className="post op">
<div className="post-info"> <div className="post-info">
<div key={`f-${comment.cid}`} className="file"> <div key={`f-${comment.cid}`} className="file">
@@ -365,7 +365,7 @@ const Thread = ({ setBodyStyle }) => {
counter++; counter++;
const counterString = counter.toString().padStart(8, '0'); const counterString = counter.toString().padStart(8, '0');
return ( return (
<div key={`pc-${reply.cid}`} className="post-container reply-container"> <div key={`pc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply"> <div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info"> <div key={`pi-${reply.cid}`} className="post-info">
@@ -397,7 +397,90 @@ const Thread = ({ setBodyStyle }) => {
) )
}) })
})} })}
<BottomBar selectedStyle={selectedStyle}> </div>
<div className="thread-mobile">
<hr />
<div className="op-container">
<div key={`mob-po-${comment.cid}`} className="post op">
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
<a key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" href={handleVoidClick}>...</a>
<span className="name-block-mobile">
<span key={`mob-n-${comment.cid}`} className="name-mobile">LongName (...)</span>
&nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
(User:&nbsp;
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
)
</span>
<br key={`mob-br1-${comment.cid}`} />
<span key={`mob-s-${comment.cid}`} className="subject-mobile">
{/* {thread.title ? `${thread.title}` : null} */}
Sometimes titles can be very lon (…)
</span>
</span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
2 weeks ago
&nbsp;
<a key={`mob-no-${comment.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
<a key={`mob-no2-${comment.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
</span>
</div>
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<a key={`mob-ft${comment.cid}`} className="file-thumb-mobile" href={handleVoidClick} target="_blank">
<img key={`mob-img-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="" />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">58 KB JPG</div>
</a>
</div>
<blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
{comment.content ? (
<>
{comment.content}
</>
) : null}
</blockquote>
</div>
</div>
{comment.replyCount > 0 &&
Object.keys(comment.replies.pages.topAll.comments).map(() => {
const renderedComments = renderComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => {
let counter = 1;
counter++;
const counterString = counter.toString().padStart(8, '0');
return (
<div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply">
<div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
<a className="post-menu-button-mobile" title="Post menu">...</a>
<span key={`mob-nb-${reply.cid}`} className="name-block-mobile">
<span key={`mob-n-${reply.cid}`} className="name-mobile">{reply.author.displayName || "Anonymous"}</span>
&nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
(User:&nbsp;
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile" title="Highlight posts by this address">CCxfJWFT...</span>
)
</span>
<br key={`mob-br-${reply.cid}`} />
</span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
2 weeks ago&nbsp;
<a key={`mob-pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
<a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
</span>
</div>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
<a key={`mob-ql-${reply.cid}`} className="quotelink-mobile" href={handleVoidClick}>
{`>>${counterString}`}{<br />}
</a>
{reply.content}
</blockquote>
</div>
</div>
)
})
})}
</div>
<BottomBar selectedStyle={selectedStyle}>
<div id="bottombar-desktop"> <div id="bottombar-desktop">
<hr /> <hr />
<span className="bottom-bar-return"> <span className="bottom-bar-return">
@@ -428,56 +511,55 @@ const Thread = ({ setBodyStyle }) => {
<hr /> <hr />
</div> </div>
</BottomBar> </BottomBar>
<div id="bottombar-mobile"> <div id="bottombar-mobile">
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className="style-changer">
Style: Style:
   
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
<option value="Yotsuba">Yotsuba</option> <option value="Yotsuba">Yotsuba</option>
<option value="Yotsuba B">Yotsuba B</option> <option value="Yotsuba B">Yotsuba B</option>
<option value="Futaba">Futaba</option> <option value="Futaba">Futaba</option>
<option value="Burichan">Burichan</option> <option value="Burichan">Burichan</option>
<option value="Tomorrow">Tomorrow</option> <option value="Tomorrow">Tomorrow</option>
<option value="Photon">Photon</option> <option value="Photon">Photon</option>
</select> </select>
</span>
{comment ? (
comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
) : (
<span className="reply-stat">No replies yet</span>
)) : (
null
)}
<hr />
</TopBar>
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-mobile" className="post-button-mobile">
<span className="btn-wrap">
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
</span> </span>
{comment ? ( </div>
comment.replyCount > 0 ? ( <div id="btns-container">
<span className="reply-stat">{comment.replyCount} replies</span> <div id="return-button-mobile">
) : (
<span className="reply-stat">No replies yet</span>
)) : (
null
)}
<hr />
</TopBar>
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-mobile" className="post-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a> <Link to={`/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="btns-container"> <div id="catalog-button-mobile">
<div id="return-button-mobile"> <span className="btn-wrap">
<span className="btn-wrap"> <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
<Link to={`/${selectedAddress}`}>Return</Link>
</span>
</div>
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
</span>
</div>
<span className="bottom-bar-top">
<span className="btn-wrap">
<a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
</span>
</span> </span>
</div> </div>
</ReplyFormLink> <span className="bottom-bar-top">
</div> <span className="btn-wrap">
<a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
</span>
</span>
</div>
</ReplyFormLink>
</div> </div>
</> </>
) : ( ) : (
src/components/styles/Board.styled.jsx
+45 -2
View File
@@ -1,4 +1,4 @@
import styled, { keyframes } from 'styled-components'; import styled from 'styled-components';
export const Container = styled.div` export const Container = styled.div`
font-size: 10pt; font-size: 10pt;
@@ -1680,6 +1680,11 @@ export const BoardForm = styled.div`
.quotelink-mobile:hover { .quotelink-mobile:hover {
color: red !important; color: red !important;
} }
p:first-of-type::before {
content: '>';
color: #789922;
}
} }
} }
}`; }`;
@@ -1778,6 +1783,17 @@ export const BoardForm = styled.div`
blockquote { blockquote {
font-size: 11pt; font-size: 11pt;
.quotelink-mobile {
color: #d00;
text-decoration: underline;
font-family: arial;
}
p:first-of-type::before {
content: '>';
color: #789922;
}
} }
} }
}`; }`;
@@ -1885,6 +1901,11 @@ export const BoardForm = styled.div`
.quotelink-mobile:hover { .quotelink-mobile:hover {
color: red !important; color: red !important;
} }
p:first-of-type::before {
content: '>';
color: #789922;
}
} }
} }
}`; }`;
@@ -1983,6 +2004,16 @@ export const BoardForm = styled.div`
blockquote { blockquote {
font-size: 12pt; font-size: 12pt;
.quotelink-mobile {
color: #d00;
text-decoration: underline;
}
p:first-of-type::before {
content: '>';
color: #789922;
}
} }
} }
}`; }`;
@@ -2091,11 +2122,17 @@ export const BoardForm = styled.div`
.quotelink-mobile { .quotelink-mobile {
color: #81A2BE; color: #81A2BE;
text-decoration: underline;
} }
.quotelink-mobile:hover { .quotelink-mobile:hover {
color: #5F89AC; color: #5F89AC;
} }
p:first-of-type::before {
content: '>';
color: #b5bd68;
}
} }
}`; }`;
@@ -2198,11 +2235,17 @@ export const BoardForm = styled.div`
.quotelink-mobile { .quotelink-mobile {
color: #f60; color: #f60;
text-decoration: underline;
} }
.quotelink-mobile:hover { .quotelink-mobile:hover {
color: #ff3300; color: #ff3300;
} }
p:first-of-type::before {
content: '>';
color: #789922;
}
} }
}`; }`;
@@ -3091,7 +3134,7 @@ export const BoardForm = styled.div`
blockquote > p:first-of-type::before { blockquote > p:first-of-type::before {
content: '>'; content: '>';
color: #789922; color: #b5bd68;
} }
.quotelink { .quotelink {
src/components/styles/Thread.styled.jsx
+1 -2
View File
@@ -662,8 +662,7 @@ export const TopBar = styled.div`
} }
hr { hr {
margin-left: calc((100% - 100vw) / 2); display: none;
margin-right: calc((100% - 100vw) / 2);
} }
} }