diff --git a/src/App.js b/src/App.js
index 6edc9a8a..0123eb3f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,14 @@ const GlobalStyle = createGlobalStyle`
color: ${props => props.color};
font-family: ${props => props.fontFamily};
}
+
+ .tooltip {
+ border-radius: 0;
+ max-width: 40%;
+ font-size: 11px;
+ padding: 3px;
+ opacity: 100%;
+ }
`;
export default function App() {
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 6996c736..fb88d114 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -416,14 +416,51 @@ const Board = ({ setBodyStyle }) => {
-
- {thread.title ? `${thread.title}` : null}
-
- {thread.author.displayName || "Anonymous"}
+ {thread.title ? (
+ thread.title.length > 75 ?
+ <>
+
+
+ {thread.title.slice(0, 75) + " (...)"}
+
+ >
+ :
+ {thread.title}
+ )
+ : null}
+ {thread.author.displayName
+ ? thread.author.displayName.length > 20
+ ? <>
+
+
+ {thread.author.displayName.slice(0, 20) + " (...)"}
+
+ >
+ :
+ {thread.author.displayName}
+ :
+ Anonymous}
-
- (User: {thread.author.address})
-
+ (User:
+ {thread.author.address.length > 15 ?
+ <>
+
+
+ {thread.author.address.slice(0, 15) + "..."}
+
+ >
+ :
+ {thread.author.address}
+ })
2 weeks ago
@@ -444,13 +481,20 @@ const Board = ({ setBodyStyle }) => {
-
- {thread.content ? (
- <>
- {thread.content}
- >
- ) : null}
-
+ {thread.content ? (
+ thread.content.length > 2000 ?
+ <>
+
+ {thread.content.slice(0, 2000)}
+ (...) Thread content too long.
+ handleClickThread(thread.cid)} className="ttl-link">Click here
+ to view.
+
+ >
+ :
+ {thread.content}
+
)
+ : null}
@@ -463,10 +507,38 @@ const Board = ({ setBodyStyle }) => {
- {reply.author.displayName || "Anonymous"}
+ {reply.author.displayName
+ ? reply.author.displayName.length > 12
+ ? <>
+
+
+ {reply.author.displayName.slice(0, 12) + " (...)"}
+
+ >
+ :
+ {reply.author.displayName}
+ :
+ Anonymous}
- (User: {reply.author.address})
+ (User:
+ {reply.author.address.length > 12 ?
+ <>
+
+
+ {reply.author.address.slice(0, 12) + "..."}
+
+ >
+ :
+ {reply.author.address}
+ }
+ )
@@ -478,12 +550,28 @@ const Board = ({ setBodyStyle }) => {
▶
-
-
- {`>>${counterString}`}{
}
-
- {reply.content}
-
+ {reply.content ? (
+ reply.content.length > 1000 ?
+ <>
+
+
+ {`>>${counterString}`}{
}
+
+ {reply.content.slice(0, 1000)}
+ (...)
+
+ Comment too long.
+ handleClickThread(thread.cid)} className="ttl-link">Click here
+ to view.
+
+ >
+ :
+
+ {`>>${counterString}`}{
}
+
+ {reply.content}
+
)
+ : null}
)})}
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 6633726f..8a75b54b 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -1575,14 +1575,6 @@ export const BoardForm = styled.div`
display: none;
}
- .tooltip {
- border-radius: 0;
- max-width: 80%;
- font-size: 11px;
- padding: 3px;
- opacity: 100%;
- }
-
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
@@ -2515,6 +2507,19 @@ export const BoardForm = styled.div`
color: #00e !important;
}
+ .ttl {
+ color: #707070;
+ }
+
+ .ttl-link {
+ text-decoration: none;
+ color: #00e;
+ }
+
+ .ttl-link:hover {
+ color: red;
+ }
+
.post-menu-button {
color: #000080;
margin-left: 5px;
@@ -2660,6 +2665,19 @@ export const BoardForm = styled.div`
color: #34345c !important;
}
+ .ttl {
+ color: #707070;
+ }
+
+ .ttl-link {
+ text-decoration: none;
+ color: #34345c;
+ }
+
+ .ttl-link:hover {
+ color: #d00;
+ }
+
.post-menu-button {
color: #34345c;
margin-left: 5px;
@@ -2804,6 +2822,13 @@ export const BoardForm = styled.div`
color: #00e !important;
}
+ .ttl-link {
+ color: #00e;
+ }
+
+ .ttl-link:hover {
+ color: red;
+ }
.post-menu-button {
color: #00e;
@@ -2953,6 +2978,18 @@ export const BoardForm = styled.div`
color: #000 !important;
}
+ .ttl {
+ color: #707070;
+ }
+
+ .ttl-link {
+ color: #34345c;
+ }
+
+ .ttl-link:hover {
+ color: #d00;
+ }
+
.post-menu-button {
color: #34345c;
margin-left: 5px;
@@ -3089,6 +3126,19 @@ export const BoardForm = styled.div`
color: #81a2be;
}
+ .ttl {
+ color: #707070;
+ }
+
+ .ttl-link {
+ text-decoration: none;
+ color: #81a2be;
+ }
+
+ .ttl-link:hover {
+ color: #5f89ab;
+ }
+
.reply-link:hover {
color: #5f89ab
}
@@ -3238,6 +3288,19 @@ export const BoardForm = styled.div`
color: #f60 !important;
}
+ .ttl {
+ color: #707070;
+ }
+
+ .ttl-link {
+ text-decoration: none;
+ color: #f60;
+ }
+
+ .ttl-link:hover {
+ color: #ff3300;
+ }
+
.post-menu-button {
color: #f60;
margin-left: 5px;