added responsive file box

package.json

@@ -16,6 +16,7 @@
     "babel-plugin-styled-components": "^2.0.7",
     "eslint": "^8.34.0",
     "eslint-config-react-app": "^7.0.1",
+    "ext-name": "^5.0.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Board.jsx

@@ -324,7 +324,6 @@ const Board = ({ setBodyStyle }) => {
         [
         <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
         ]
-        <hr />
       </TopBar>
       <BoardForm selectedStyle={selectedStyle}>
         <div className="board">
@@ -343,42 +342,49 @@ const Board = ({ setBodyStyle }) => {
             <div key={`t-${thread.cid}`} className="thread">
               <div key={`c-${thread.cid}`} className="post-container op-container">
                 <div key={`po-${thread.cid}`} className="post op">
+                  <hr key={`hr-${thread.cid}`} />
                   <div key={`pi-${thread.cid}`} className="post-info">
-                  &nbsp;
+                    <div key={`f-${thread.cid}`} className="file">
+                      <div key={`ft-${thread.cid}`} className="file-text">
+                        File:&nbsp;
+                        <a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
+                      </div>
+                      <a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" class="file-thumb">
+                        <img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
+                      </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>
                       &nbsp;
                       <span key={`pa-${thread.cid}`} className="poster-address">
                         (User: {thread.author.address})
                       </span>
-                    </span>
+                      &nbsp;
-                    &nbsp;
+                      <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
-                    <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
+                      &nbsp;
-                    &nbsp;
+                      <span key={`pn-${thread.cid}`} className="post-number">
-                    <span key={`pn-${thread.cid}`} className="post-number">
+                        <a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
-                      <a key={`pl1-${thread.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
+                        <a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
-                      <a key={`pl2-${thread.cid}`} href={handleVoidClick} title="Reply to this post">00000001</a>
+                        &nbsp;
-                      &nbsp; &nbsp;
+                        <span key={`rl1-${thread.cid}`}>
-                      <span key={`rl1-${thread.cid}`}>
+                          [
-                        [
+                          <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
-                        <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
+                          ]
-                        ]
+                        </span>
                       </span>
+                      <a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
+                      <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
+                        <span key={`ql1-${thread.cid}`}>
+                          <a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
+                        </span>
+                      </div>
                     </span>
-                    <a key={`pmb-${thread.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
-                    <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
-                      <span key={`ql1-${thread.cid}`}>
-                        <a key={`ql2-${thread.cid}`} className="quote-link" href={handleVoidClick}>{'>>'}00000002</a>
-                      </span>
-                    </div>
                     <blockquote key={`bq-${thread.cid}`}>
-                      <span key={`q-${thread.cid}`} className="title">
-                        {thread.title ? `${thread.title}` : null}
-                      </span>
-                      <br key={`br1-${thread.cid}`} />
                       {thread.content ? (
                         <>
-                          <br key={`br2-${thread.cid}`} />
                           {thread.content}
                         </>
                       ) : null}
@@ -421,7 +427,6 @@ const Board = ({ setBodyStyle }) => {
               </div>
               )})}
             </div>
-            <hr key={`hr-${thread.cid}`} />
             </>
             )})}
           </InfiniteScroll>

src/components/Thread.jsx

@@ -260,7 +260,15 @@ const Thread = ({ setBodyStyle }) => {
               <div className="post-container op-container">
                 <div className="post op">
                   <div className="post-info">
-                  &nbsp;
+                    <div key={`f-${comment.cid}`} className="file">
+                        <div key={`ft-${comment.cid}`} className="file-text">
+                          File:&nbsp;
+                          <a key={`fa-${comment.cid}`} href={`${comment.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
+                        </div>
+                        <a key={`fta-${comment.cid}`} href={handleVoidClick} target="_blank" class="file-thumb">
+                          <img key={`fti-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
+                        </a>
+                      </div>
                     <span className="name-block">
                       <span key={`q-${comment.cid}`} className="title">{comment.title}</span>
                       &nbsp;

src/components/styles/Board.styled.jsx

@@ -46,7 +46,7 @@ export const NavBar = styled.div`
         }
 
         a:hover {
-          color: red;
+          color: #d00;
         }
 
         .nav {
@@ -929,7 +929,7 @@ export const PostForm = styled.div`
         text-decoration: none;
       }
       a:hover {
-        color: red;
+        color: #d00;
       }`;
 
       case 'Futaba':
@@ -1042,7 +1042,7 @@ export const TopBar = styled.div`
         }
         
         a:hover {
-          color: red;
+          color: #d00;
         }`;
 
       case 'Futaba':
@@ -1142,6 +1142,50 @@ export const TopBar = styled.div`
 `;
 
 export const BoardForm = styled.div`
+  .file {
+    display: block;
+  }
+
+  .file-text {
+    max-width: 600px;
+    white-space: nowrap;
+  }
+
+  .fileText a {
+    text-decoration: underline;
+  }
+
+  .file-thumb {
+    float: left;
+    margin: 3px 20px 5px 20px;
+  }
+
+  .file-thumb img {
+    border: none;
+    float: left;
+    max-width: 200px;
+    max-height: 200px;
+  }
+
+  @media (min-width: 600px) {
+    .post-info {
+      margin: 3px;
+      display: block;
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .name-block {
+      display: block;
+    }
+
+    .post-info {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -1170,14 +1214,13 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        text-decoration: underline;
-        display: block;
+        color: #00e;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: red;
       }
 
       .name {
@@ -1316,14 +1359,13 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        text-decoration: underline;
-        display: block;
+        color: #34345c;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: #d00;
       }
 
       .name {
@@ -1337,7 +1379,7 @@ export const BoardForm = styled.div`
       }
 
       .post-number a:hover {
-        color: red;
+        color: #d00;
       }
 
       .reply-link:not(:hover) {
@@ -1359,7 +1401,7 @@ export const BoardForm = styled.div`
       }
 
       .post-menu-button:hover {
-        color: red;
+        color: #d00;
       }
 
       .backlink {
@@ -1370,14 +1412,10 @@ export const BoardForm = styled.div`
       }
 
       .quote-link {
-        color: #34345C;
+        color: #d00;
         text-decoration: underline;
       }
 
-      .quote-link:hover {
-        color: red;
-      }
-
       .backlink span {
         padding: 0;
       }
@@ -1436,7 +1474,7 @@ export const BoardForm = styled.div`
         return `
         font-size: 12pt;
         
-        .thread {
+      .thread {
         margin: 0;
         clear: both;
       }
@@ -1461,15 +1499,14 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        color: #00e;
-        display: block;
+        text-decoration: underline;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: red;
-      }
+       } 
 
       .name {
         color: #117743;
@@ -1586,9 +1623,9 @@ export const BoardForm = styled.div`
         return `
         font-size: 12pt;
 
-        .thread {
+      .thread {
-        margin: 0;
+      margin: 0;
-        clear: both;
+      clear: both;
       }
 
       .op-container {
@@ -1611,14 +1648,13 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        color: #34345c;
-        display: block;
+        text-decoration: underline;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: red;
       } 
 
       .name {
@@ -1752,14 +1788,13 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        color: #81a2be;
-        display: block;
+        text-decoration: underline;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: #5f89ab;
       } 
 
       .name {
@@ -1902,14 +1937,13 @@ export const BoardForm = styled.div`
         border: none;
       }
 
-      .post-info {
+      .file a {
-        margin: 3px;
+        text-decoration: underline;
-        display: block;
+        color: #f60;
-        width: 100%;
       }
 
-      .name-block {
+      .file a:hover {
-        display: inline-block;
+        color: #ff3300;
       }
 
       .name {

yarn.lock

@@ -5855,6 +5855,21 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext-list@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/ext-list/-/ext-list-2.2.2.tgz#0b98e64ed82f5acf0f2931babf69212ef52ddd37"
+  integrity sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==
+  dependencies:
+    mime-db "^1.28.0"
+
+ext-name@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ext-name/-/ext-name-5.0.0.tgz#70781981d183ee15d13993c8822045c506c8f0a6"
+  integrity sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==
+  dependencies:
+    ext-list "^2.0.0"
+    sort-keys-length "^1.0.0"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -7072,7 +7087,7 @@ is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-obj@^1.1.0:
+is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
@@ -8386,7 +8401,7 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+mime-db@1.52.0, "mime-db@>= 1.43.0 < 2", mime-db@^1.28.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
@@ -10735,6 +10750,20 @@ socks@^2.6.2:
     ip "^2.0.0"
     smart-buffer "^4.2.0"
 
+sort-keys-length@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"
+  integrity sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==
+  dependencies:
+    sort-keys "^1.0.0"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha512-vzn8aSqKgytVik0iwdBEi+zevbTYZogewTUM6dtpmGwEcdzbub/TX4bCzRhebDCRC3QzXgJsLRKB2V/Oof7HXg==
+  dependencies:
+    is-plain-obj "^1.0.0"
+
 source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"