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

shortened text in Board

Browse Source
This commit is contained in:
plebbitor
2023-03-01 16:51:30 +01:00
parent 702a5c5211
commit fbb70a986d
3 changed files with 189 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+8
View File
@@ -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() {
src/components/Board.jsx
+110 -22
View File
@@ -416,14 +416,51 @@ const Board = ({ setBodyStyle }) => {
</a>
</div>
<span key={`nb-${thread.cid}`} className="name-block">
<span key={`q-${thread.cid}`} className="title">
{thread.title ? `${thread.title}` : null}&nbsp;
</span>
<span key={`n-${thread.cid}`} className="name">{thread.author.displayName || "Anonymous"}</span>
{thread.title ? (
thread.title.length > 75 ?
<>
<Tooltip key={`mob-tt-tm-${thread.cid}`} id="tt-title-mobile" className="tooltip" />
<span key={`q-${thread.cid}`} className="title"
data-tooltip-id="tt-title-mobile"
data-tooltip-content={thread.title}
data-tooltip-place="top">
{thread.title.slice(0, 75) + " (...)"}
</span>
</>
: <span key={`q-${thread.cid}`} className="title">
{thread.title}
</span>)
: null}&nbsp;
{thread.author.displayName
? thread.author.displayName.length > 20
? <>
<Tooltip key={`mob-tt-nm-${thread.cid}`} id="tt-name-mobile" className="tooltip" />
<span key={`n-${thread.cid}`} className="name"
data-tooltip-id="tt-name-mobile"
data-tooltip-content={thread.author.displayName}
data-tooltip-place="top">
{thread.author.displayName.slice(0, 20) + " (...)"}
</span>
</>
: <span key={`n-${thread.cid}`} className="name">
{thread.author.displayName}</span>
: <span key={`n-${thread.cid}`} className="name">
Anonymous</span>}
&nbsp;
<span key={`pa-${thread.cid}`} className="poster-address">
(User: {thread.author.address})
</span>
(User:&nbsp;
{thread.author.address.length > 15 ?
<>
<Tooltip key={`mob-tt-am-${thread.cid}`} id="tt-address-mobile" className="tooltip" />
<span key={`pa-${thread.cid}`} className="poster-address"
data-tooltip-id="tt-address-mobile"
data-tooltip-content={thread.author.address}
data-tooltip-place="top">
{thread.author.address.slice(0, 15) + "..."}
</span>
</>
: <span key={`pa-${thread.cid}`} className="poster-address">
{thread.author.address}
</span>})
&nbsp;
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
&nbsp;
@@ -444,13 +481,20 @@ const Board = ({ setBodyStyle }) => {
</span>
</div>
</span>
<blockquote key={`bq-${thread.cid}`}>
{thread.content ? (
<>
{thread.content}
</>
) : null}
</blockquote>
{thread.content ? (
thread.content.length > 2000 ?
<>
<blockquote key={`bq-${thread.cid}`}>
{thread.content.slice(0, 2000)}
<span key={`ttl-s-${thread.cid}`} className="ttl"> (...) Thread content too long.&nbsp;
<Link key={`ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</>
: <blockquote key={`bq-${thread.cid}`}>
{thread.content}
</blockquote>)
: null}
</div>
</div>
</div>
@@ -463,10 +507,38 @@ const Board = ({ setBodyStyle }) => {
<div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info">
<span key={`nb-${reply.cid}`} className="nameblock">
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
{reply.author.displayName
? reply.author.displayName.length > 12
? <>
<Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name" className="tooltip" />
<span key={`mob-n-${reply.cid}`} className="name"
data-tooltip-id="tt-name"
data-tooltip-content={reply.author.displayName}
data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"}
</span>
</>
: <span key={`mob-n-${reply.cid}`} className="name">
{reply.author.displayName}</span>
: <span key={`mob-n-${reply.cid}`} className="name">
Anonymous</span>}
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
(User: {reply.author.address})
(User:&nbsp;
{reply.author.address.length > 12 ?
<>
<Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
<span key={`mob-ha-${reply.cid}`}
data-tooltip-id="tt-address"
data-tooltip-content={reply.author.address}
data-tooltip-place="top">
{reply.author.address.slice(0, 12) + "..."}
</span>
</>
: <span key={`mob-ha-${reply.cid}`}>
{reply.author.address}
</span>}
)
</span>
</span>
&nbsp;
@@ -478,12 +550,28 @@ const Board = ({ setBodyStyle }) => {
</span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
</div>
<blockquote key={`pm-${reply.cid}`} className="post-message">
<a className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />}
</a>
{reply.content}
</blockquote>
{reply.content ? (
reply.content.length > 1000 ?
<>
<blockquote key={`pm-${reply.cid}`} className="post-message">
<a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />}
</a>
{reply.content.slice(0, 1000)}
<span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
<Link key={`ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</>
: <blockquote key={`pm-${thread.cid}`} className="post-message">
<a key={`r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />}
</a>
{reply.content}
</blockquote>)
: null}
</div>
</div>
)})}
src/components/styles/Board.styled.jsx
+71 -8
View File
@@ -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;