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 navbars to thread view

Browse Source
This commit is contained in:
plebbitor
2023-02-21 14:49:00 +01:00
parent f667eaccc4
commit d367318e33
5 changed files with 244 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+1 -1
View File
@@ -262,7 +262,7 @@ const Board = ({ setBodyStyle }) => {
<PostForm selectedStyle={selectedStyle}>
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
[
<a onClick={handleClickForm}>Start a New Thread</a>
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
]
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
src/components/Catalog.jsx
+1 -1
View File
@@ -248,7 +248,7 @@ const Catalog = ({ setBodyStyle }) => {
<PostForm selectedStyle={selectedStyle}>
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
[
<a onClick={handleClickForm}>Start a New Thread</a>
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
]
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
src/components/Thread.jsx
+45 -7
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled';
import { ReplyFormTable, ReplyFormLink, TopBar } from './styles/Thread.styled';
import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
import { BoardContext } from '../App';
import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner';
@@ -115,6 +115,10 @@ const Thread = ({ setBodyStyle }) => {
}
}
const handleClickTop = () => {
window.scrollTo(0, 0);
}
function renderComments(comments) {
return comments.map(comment => {
const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment;
@@ -161,7 +165,7 @@ const Thread = ({ setBodyStyle }) => {
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} >
[
<a onClick={handleClickForm}>Post a Reply</a>
<a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
]
</ReplyFormLink>
<ReplyFormTable id="post-form" showReplyForm={showReplyForm} selectedStyle={selectedStyle} className="post-form">
@@ -223,6 +227,14 @@ const Thread = ({ setBodyStyle }) => {
<Link to={`/${selectedAddress}`}>Return</Link>
]
</span>
{comment ? (
comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
) : (
<span className="reply-stat">No replies yet</span>
)) : (
null
)}
<hr />
</TopBar>
<BoardForm selectedStyle={selectedStyle}>
@@ -270,11 +282,37 @@ const Thread = ({ setBodyStyle }) => {
</div>
</div>
</div>
{comment.replyCount > 0 ? (
<div>there are {comment.replyCount} replies</div>
) : (
<div>No replies yet</div>
)}
<BottomBar selectedStyle={selectedStyle}>
<hr />
<span className="bottom-bar-return">
[
<Link to={`/${selectedAddress}`}>Return</Link>
]
</span>
<span className="bottom-bar-catalog">
[
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
<span className="bottom-bar-top">
[
<a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'}>Top</a>
]
</span>
<span className="quickreply-button">
[
<a href={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
]
</span>
{comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
) : (
<span className="reply-stat">No replies yet</span>
)}
<hr />
</BottomBar>
<>
</>
{/* {comment ? (
comment.map(thread => {
let counter = 1;
src/components/styles/Board.styled.jsx
+7 -9
View File
@@ -989,7 +989,7 @@ export const PostForm = styled.div`
text-decoration: none;
}
a:hover {
color: red;
color: #ff3300;
}`;
}
@@ -1134,7 +1134,7 @@ export const TopBar = styled.div`
}
a:hover {
color: red;
color: #ff3300;
}`;
}
@@ -1579,9 +1579,7 @@ export const BoardForm = styled.div`
}
hr {
border: none;
border-top: 1px solid #d9bfb7;
height: 0;
clear: both;
}`;
case 'Burichan':
@@ -1921,7 +1919,7 @@ export const BoardForm = styled.div`
}
.post-number a:hover {
color: red;
color: #ff3300;
}
.reply-link:not(:hover) {
@@ -1943,7 +1941,7 @@ export const BoardForm = styled.div`
}
.post-menu-button:hover {
color: red;
color: #ff3300;
}
.backlink {
@@ -1959,7 +1957,7 @@ export const BoardForm = styled.div`
}
.quote-link:hover {
color: red;
color: #ff3300;
}
.backlink span {
@@ -1988,7 +1986,7 @@ export const BoardForm = styled.div`
}
.quotelink:hover {
color: red;
color: #ff3300;
}
.side-arrows {
src/components/styles/Thread.styled.jsx
+190 -14
View File
@@ -472,12 +472,20 @@ export const ReplyFormTable = styled.table`
export const TopBar = styled.div`
.return-button {
padding-top: 3px;
margin-top: 3px;
}
.reply-stat {
position: relative;
float: right;
margin-right: 5px;
margin-top: 4px;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `lear: both;
return `clear: both;
hr {
border: none;
border-top: 1px solid #d9bfb7;
@@ -490,8 +498,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
a, a:visited {
color: #00e !important;
@@ -517,8 +524,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
a, a:visited {
color: #34345c !important;
@@ -542,8 +548,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
padding-top: 2px;
font-size: 12pt;
@@ -554,6 +559,11 @@ export const TopBar = styled.div`
a:hover {
color: red !important;
}
}
.reply-stat {
font-size: 12pt;
bottom: 2px;
}`;
case 'Burichan':
@@ -568,8 +578,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
padding-top: 2px;
font-size: 12pt;
@@ -580,6 +589,11 @@ export const TopBar = styled.div`
a:hover {
color: red !important;
}
}
.reply-stat {
font-size: 12pt;
bottom: 2px;
}`;
case 'Tomorrow':
@@ -596,8 +610,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
a, a:visited {
color: #81a2be !important;
@@ -623,8 +636,7 @@ export const TopBar = styled.div`
}
.return-button {
float: right;
margin-right: 4px;
margin-left: 10px;
a, a:visited {
color: #f60 !important;
@@ -636,6 +648,170 @@ export const TopBar = styled.div`
}
}`;
}
}}
`;
export const BottomBar = styled.div`
.reply-stat {
position: relative;
float: right;
margin-right: 5px;
transform: translateY(-50%);
}
.quickreply-button {
text-align: center;
width: 200px;
position: absolute;
margin-left: 50%;
left: -100px;
transform: translateY(-50%);
}
.bottom-bar-return {
position: absolute;
transform: translateY(-50%);
}
.bottom-bar-catalog {
position: absolute;
transform: translateY(-50%);
left: 56px;
}
.bottom-bar-top {
position: absolute;
transform: translateY(-50%);
left: 113px;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
a, a:visited {
color: #00e !important;
text-decoration: none;
}
a:hover {
color: red !important;
}
hr {
height: 0;
clear: both;
padding-bottom: 5px;
padding-top: 5px;
}`;
case 'Yotsuba B':
return `
a, a:visited {
color: #34345c !important;
text-decoration: none;
}
a:hover {
color: red !important;
}
hr {
height: 0;
clear: both;
padding-bottom: 5px;
padding-top: 5px;
}`;
case 'Futaba':
return `
a, a:visited {
color: #00e !important;
text-decoration: underline;
}
a:hover {
color: red !important;
}
hr {
height: 0;
clear: both;
margin-top: 5px;
margin-bottom: 15px;
}
.bottom-bar-catalog {
left: 62px;
}
.bottom-bar-top {
left: 125px;
}`;
case 'Burichan':
return `
a, a:visited {
color: #34345c !important;
text-decoration: underline;
}
a:hover {
color: red !important;
}
hr {
height: 0;
clear: both;
margin-top: 5px;
margin-bottom: 15px;
}
.bottom-bar-catalog {
left: 62px;
}
.bottom-bar-top {
left: 125px;
}`;
case 'Tomorrow':
return `
a, a:visited {
color: #81a2be !important;
text-decoration: none;
}
a:hover {
color: #5f89ab !important;
}
hr {
height: 0;
clear: both;
padding-bottom: 5px;
padding-top: 5px;
}`;
case 'Photon':
return `
a, a:visited {
color: #f60 !important;
text-decoration: none;
}
a:hover {
color: #ff3300 !important;
}
hr {
height: 0;
clear: both;
padding-bottom: 5px;
padding-top: 5px;
}`;
}
}}
`;