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

add mobile feed posts

Browse Source
This commit is contained in:
plebeius.eth
2024-03-28 12:41:40 +01:00
parent b3353a28f5
commit 2add4fe2bd
5 changed files with 162 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-form/post-form.module.css
+1
View File
@@ -7,6 +7,7 @@
.postFormButtonMobile {
text-align: center;
padding-top: 9px;
padding-bottom: 0.5em;
}
@media (max-width: 640px) {
src/components/post/post.module.css
+76 -3
View File
@@ -2,13 +2,12 @@
clear: both;
}
.postDesktop .hrWrapper hr {
.hrWrapper hr {
margin: 0; /* margin bugs Virtuoso scrolling */
}
.postDesktop .hrWrapper {
padding-top: 0.5em; /* instead of using margin, wrap with padding */
padding-bottom: 0.5em;
padding: 0.5em 0; /* instead of using margin, wrap with padding */
}
.postDesktop .link a {
@@ -97,6 +96,80 @@
border-top: none;
margin: 0;
clear: both;
padding-bottom: 30px;
}
.postMobile .postContainer {
background-color: var(--post-mobile-background-color);
}
.postMobile .postOp {
display: inline;
}
.postMobile .postInfo {
overflow: hidden;
border-bottom: var(--post-mobile-info-border-bottom);
background-color: var(--post-mobile-info-background-color);
padding: 5px;
clear: left;
}
.postMobile .postMenuBtn {
color: var(--post-mobile-menu-button-color);
line-height: 1em;
width: 10px;
text-align: center;
transition: transform 0.1s;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
float: left;
font-weight: 700;
font-size: 16px;
height: 100%;
}
.postMobile .nameBlock {
clear: none;
}
.postMobile .nameBlock .name {
color: var(--post-mobile-name-text-color);
font-weight: var(--post-mobile-name-font-weight);
}
.postMobile .nameBlock .subject {
color: var(--post-mobile-subject-text-color);
font-weight: var(--post-mobile-subject-font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.postMobile .dateTimePostNum {
display: block;
text-align: right;
}
.postMobile .postMessage {
padding: 10px;
font-size: 11pt;
}
.postMobile .postLink {
clear: both;
background-color: var(--post-mobile-link-background-color);
border-top: var(--post-mobile-link-border-top);
padding: 5px;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
.postMobile .postLink .info {
color: var(--post-mobile-link-info-text-color);
}
@media (max-width: 640px) {
src/components/post/post.tsx
+44 -4
View File
@@ -6,6 +6,7 @@ import useReplies from '../../hooks/use-replies';
import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils';
import Markdown from '../markdown';
import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
const PostDesktop = ({ post }: Comment) => {
const { t } = useTranslation();
@@ -13,6 +14,7 @@ const PostDesktop = ({ post }: Comment) => {
const { displayName, shortAddress } = author || {};
const replies = useReplies(post);
const linkMediaInfo = getLinkMediaInfoMemoized(link);
const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
return (
<div className={styles.postDesktop}>
@@ -29,7 +31,7 @@ const PostDesktop = ({ post }: Comment) => {
</div>
)}
<div className={styles.postInfo}>
{title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
{title && <span className={styles.subject}>{displayTitle}</span>}{' '}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
@@ -72,13 +74,51 @@ const PostDesktop = ({ post }: Comment) => {
};
const PostMobile = ({ post }: Comment) => {
const { author, cid, content, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
const linkCount = countLinksInCommentReplies(post);
const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
return (
<div className={styles.postMobile}>
<hr />
<div className={styles.hrWrapper}>
<hr />
</div>
<div className={styles.thread}>
<div className={styles.postContainer}>
<div className={styles.postOp}></div>
<div className={styles.postLinkMobile}></div>
<div className={styles.postOp}>
<div className={styles.postInfo}>
<span className={styles.postMenuBtn} title='Post menu'>
...
</span>
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.address}>(u/{shortAddress || address.slice(0, 12) + '...'})</span>
{title && (
<>
<br />
<span className={styles.subject}>{displayTitle}</span>
</>
)}
</span>
<span className={styles.dateTimePostNum}>
{getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
</span>
</div>
<blockquote className={styles.postMessage}>
<Markdown content={content} />
</blockquote>
</div>
<div className={styles.postLink}>
<span className={styles.info}>
{replyCount} Replies
{linkCount > 0 && ` / ${linkCount} Links`}
</span>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className='button'>
View Thread
</Link>
</div>
</div>
</div>
</div>
src/lib/utils/comment-utils.ts
+19
View File
@@ -0,0 +1,19 @@
import { Comment } from '@plebbit/plebbit-react-hooks';
export const countLinksInCommentReplies = (comment: Comment) => {
let linkCount = 0;
if (comment.replyCount > 0) {
for (let reply of comment.replies.pages.topAll.comments) {
if (reply.link) {
linkCount++;
}
if (reply.replyCount > 0) {
linkCount += countLinksInCommentReplies(reply);
}
}
}
return linkCount;
};
src/themes.css
+22
View File
@@ -74,6 +74,17 @@
--post-menu-button-color: #000080;
--post-menu-button-color-hover: red;
--post-greentext-color: #789922;
--post-mobile-background-color: #f5e9e1;
--post-mobile-info-border-bottom: 1px solid #d9bfb7;
--post-mobile-info-background-color: #ead6ca;
--post-mobile-menu-button-color: #00e;
--post-mobile-name-text-color: #117743;
--post-mobile-name-font-weight: 700;
--post-mobile-subject-text-color: #cc1105;
--post-mobile-subject-font-weight: 700;
--post-mobile-link-background-color: #ead6ca;
--post-mobile-link-border-top: 1px solid #d9bfb7;
--post-mobile-link-info-text-color: #800;
/* post form */
--post-form-toggle-font-size: 22px;
@@ -157,6 +168,17 @@
--post-menu-button-color: #34345c;
--post-menu-button-color-hover: #d00;
--post-greentext-color: #789922;
--post-mobile-background-color: #d6daf0;
--post-mobile-info-border-bottom: 1px solid #b7c5d9;
--post-mobile-info-background-color: #c9cde8;
--post-mobile-menu-button-color: #34345c;
--post-mobile-name-text-color: purple;
--post-mobile-name-font-weight: 700;
--post-mobile-subject-text-color: #0f0c5d;
--post-mobile-subject-font-weight: 700;
--post-mobile-link-background-color: #c9cde8;
--post-mobile-link-border-top: 1px solid #b7c5d9;
--post-mobile-link-info-text-color: #34345c;
/* post form */
--post-form-toggle-font-size: 22px;