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 }) => {
+
-
+
+
+ {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 }) => {
-
+
{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"