diff --git a/package.json b/package.json index e248a0e2..5683d931 100644 --- a/package.json +++ b/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", diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 9ddbdc11..60956e72 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -324,7 +324,6 @@ const Board = ({ setBodyStyle }) => { [ Catalog ] -
@@ -343,42 +342,49 @@ const Board = ({ setBodyStyle }) => {
+
-   +
+
+ File:  + filename.something (metadata) +
+ + filename.something + +
+ + {thread.title ? `${thread.title}` : null}  + {thread.author.displayName || "Anonymous"}   (User: {thread.author.address}) - -   - 2 weeks ago -   - - No. - 00000001 -     - - [ - handleClickThread(thread.cid)} className="reply-link" >Reply - ] +   + 2 weeks ago +   + + No. + 00000001 +   + + [ + handleClickThread(thread.cid)} className="reply-link" >Reply + ] + + + - -
- - {thread.title ? `${thread.title}` : null} - -
{thread.content ? ( <> -
{thread.content} ) : null} @@ -421,7 +427,6 @@ const Board = ({ setBodyStyle }) => {
)})}
-
)})} diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 519fa0b9..9107cf50 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -260,7 +260,15 @@ const Thread = ({ setBodyStyle }) => {
-   +
+
+ File:  + filename.something (metadata) +
+ + filename.something + +
{comment.title}   diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index adce56e0..c63f77ae 100644 --- a/src/components/styles/Board.styled.jsx +++ b/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 { - margin: 3px; - display: block; - width: 100%; + .file a { + text-decoration: underline; + color: #00e; } - .name-block { - display: inline-block; + .file a:hover { + color: red; } .name { @@ -1316,14 +1359,13 @@ export const BoardForm = styled.div` border: none; } - .post-info { - margin: 3px; - display: block; - width: 100%; + .file a { + text-decoration: underline; + color: #34345c; } - .name-block { - display: inline-block; + .file a:hover { + 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 { - margin: 3px; - display: block; - width: 100%; + .file a { + color: #00e; + text-decoration: underline; } - .name-block { - display: inline-block; - } + .file a:hover { + color: red; + } .name { color: #117743; @@ -1586,9 +1623,9 @@ export const BoardForm = styled.div` return ` font-size: 12pt; - .thread { - margin: 0; - clear: both; + .thread { + margin: 0; + clear: both; } .op-container { @@ -1611,15 +1648,14 @@ export const BoardForm = styled.div` border: none; } - .post-info { - margin: 3px; - display: block; - width: 100%; + .file a { + color: #34345c; + text-decoration: underline; } - .name-block { - display: inline-block; - } + .file a:hover { + color: red; + } .name { color: #117743; @@ -1752,15 +1788,14 @@ export const BoardForm = styled.div` border: none; } - .post-info { - margin: 3px; - display: block; - width: 100%; + .file a { + color: #81a2be; + text-decoration: underline; } - .name-block { - display: inline-block; - } + .file a:hover { + color: #5f89ab; + } .name { color: #c5c8c6; @@ -1902,14 +1937,13 @@ export const BoardForm = styled.div` border: none; } - .post-info { - margin: 3px; - display: block; - width: 100%; + .file a { + text-decoration: underline; + color: #f60; } - .name-block { - display: inline-block; + .file a:hover { + color: #ff3300; } .name { diff --git a/yarn.lock b/yarn.lock index f33f484d..8a88cc53 100644 --- a/yarn.lock +++ b/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"