From fbb70a986d3fb585fa680eeb373dc1f2f278fcf5 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Wed, 1 Mar 2023 16:51:30 +0100
Subject: [PATCH] shortened text in Board

---
 src/App.js                             |   8 ++
 src/components/Board.jsx               | 132 ++++++++++++++++++++-----
 src/components/styles/Board.styled.jsx |  79 +++++++++++++--
 3 files changed, 189 insertions(+), 30 deletions(-)

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 }) => {
                         </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>
                 )})}
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;