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

feat(post): add post info row, update themes

Browse Source
This commit is contained in:
plebeius.eth
2024-03-22 17:12:54 +01:00
parent d0a3e959fc
commit 992ed5dbb0
4 changed files with 98 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-nav/board-nav.module.css
+4 -4
View File
@@ -5,13 +5,13 @@
}
.boardNavDesktop a {
color: var(--button-desktop-text-color);
text-decoration: var(--button-desktop-text-color-decoration);
color: var(--boardnav-desktop-link-text-color);
text-decoration: var(--boardnav-desktop-link-text-decoration);
}
.boardNavDesktop a:hover {
color: var(--button-desktop-text-color-hover);
text-decoration: var(--button-desktop-text-color-hover);
color: var(--boardnav-desktop-link-text-color-hover);
text-decoration: var(--boardnav-desktop-link-text-decoration-hover);
}
.navTopRight {
src/components/post/post.module.css
+22 -2
View File
@@ -2,12 +2,32 @@
clear: both;
}
.link a {
.postDesktop .link a {
color: var(--post-link-text-color);
text-decoration: var(--post-link-text-decoration);
}
.link a:hover {
.postDesktop .link a:hover {
color: var(--post-link-text-color-hover);
text-decoration: var(--post-link-text-decoration-hover);
}
.postDesktop .postInfo {
width: 100%;
}
.postDesktop .subject {
color: var(--post-subject-text-color);
font-weight: var(--post-subject-font-weight);
}
.postDesktop .name {
color: var(--post-name-text-color);
font-weight: var(--post-name-font-weight);
}
@media (max-width: 640px) {
.postDesktop {
display: none;
}
}
src/components/post/post.tsx
+11 -3
View File
@@ -4,14 +4,15 @@ import useReplies from '../../hooks/use-replies';
import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
const Post = ({ post }: Comment) => {
const { content, link, title } = post;
const { author, content, link, title } = post || {};
const { displayName, shortAddress } = author || {};
const replies = useReplies(post);
const linkMediaInfo = getLinkMediaInfoMemoized(link);
return (
<div className={styles.thread}>
<hr />
<div className={styles.postContainer}>
<div className={styles.postDesktop}>
<hr />
{linkMediaInfo?.url && (
<div className={styles.link}>
Link:{' '}
@@ -21,7 +22,14 @@ const Post = ({ post }: Comment) => {
({linkMediaInfo?.type})
</div>
)}
<div className={styles.postInfo}></div>
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress})</span>
</span>
<span className={styles.dateTime}></span>
</div>
<div className={styles.postMessage}></div>
</div>
</div>
src/themes.css
+61 -1
View File
@@ -8,6 +8,10 @@
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #b86;
--boardnav-desktop-link-text-color: #800;
--boardnav-desktop-link-text-color-hover: #e00;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 10px;
@@ -62,6 +66,12 @@
--post-link-text-color-hover: red;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #cc1105;
--post-subject-font-weight: 700;
--post-name-text-color: #117743;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -79,6 +89,10 @@
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #89a;
--boardnav-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 10px;
@@ -132,6 +146,12 @@
--post-link-text-color-hover: #d00;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #0f0c5d;
--post-subject-font-weight: 700;
--post-name-text-color: #117743;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -148,6 +168,10 @@
/* board nav */
--boardnav-font-size: 11pt;
--boardnav-separator-color: none;
--boardnav-desktop-link-text-color: #00e;
--boardnav-desktop-link-text-color-hover: red;
--boardnav-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 11pt;
@@ -179,6 +203,12 @@
--post-link-text-color-hover: red;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #cc1105;
--post-subject-font-weight: 700;
--post-name-text-color: #117743;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -189,13 +219,17 @@
--banner-image-border: 1px solid #000;
--board-title-font-size: 32px;
--board-title-text-color: #af0a0f;
--board-title-font-family: Tahoma, sans-serif;
--board-title-font-family: times new roman, serif;
--board-address-font-size: 10pt;
--board-address-text-color: #af0a0f;
/* board nav */
--boardnav-font-size: 11pt;
--boardnav-separator-color: none;
--boardnav-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 11pt;
@@ -240,6 +274,12 @@
--post-link-text-color-hover: #d00;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #0f0c5d;
--post-subject-font-weight: 700;
--post-name-text-color: #117743;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -266,6 +306,10 @@
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #c5c8c6;
--boardnav-desktop-link-text-color: #81a2be;
--boardnav-desktop-link-text-color-hover: #5f89ac;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #1d1f21;
--boardnav-mobile-border-bottom: 2px solid #282a2e;
--boardnav-mobile-font-size: 10px;
@@ -299,6 +343,12 @@
--post-link-text-color-hover: #5f89ac;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #b294bb;
--post-subject-font-weight: 700;
--post-name-text-color: #c5c8c6;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;
@@ -320,6 +370,10 @@
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #333;
--boardnav-desktop-link-text-color: #f60;
--boardnav-desktop-link-text-color-hover: #f30;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #ddd;
--boardnav-mobile-border-bottom: 2px solid #ccc;
--boardnav-mobile-font-size: 10px;
@@ -353,6 +407,12 @@
--post-link-text-color-hover: #f30;
--post-link-text-decoration-hover: underline;
/* post */
--post-subject-text-color: #111;
--post-subject-font-weight: 700;
--post-name-text-color: #004a99;
--post-name-font-weight: 700;
/* post form */
--post-form-toggle-font-size: 22px;
--post-form-toggle-font-weight: 700;