diff --git a/src/components/Board.jsx b/src/components/Board.jsx index d1b00e56..1f84a520 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -211,6 +211,20 @@ const Board = ({ setBodyStyle }) => { } } + function renderComments(comments) { + return comments.map(comment => { + const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; + + if (replyCount > 0 && nestedComments.length > 0) { + const renderedNestedComments = renderComments(nestedComments, comment.cid); + return [comment, ...renderedNestedComments]; + } + + return [comment]; + }).flat(); + } + + return ( @@ -317,6 +331,7 @@ const Board = ({ setBodyStyle }) => { let counter = 1; const thread = object; const { replies: { pages: { topAll: { comments } } } } = object; + const renderedComments = renderComments(comments, thread.cid); return ( <>
@@ -365,8 +380,9 @@ const Board = ({ setBodyStyle }) => {
- {comments.map(reply => { + {renderedComments.map(reply => { counter++; + const counterString = counter.toString().padStart(8, '0'); return (
{'>>'}
@@ -385,11 +401,14 @@ const Board = ({ setBodyStyle }) => {   No. - {`0000000${counter}`} + {counterString}
+ + {`>>${counterString}`}{counterString !== '' &&
} +
{reply.content}
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index 7720a681..d526b959 100644 --- a/src/components/styles/Board.styled.jsx +++ b/src/components/styles/Board.styled.jsx @@ -1174,6 +1174,7 @@ export const BoardForm = styled.div` blockquote { display: block; + line-height: 1.3em; } .title { @@ -1186,6 +1187,16 @@ export const BoardForm = styled.div` color: #789922; } + .quotelink { + color: navy; + text-decoration: underline; + font-family: arial; + } + + .quotelink:hover { + color: red; + } + .side-arrows { color: #e0bfb7; float: left; @@ -1309,6 +1320,7 @@ export const BoardForm = styled.div` blockquote { display: block; + line-height: 1.3em; } .title { @@ -1320,6 +1332,12 @@ export const BoardForm = styled.div` content: '>'; color: #789922; } + + .quotelink { + color: #d00; + text-decoration: underline; + font-family: arial; + } .side-arrows { color: #b7c5d9; @@ -1452,6 +1470,7 @@ export const BoardForm = styled.div` blockquote { display: block; + line-height: 1.3em; } .title { @@ -1464,6 +1483,15 @@ export const BoardForm = styled.div` color: #789922; } + .quotelink { + color: navy; + text-decoration: underline; + } + + .quotelink:hover { + color: red; + } + .side-arrows { float: left; margin-right: 2px; @@ -1579,24 +1607,21 @@ export const BoardForm = styled.div` } .quote-link { - color: navy; + color: #d00; text-decoration: underline; } - .quote-link:hover { - color: red; - } - .backlink span { padding: 0; } blockquote { display: block; + line-height: 1.3em; } .title { - color: #0f0c5d; + color: #cc1105; font-weight: 700; } @@ -1605,6 +1630,11 @@ export const BoardForm = styled.div` color: #789922; } + .quotelink { + color: #d00; + text-decoration: underline; + } + .side-arrows { float: left; margin-right: 2px; @@ -1719,7 +1749,7 @@ export const BoardForm = styled.div` } .quote-link:hover { - color: red; + color: #81a2be; } .backlink span { @@ -1728,6 +1758,7 @@ export const BoardForm = styled.div` blockquote { display: block; + line-height: 1.3em; } .title { @@ -1740,6 +1771,16 @@ export const BoardForm = styled.div` color: #789922; } + .quotelink { + color: #5f89ac; + text-decoration: underline; + font-family: arial; + } + + .quotelink:hover { + color: #81a2be; + } + .side-arrows { color: #c5c8c6; float: left; @@ -1849,7 +1890,7 @@ export const BoardForm = styled.div` } .quote-link { - color: #34345C; + color: #f60; text-decoration: underline; } @@ -1863,6 +1904,7 @@ export const BoardForm = styled.div` blockquote { display: block; + line-height: 1.3em; } .title { @@ -1875,6 +1917,16 @@ export const BoardForm = styled.div` color: #789922; } + .quotelink { + color: #f60; + text-decoration: underline; + font-family: arial; + } + + .quotelink:hover { + color: red; + } + .side-arrows { color: #333; float: left;